[转载]前端基于easyui的mvc扩展 - ahl5esoft - 博客园

背景

　　由于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的验证代码如下：

<inputclass="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 isRequiredAttribute);if(attribute !=null){
    tag.AddAttribute("required","true");
    tag.AddAttribute("missingMessage", attribute.ErrorMessage);}

attribute = validationAttrs.FirstOrDefault(attr =>!(attr isRequiredAttribute));if(attribute ==null)return;if(attribute isStringLengthAttribute){var stringLengthAttr = attribute asStringLengthAttribute;
    tag.AddAttribute("invalidMessage", stringLengthAttr.ErrorMessage);
    tag.AddAttribute("validType","length[{0}, {1}]", stringLengthAttr.MinimumLength, stringLengthAttr.MaximumLength);}elseif(attribute isRegularExpressionAttribute){var regularAttr = attribute asRegularExpressionAttribute;
    tag.AddAttribute("validType","regular['{0}', '{1}']", regularAttr.Pattern.Replace("\\","\\\\"), regularAttr.ErrorMessage);}elseif(attribute isRangeAttribute){var rangeAttr = attribute asRangeAttribute;
    tag.AddAttribute("validType","range[{0}, {1}, '{2}']", rangeAttr.Minimum, rangeAttr.Maximum, rangeAttr.ErrorMessage);}elseif(attribute isCompareAttribute){var compareAttr = attribute asCompareAttribute;
    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 =newRegExp(param[0]);return reg.test(value);}}});

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

publicstaticMvcHtmlStringValidateText(thisHtmlHelper htmlHelper,Expression<Func<TModel,object>> expression){ModelMetadata modelMetadatum =ModelMetadata.FromLambdaExpression(expression, htmlHelper.ViewData);PropertyInfo property =typeof(TModel).GetProperty(modelMetadatum.PropertyName);TagBuilder tag =newTagBuilder("input");ValidationAttribute[] validationAttrs;if(property.TryGetAttributes(out validationAttrs)){//请阅读转换规则代码}returnMvcHtmlString.Create(tag.ToString());}

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

效果

//类：publicclassAccountView{privatestring m_Name =null;[Required(ErrorMessage="用户名不能为空!")][RegularExpression(@"^\w+$",ErrorMessage="用户名格式不正确!")][DisplayName("用户名：")]publicstringName{get{return m_Name;}set{ m_Name = value;}}}//页面：@Html.LabelFor(m => m.Name)@Html.ValidateText(m => m.Name)//生成的内容为顶部easyui html示例代码

　　正确：

　　

　　必填提示：

　　

　　验证失败：

　　

结尾

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