Asp.net Mvc自定义客户端验证(CheckBox列表的验证)

最近在使用MVC进行开发时，使用进行客户端的输入验证，加上使用MVC3的新视图引擎感觉还是挺方便的，不用自己去写很多js了，并且效果也能让人接受

可是遇上要向外输出比如一个CheckBox列表时就纠结了，验证代码还得自己去写，这样就造成了客户端采用了两套验证，感觉不统一也不优雅，于是就琢磨了一下，便有了如下实现方式。

HtmlHelper的扩展类主要包括CheckBoxList,CheckBoxListFor等方法,有了这些方法，你可以这样生成checkBox 列表

@Html.CheckBoxListFor(m=>m.RoleList,"li")

 下来就是扩展的全部代码 

using System;

using System.Collections.Generic;

using System.Linq.Expressions;

using System.Text;

using System.Web.Mvc;



namespace Newborn.BSCommon

{

    /// <summary>

    /// HtmlHelper扩展

    /// </summary>

    public static class HtmlHelperExtention

    {

        public static MvcHtmlString InputList(this HtmlHelper helper, IEnumerable<SelectListItem> selectList, string checkBoxName, string splitTagName, InputType inputType)

        {

            return InputList(helper, null, selectList, checkBoxName,splitTagName, inputType);

        }



        /// <summary>

        /// 生成CheckBox列表

        /// </summary>

        /// <param name="helper">HtmlHelper</param>

        /// <param name="checkBoxName">name属性</param>

        /// <param name="splitTagName">每个SelectList外层</param>

        /// <param name="inputType">inputType</param>

        /// <param name="selectList">selectList</param>

        /// <param name="metadata">metadata</param>

        /// <returns>MvcHtmlString</returns>

        public static MvcHtmlString InputList(this HtmlHelper helper,ModelMetadata metadata, IEnumerable<SelectListItem> selectList, string checkBoxName, string splitTagName, InputType inputType)

        {

            if (helper == null) throw new ArgumentNullException("helper");

            if (selectList == null) throw new ArgumentNullException("selectList");

            if (string.IsNullOrEmpty(checkBoxName)) throw new ArgumentNullException("checkBoxName");

            

            StringBuilder sb = new StringBuilder();

            int idIndex = 0;

            TagBuilder tagBuilder = new TagBuilder("span");

            foreach (SelectListItem item in selectList)

            {

                TagBuilder splitTagBuilder = null;

                if (!string.IsNullOrEmpty(splitTagName))

                    splitTagBuilder = new TagBuilder(splitTagName);

                TagBuilder checkTagBuilder = new TagBuilder("input");

                checkTagBuilder.Attributes["type"] = inputType.ToString();

                checkTagBuilder.Attributes["name"] = checkBoxName;

                checkTagBuilder.Attributes["value"] = item.Value;



                string checkBoxId = checkBoxName + "_id_" + idIndex;

                checkTagBuilder.Attributes["id"] = checkBoxId;

                if (item.Selected)

                    checkTagBuilder.Attributes["checked"] = "checked";

                TagBuilder labelTagBuilder = new TagBuilder("label") { InnerHtml = helper.Encode(item.Text) };



                labelTagBuilder.Attributes["for"] = checkBoxId;

                string checkHtml = checkTagBuilder.ToString() + labelTagBuilder.ToString();

                if (splitTagBuilder != null)

                {

                    splitTagBuilder.InnerHtml += checkHtml;

                    sb.AppendLine(splitTagBuilder.ToString());

                }

                else

                    sb.AppendLine(checkHtml);



                idIndex++;

            }

            

            TagBuilder hiddenTagBuilder = new TagBuilder("input");

            hiddenTagBuilder.Attributes["type"] = "hidden";

            hiddenTagBuilder.MergeAttribute("name", checkBoxName);

            hiddenTagBuilder.MergeAttribute("id", "hidden"+ checkBoxName);

            hiddenTagBuilder.MergeAttributes<string, object>(helper.GetUnobtrusiveValidationAttributes(checkBoxName, metadata));

            tagBuilder.InnerHtml = hiddenTagBuilder + sb.ToString();

            return MvcHtmlString.Create(tagBuilder.ToString());

        }

        /// <summary>

        /// 生成CheckBox列表

        /// </summary>

        /// <param name="helper">HtmlHelper</param>

        /// <param name="selectList"></param>

        /// <param name="checkBoxName">name属性</param>

        /// <returns>MvcHtmlString</returns>

        public static MvcHtmlString CheckBoxList(this HtmlHelper helper, IEnumerable<SelectListItem> selectList, string checkBoxName)

        {

            return helper.InputList(selectList, checkBoxName, null, InputType.CheckBox);

        }



        public static MvcHtmlString InputListFor<TModel, TProperty>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TProperty>> expression,string splitTag,InputType inputType)

        {

            ModelMetadata modelMetadata = ModelMetadata.FromLambdaExpression<TModel, TProperty>(expression, htmlHelper.ViewData);

            List<SelectListItem> list = ((List<SelectListItem>)modelMetadata.Model);

            return htmlHelper.InputList(modelMetadata, list, modelMetadata.PropertyName, splitTag, inputType);

        }

