前端基于easyui的mvc扩展

背景

　　由于MVC的前端是基于jquery.validate和jquery.validate.unobtrusive来实现的，但是当我们要使用其他的ui组件且组件本身就带有完整的验证功能的话，那么要让它们配合起来是有些麻烦的，比如：easyui。

介绍

　　MVC主要提供了一下几个验证特性来支撑前端的验证：　　

• CustomValidationAttribute：指定一个用于验证目标成员的验证类型和验证方法。
• DataTypeAttribute：指定要与数据字段关联的附加类型的名称。
• RangeAttribute：用于验证数值字段的值是否在指定的范围之内。
• RegularExpressionAttribute：用于验证字符串字段的格式是否与指定的正则表达式相匹配。
• RequiredAttribute：用于验证必需数据字段。
• StringLengthAttribute：用于验证目标字段的字符串长度是否在指定的范围之内。
• CompareAttribute：用于验证目标字段的值是否与另一个字段值一致，在用户注册场景中可以用于确认两次输入密码的一致性。
• RemoteAttribute：提供使用 jQuery 验证插件远程验证程序的特性。

　　以上大部分来自System.ComponentModel.DataAnnotations.dll，最后2个是来自System.Web.Mvc.dll

　　而easyui则是基于validatebox可自定义验证规则以及派生出datebox、numberbox、combobox等控件，来实现form表单输入控件的一套完成的验证体系(详情可参考：www.jeasyui.com)，easyui的验证代码如下：

<input class="easyui-validatebox validatebox-text" name="Name" required="true" missingmessage="用户名不能为空!" validtype="regular['^\\w+$', '用户名格式不正确!']" value="admin" type="text">

实现

　　了解了以上的2方提供的验证支持，那么我们就可以将mvc提供的验证解析为支持easyui验证的前端html代码了，根据以上的资料我们可以发现以下几个可直接转换的规则，实现代码大致如下：

var attribute = validationAttrs.FirstOrDefault(attr => attr is RequiredAttribute);
if (attribute != null)
{
    tag.AddAttribute("required", "true");
    tag.AddAttribute("missingMessage", attribute.ErrorMessage);
}

attribute = validationAttrs.FirstOrDefault(attr => !(attr is RequiredAttribute));
if (attribute == null)
    return;

if (attribute is StringLengthAttribute)
{
    var stringLengthAttr = attribute as StringLengthAttribute;
    tag.AddAttribute("invalidMessage", stringLengthAttr.ErrorMessage);
    tag.AddAttribute("validType", "length[{0}, {1}]", stringLengthAttr.MinimumLength, stringLengthAttr.MaximumLength);
}
else if (attribute is RegularExpressionAttribute)
{
    var regularAttr = attribute as RegularExpressionAttribute;
    tag.AddAttribute("validType", "regular['{0}', '{1}']", regularAttr.Pattern.Replace("\\", "\\\\"), regularAttr.ErrorMessage);
}
else if (attribute is RangeAttribute)
{
    var rangeAttr = attribute as RangeAttribute;
    tag.AddAttribute("validType", "range[{0}, {1}, '{2}']", rangeAttr.Minimum, rangeAttr.Maximum, rangeAttr.ErrorMessage);
}
else if (attribute is CompareAttribute)
{
    var compareAttr = attribute as CompareAttribute;
    tag.AddAttribute("validType", "eq['[name={0}]', '{1}']", compareAttr.OtherProperty, compareAttr.ErrorMessage);
}

　　以上代码中把RequiredAttribute和其他的验证规则区分开来是因为RequiredAttribute会生成独立的required="true"，而其他的验证规则都是公用validType属性的，至于js验证规则内的regular、range、eq的验证规则并不是easyui内部提供的，而是额外进行扩展的，js代码如下：

$.extend($.fn.validatebox.defaults.rules, {
    eq: {
        validator: function (value, param) {
            this.message = param[1];
            return value == $(param[0]).val();
        }
    },
    range: {
        validator: function (value, param) {
            this.message = param[2];
            return value >= param[0] && value <= param[1];
        }
    },
    regular: {
        validator: function (value, param) {
            this.message = param[1];
            var reg = new RegExp(param[0]);
            return reg.test(value);
        }
    }
});

　有了以上这些生成规则以后，我们就可以通过扩展HtmlHelper<TModel>来实现类似@Html.EditorFor(model => model.Name)这样的调用了，大致代码如下(这里以validatebox为例)：

public static MvcHtmlString ValidateText(this HtmlHelper htmlHelper, Expression<Func<TModel, object>> expression)
{
    ModelMetadata modelMetadatum = ModelMetadata.FromLambdaExpression(expression, htmlHelper.ViewData);
    PropertyInfo property = typeof(TModel).GetProperty(modelMetadatum.PropertyName);

    TagBuilder tag = new TagBuilder("input");
    ValidationAttribute[] validationAttrs;
    if (property.TryGetAttributes(out validationAttrs))
    {
        //请阅读转换规则代码
    }
    return MvcHtmlString.Create(tag.ToString());
}

　有了以上基础代码之后，我们就可以使用@Html.ValidateText(m => m.Name)来创建基于easyui的验证控件了。

效果

//类：
public class AccountView
{
    private string m_Name = null;
    [Required(ErrorMessage = "用户名不能为空!")]
    [RegularExpression(@"^\w+$", ErrorMessage = "用户名格式不正确!")]
    [DisplayName("用户名：")]
    public string Name
    {
        get { return m_Name; }
        set { m_Name = value; }
    }
}

//页面：
@Html.LabelFor(m => m.Name)
@Html.ValidateText(m => m.Name)//生成的内容为顶部easyui html示例代码

　　正确：

　　

　　必填提示：

　　

　　验证失败：

　　

结尾

　　以上便是今天所有内容了，后面还有其他的扩展功能，敬请期待，谢谢各位!