自定义注释Asp.Net MVC 4的客户端验证

Question

我指的是这篇文章:

http://haacked.com/archive/2009/11/19/aspnetmvc2-custom-validation.aspx

它展示了如何在Asp.Net MVC 2中创建自定义注释.但是,客户端验证脚本,尤其是"MicrosoftMvcJQueryValidation"在Asp.Net MVC4中不可用.我在一篇文章中看到它是Asp.Net Futures项目的一部分.我想使用Jquery连接我的客户端验证.在我的项目模板脚本的文​​件夹中,我看到名为的脚本:

jquery.validate.min.js
jquery.validate.unobtrusive.min.js
jquery.unobtrusive-ajax.min.js

有什么办法可以利用这些现有的脚本吗？还是我必须强制下载期货项目？

Answer 1

该文特定于使用MicrosoftAjax的MVC 2.MVC 4不再包含MS Ajax文件,因为它们已被弃用,首选方法是使用jquery.

要验证您的设置,请确保这些脚本位于您的布局中

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>

这两个设置存在于web.config文件的appSettings部分中

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

因此,当您向ViewModel添加数据注释时,您将获得客户端和服务器端验证

public class MyModel 
{
    [Required]
    [StringLength(30)]
    public string FirstName { get; set; }

    [Required]
    [StringLength(30)]
    public string LastName { get; set; }
}

在您的视图中,请确保您拥有这样的代码

<div>
    @Html.LabelFor(model => model.FirstName)
</div>
<div>
    @Html.TextBoxFor(model => model.FirstName) <br/>
    @Html.ValidationMessageFor(model => model.FirstName)
</div>

<div>
    @Html.LabelFor(model => model.LastName)
</div>
<div>
    @Html.TextBoxFor(model => model.LastName) <br/>
    @Html.ValidationMessageFor(model => model.LastName)
</div>

更新

这是我称为RateRequiredIfCustomIndexRate的自定义验证器的示例这是它的javascript端,以便它被添加到jquery验证

$("document").ready(function () {

    var isCustomRateRequired = document.getElementById("IsCustomRateRequired");

    isCustomRateRequired.onchange = function () {
        if (this.checked) {
            $('#Rate').attr('disabled', 'disabled');
            $('#Rate').val('');
        }
        else {
            $('#Rate').removeAttr('disabled');
        }
    };
});

jQuery.validator.addMethod("raterequiredifcustomindexrate", function (value, element, param) {
    var rateRequired = $("#CustomRateRequired").val();
    if (rateRequired && value == "") {
        return false;
    }
    return true;
});

jQuery.validator.unobtrusive.adapters.addBool("raterequiredifcustomindexrate");

Answer 2

这里缺少的关键是服务器端验证器必须实现IClientValidatable接口:

public class RateRequiredIfCustomIndexRateAttribute : ValidationAttribute, IClientValidatable
{
    public override bool IsValid(object value)
    {
        return false;
    }

    public IEnumerable<ModelClientValidationRule> GetClientValidationRules(ModelMetadata metadata, ControllerContext context)
    {
        yield return new ModelClientValidationRule
        {
            ErrorMessage = this.ErrorMessage,
            ValidationType = "raterequiredifcustomindexrate"
        };
    }
}

一旦这样做,客户端验证应该正确连接.您可以通过确保输入字段具有属性"data-val-raterequiredifcustomindexrate"属性来验证这一点.