        public static MvcHtmlString CheckBoxListFor<TModel, TProperty>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TProperty>> expression)

        {

            return htmlHelper.InputListFor(expression, "span",InputType.CheckBox);

        }

        public static MvcHtmlString CheckBoxListFor<TModel, TProperty>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TProperty>> expression,string splitTag)

        {

            return htmlHelper.InputListFor(expression, splitTag, InputType.CheckBox);

        }



        /// <summary>

        ///  生成CheckBox列表

        /// </summary>

        /// <param name="helper"></param>

        /// <param name="selectList"></param>

        /// <param name="checkBoxName"></param>

        /// <param name="splitTagName">每项分隔符的Tag名称</param>

        /// <returns></returns>

        public static MvcHtmlString CheckBoxList(this HtmlHelper helper, IEnumerable<SelectListItem> selectList, string checkBoxName, string splitTagName)

        {

            return InputList(helper, selectList, checkBoxName, splitTagName, InputType.CheckBox);

        }







        public static MvcHtmlString RadioBoxListFor<TModel, TProperty>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TProperty>> expression)

        {

            return htmlHelper.InputListFor(expression, "span", InputType.Radio);

        }



        



        /// <summary>

        /// 生成RadioButton列表

        /// </summary>

        /// <param name="helper"></param>

        /// <param name="selectList"></param>

        /// <param name="checkBoxName"></param>

        /// <param name="splitTag"></param>

        /// <returns></returns>

        public static MvcHtmlString RadioButtonList(this HtmlHelper helper, IEnumerable<SelectListItem> selectList, string checkBoxName, string splitTag)

        {

            return InputList(helper, selectList, checkBoxName, splitTag, InputType.Radio);

        }



        /// <summary>

        /// 生成RadioButton列表

        /// </summary>

        /// <param name="helper"></param>

        /// <param name="selectList"></param>

        /// <param name="checkBoxName"></param>

        /// <returns></returns>

        public static MvcHtmlString RadioButtonList(this HtmlHelper helper, IEnumerable<SelectListItem> selectList, string checkBoxName)

        {

            return InputList(helper, selectList, checkBoxName, null, InputType.Radio);

        }

    }

}

 由于使用到客户端验证所以要引用如下的js文件。

脚本部分

<script src="@Url.Content("~/Scripts/jquery-1.4.4.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/Custom/jquery.validate.unobtrusive.extension.js")" type="text/javascript"></script>

<script type="text/javascript">

      $(function () {

           new checkBoxList("RoleList", "hiddenRoleList");//初始验证

      });

</script>

页面上还要写这个一句

 $(function () {
           new checkBoxList("RoleList", "hiddenRoleList");//初始验证

      }); 

 是为了让脚本去绑定事件，可能还会有更好的方式，这里有待研究。

页面上代码如下： 

HTML部分

<div class="select">     

    @Html.CheckBoxListFor(m=>m.RoleList,"li")

    @Html.ValidationMessageFor(m => m.RoleList)

</div>

ListSlectRangeAttribute.cs 文件

using System;

using System.Collections.Generic;

using System.ComponentModel.DataAnnotations;

using System.Web.Mvc;



namespace Newborn.BSCommon

{

    [AttributeUsage(AttributeTargets.Property | AttributeTargets.Field | AttributeTargets.Parameter, AllowMultiple = false)]

    public class ListSlectRangeAttribute : ValidationAttribute, IClientValidatable

    {

        private const string errFormat = "该项最少选择项为{0}最多选择项为{1}";



        public ListSlectRangeAttribute()

        {

            MinSelected = 0;

            MaxSelected = -1;

        }



        public int MinSelected { get; set; }



        public int MaxSelected { get; set; }



        public override bool IsValid(object value)

        {

            return true;

        }





        public override string FormatErrorMessage(string name)

        {

            return string.Format(errFormat, MinSelected > 0 ? MinSelected.ToString() : "不限", MaxSelected > 0 ? MaxSelected.ToString() : "不限");

        }





        public IEnumerable<ModelClientValidationRule> GetClientValidationRules(ModelMetadata metadata, ControllerContext context)

        {

            ModelClientValidationRule rule = new ModelClientValidationRule

            {

                ValidationType = "list",

                ErrorMessage = FormatErrorMessage(metadata.GetDisplayName())

            };

            rule.ValidationParameters["min"] = MinSelected;

            rule.ValidationParameters["max"] = MaxSelected;



            yield return rule;

        }

    }

}

jquery.validate.unobtrusive.extension.js文件主要完成客户端如checkbox列表的验证,细心的朋友会发现因为checkbox列表是多个input所以我没有基于它来做，而是采用一个隐藏域还记录现在选择的项数目（目前只记录选择了多少项，没记录选择的项值之类的，不过目前暂无此类需求，如果有扩展起来也行方便）。

//by xianhong

//添加验证如验证框必须选择一定数量的验证

$.validator.addMethod("maxminselected", function (value, element, param) {

    var min = param[0];

    var max = param[1];

    if (value >= min && (max <= 0 || value <= max))

        return true;

    return false;

});

$.validator.unobtrusive.adapters.addMinMax("list", "min", "max", "maxminselected");





var checkBoxList = function (name/*input name属性*/, hiddenId/*记录选择的隐藏域*/) {

    this.checkedCount = function () {

        var selected = $("input[name='" + name + "']:checked");

        return selected.length;

    };

    this.All = function () {

        return $("input[name='" + name + "']");

    };

    this.BindClick = function () {

        var thisobj = this;

        this.All().click(function () {

            $("#" + hiddenId).val(thisobj.checkedCount());

        });

    };

    this.BindClick();

};