在MVC4中针对ViewModel执行客户端验证

时间:2013-03-28 21:49:45

标签: c# asp.net-mvc validation asp.net-mvc-4 client-side-validation

我想知道对于放置在ViewModel字段上的属性,处理客户端,javascript或jQuery驱动的MVC4字段验证的最佳方法是什么。

首先,让我们选择一个例子。管理员的登录创建屏幕显示应用程序第一次启动时(不是说网站所有者“第一次使用admin / admin登录”)。

视图模型:

public class AdministratorViewModel : AbstractViewModel
{
    [Required]
    [Display(ResourceType = typeof(ManageAdminsViewModelResources), Name = "lblUsername")]
    public string Username { get; set; }

    [Required]
    [Display(ResourceType = typeof(ManageAdminsViewModelResources), Name = "lblEmailAddress")]
    [EmailAddress]
    public string EmailAddress { get; set; }

    [Required]
    [Display(ResourceType = typeof(ManageAdminsViewModelResources), Name = "lblPassword")]
    [AdminPassword]
    public string Password { get; set; }

    [Required]
    [Display(ResourceType = typeof(ManageAdminsViewModelResources), Name = "lblPasswordConfirm")]
    [Compare("Password")]
    public string PasswordConfirm { get; set; }

    [Display(ResourceType = typeof(ManageAdminsViewModelResources), Name = "lblLastLogin")]
    public DateTime? LastLogin { get; set; }

    [Display(ResourceType = typeof(ManageAdminsViewModelResources), Name = "lblPasswordExpiry")]
    public DateTime? PasswordExpiry { get; set; }

    [Display(ResourceType = typeof(ManageAdminsViewModelResources), Name = "lblBlocked")]
    public bool Blocked { get; set; }
}

部分视图(创建第一个管理员时只需要几个字段)

@using (Html.BeginForm())
{
    @Html.ValidationSummary(false)
    @Html.AntiForgeryToken()

    <fieldset>
        <legend>@ManageAdminsViewResources.legendCreateAdmin</legend>

        <div class="desktoptile">
            @Html.LabelFor(m=>m.Username)
            @Html.EditorFor(m => m.Username)
            @Html.ValidationMessageFor(m => m.Username)
        </div>

        <div class="desktoptile">
            @Html.LabelFor(m=>m.Password)
            @Html.PasswordFor(m => m.Password)
            @Html.ValidationMessageFor(m => m.Password)
        </div>

        <div class="desktoptile">
            @Html.LabelFor(m=>m.PasswordConfirm)
            @Html.PasswordFor(m => m.PasswordConfirm)
            @Html.ValidationMessageFor(m => m.PasswordConfirm)
        </div>

        <div class="desktoptile">
            @Html.LabelFor(m=>m.EmailAddress)
            @Html.EditorFor(m => m.EmailAddress)
            @Html.ValidationMessageFor(m => m.EmailAddress)
        </div>

        <input type="submit" value="@ManageAdminsViewResources.btnCreate"/>
    </fieldset>
}

控制器

    [AllowAnonymous]
    [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult CreateFirst(AdministratorViewModel viewModel)
    {
        if (!ModelState.IsValid) return View(viewModel);
        [...................]

目前

如果我在表单中输入了无效的电子邮件地址,空密码等,并且点击提交我正确通知错误。好的,我们继续吧

我想要什么

由于我正在做一个Metro时尚的设计,我希望每次用户取消对该字段的文本框验证时都会发生。

编写硬编码的jQuery片段不是最佳选择。我想要一种数据驱动的方法,可能嵌入在我正在学习的MVC4中。

因此,给定一个具有标准自定义属性的ViewModel(无论如何,需要一点Javascript,请考虑检查密码复杂性的Org.Zighinetto.AdminPasswordAttribute),如何强制执行客户端验证最不显眼的方式,而不在每个html标记上指定客户端标记并编写尽可能少的代码?

我必须取消隐藏ASP.NET MVC 4验证中的任何秘密吗?

2 个答案:

答案 0 :(得分:2)

好吧,你 使用jQuery调用jQuery验证(因为它是用jQuery编写的):)

您可以为输入添加全局事件,然后在模糊元素上调用它。类似的东西:

$("input").blur(function () {
    $(this).valid();
});

答案 1 :(得分:2)

从我的(学习)角度来看,正确的答案应该是:

说明:

当jQuery Unobtrustive Validator加载到页面中时,MVC4会自动验证公共属性,否则只执行服务器端验证。

大多数(如果不是全部)MVC4 ValidationAttribute实施IClientValidation。此接口在服务器端代码中包装jQuery Validator验证函数。很难解释它是如何工作的,但是说这个接口返回客户端函数的名称(由jQuery分发提供或由用户实现),而基本上错误至少给出了这个想法对于试图理解验证如何工作的新手用户。

答案:

继续使用数据驱动的模型/视图模型注释。 检查是否在页面中加载了NuGet包jQuery Unobtrusive Validation,然后根据需要实现IClientValidation(我找到了关于多个错误的教程here),字段会自动验证。