asp.net-mvc-4 - ASP.NET MVC RemoteAttribute 验证不起作用 - 操作未执行

Question

我一直在绞尽脑汁地试图找出为什么 ValidationController 操作没有被触发。

我在项目范围的 web.config 中启用了设置:

<add key="ClientValidationEnabled" value="true" />
<add key="UnobtrusiveJavaScriptEnabled" value="true" />

我有以下 Controller :

[OutputCache(Location = OutputCacheLocation.None, NoStore = true)]
public class ValidationController : Controller
{
    private readonly IUserRepository userRepository;

    public ValidationController(IUserRepository userRepository)
    {
        this.userRepository = userRepository;
    }

    public JsonResult IsUserNameAvailable(string username)
    {
        User user = userRepository.Get(u => u.UserName == username);

        if (user == null) return Json(true, JsonRequestBehavior.AllowGet);
        else return Json(false, JsonRequestBehavior.AllowGet);
    }
}

以及以下 View 模型:

    [Required(ErrorMessage = "Required *")]
    [StringLength(50, MinimumLength = 4, ErrorMessage = "Please keep the username between four and twenty character.")]
    [Remote("IsUserNameAvailable", "Validation", ErrorMessage = "A user with this username already exists.")]
    [Display(Name = "Username")]
    public string UserName { get; set; }

我的表单中有以下字段:

<form id="registerForm">
     ...
     @Html.ValidationMessageFor(m => m.UserName)
     @Html.TextBoxFor(m => m.UserName)
     @Html.LabelFor(m => m.UserName)
</form>

我进行了 ajax 表单提交，并且服务器端验证已经完美运行:

$.post("/Account/Register", $('#registerForm').serialize(), function(){
   updateFormWithServerGeneratedErrors();
})

尽管服务器为我的字段生成了正确的输入标记:

<input ... data-val-remote-url="/Validation/IsUserNameAvailable" data-val-remote-additionalfields="*.UserName" data-val-remote="A user with this username already exists." ... >

我可以通过输入网址来手动执行操作:“/Validation/IsUserNameAvailable?username=SomeName”，但 Fiddler 不会显示在按键或焦点更改时对此网址发出的任何请求。

根据this tutorial我不需要编写任何 JavaScript 来使其工作。是的，当我开始修改表单时，我已经加载了 jquery.validate.js 和 jquery.validate.unobtrusive.js 脚本。

这里有什么问题吗？

Answer 1

好的，我找到了答案。

引用达林·季米特洛夫的话 here :

“不引人注目的验证不能开箱即用地向 DOM 动态添加元素，例如向服务器发送 AJAX 请求，服务器返回部分 View ，然后将此部分 View 注入(inject)到DOM。

为了使其工作，您需要使用不显眼的验证框架注册这些新添加的元素。为此，您需要对新添加的元素调用 $.validator.unobtrusive.parse。您应该将此代码放入 AJAX 成功处理程序中，该处理程序将部分注入(inject)到您的 DOM 中。”

框架在页面加载时调用此方法一次，我的场景中的问题是表单本身是一个 jquery 对话框，因此即使初始加载也是“动态”的。我必须在对话框加载时使用不显眼的框架注册表单元素:

$.validator.unobtrusive.parse('#registerForm');  

如果它没有在服务器端验证，我的 ajax 调用也会返回并替换表单:

registerDialog.empty().html(result.viewResult);

所以我还必须在成功回调上调用 parse() 以确保在 ajax 提交后验证继续工作。