ASP.NET MVC中对Model进行分步验证的解决方法

浏览数：16 / 时间：2015年06月09日

在我之前的文章:ASP.NET MVC2.0结合WF4.0实现用户多步注册流程中将一个用户的注册分成了四步，而这四个步骤都是在完善一个Model的信息，但是又分页面填写信息的，当时我加上ModelState.IsValid这句验证代码的时候，根本没法通过验证，因为在注册的前面三步，注册用户的Model信息都没填写完整，而ModelState.IsValid是对一个实体的所有属性进行判断验证的。当时很纠结，因为刚接触Asp.net MVC，故没有找到解决方案。这篇文章将给出解决的办法。看下面需要验证的Model的代码如下：

代码

    public class UserViewModel
    {
        [DisplayName("step")]
        [Required(ErrorMessage = "You must select a step .")]
        public int Step { get; set; }
        //个人信息
        [Required(ErrorMessage = "姓名不能为空")]
        [StringLength(20, ErrorMessage = "姓名长度不能超过20个字符")]
        public string Name { get; set; }

        [RegularExpression(@"120|((1[0-1]|\d)?\d)", ErrorMessage = "年龄格式不对")]
        public int? Age { get; set; }

        //职位信息
        [Required(ErrorMessage = "职位不能为空")]
        public string Post { get; set; }
        public int? Salary { get; set; }

        //学历信息
        [Required(ErrorMessage = "毕业院校不能为空")]
        public string University { get; set; }
        public int? GraduationYear { get; set; }

        //联系信息
        [Required(ErrorMessage = "邮件不能为空")]
        [RegularExpression(@"^[a-z][a-z|0-9|]*([_][a-z|0-9]+)*([.][a-z|" + @"0-9]+([_][a-z|0-9]+)*)?@[a-z][a-z|0-9|]*\.([a-z]" + @"[a-z|0-9]*(\.[a-z][a-z|0-9]*)?)$", ErrorMessage= "邮件格式不正确")]
        public string Email { get; set; }
        public int? Mobile { get; set; }

        public IEnumerable<SelectListItem> StepList { get; set; }

        public UserViewModel()
        {
            var list = new List<SelectListItem>() {
                new SelectListItem { Text = "(Select)" },
                new SelectListItem { Value = "1", Text = "Step1" },
                new SelectListItem { Value = "2", Text = "Step2" },
                new SelectListItem { Value = "3", Text = "Step3" },
                new SelectListItem { Value = "4", Text = "Step4" }
            };
            this.StepList = new SelectList(list, "Value", "Text");
        }


    }

实现：

这篇文章这种情况服务端和客户端的验证都会讲到。为了简化起见，这里我除去的WF的流程功能，直接用下拉框表示，当下拉框选择step1表示填写第一步注册的信息，当下拉框选择step2表示填写第二步注册的信息，当下拉框选择step3表示填写第三步注册的信息，当下拉框选择step4表示填写第四步注册的信息。写得很啰嗦，但是这个很容易实现，我使用Jquery来显示和隐藏下拉框对应的Step。Jquery代码如下：

代码

    <script type="text/javascript">
        $(function () {
            $.fn.enable = function () {
                return this.show().removeAttr("disabled");
            }

            $.fn.disable = function () {
                return this.hide().attr("disabled", "disabled");
            }
            var dllStep = $("#Step");
            var step1 = $("#Step1,#Step1 input");
            var step2 = $("#Step2,#Step2 input");
            var step3 = $("#Step3,#Step3 input");
            var step4 = $("#Step4,#Step4 input");
            setControls();

            dllStep.change(function () {
                setControls();
            });

            function setControls() {
                switch (dllStep.val()) {
                    case "1": 
                        step1.enable();
                        step2.disable();
                        step3.disable();
                        step4.disable();
                        break;
                    case "2": 
                        step1.disable();
                        step2.enable();
                        step3.disable();
                        step4.disable();
                        break;
                    case "3":
                        step1.disable();
                        step2.disable();
                        step3.enable();
                        step4.disable();
                        break;
                    case "4": 
                        step1.disable();
                        step2.disable();
                        step3.disable();
                        step4.enable();
                        break;
                    case "": 
                        step1.disable();
                        step2.disable();
                        step3.disable();
                        step4.disable();
                        break;
                }
            }
        });
    </script>

如下图：

第一步：填写姓名和年龄。

第二步：填写职位和薪水

第三步填写：毕业院校和毕业时间

第四步填写：邮箱和电话

为了实现这样的验证，我们可以将验证的错误信息中移除不在当前步骤填写的字段的错误信息，写一个类InputValidationModelBinder继承DefaultModelBinder并重载OnModelUpdated方法，将不必要的错误信息清除，代码如下：

    public class InputValidationModelBinder : DefaultModelBinder
    {
        protected override void OnModelUpdated(ControllerContext controllerContext, ModelBindingContext bindingContext)
        {
            var modelState = controllerContext.Controller.ViewData.ModelState;
            var valueProvider = controllerContext.Controller.ValueProvider;

            var keysWithNoIncomingValue = modelState.Keys.Where(x => !valueProvider.ContainsPrefix(x));
            foreach (var key in keysWithNoIncomingValue)
                modelState[key].Errors.Clear();
        }
    }

上面是服务端的代码，对于客户端，我们都知道asp.net MVC客户端验证时通过MicrosoftMvcValidation.js去实现的。看下面代码。

 1     validate: function Sys_Mvc_FormContext$validate(eventName) {
 2         var fields = this.fields;
 3         var errors = [];
 4         for (var i = 0; i < fields.length; i++) {
 5             var field = fields[i];
 6             if (!field.elements[0].disabled) {
 7                 var thisErrors = field.validate(eventName);
 8                 if (thisErrors) {
 9                     Array.addRange(errors, thisErrors);
10                 }
11             }
12         }
13         if (this.replaceValidationSummary) {
14             this.clearErrors();
15             this.addErrors(errors);
16         }
17         return errors;
18     }
19 }