ASP.NET MVC实战:实现WF4注册Model验证-技术开发专区

ASP.NET MVC实战:实现WF4注册Model验证

作者：朱祁林编辑：胡铭娅 2010-09-28 08:11 来源：朱祁林的博客

【IT168 技术文档】这篇文章结合Asp.net MVC和WF4.0实现一个简单的用户多步注册。用户注册分了四步骤。流程图如下

　　第一步:填写个人信息:

　　第二步:填写职位信息:

　　第三步:填写学历信息:

　　第四步:填写联系信息:

　　第五步骤：完成

　　WF4.0状态机如下图:

　　每一步点击Next跳到下一步，点击Back回到上一步。

　　实现：

　　第一步：新建一个ASP.NET MVC Application和一个Workflow的ActivityDesignerLibrary项目，在mvc项目的Model文件夹下添加一个User。代码如下：

public class User
{   //个人信息
    [Required(ErrorMessage = "姓名不能为空")]
    [StringLength(20, ErrorMessage = "姓名长度不能超过20个字符")]
     public string Name { get; set; }
     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; }
}

　　第二步：在Controllers中添加一个控制类，代码如下：

public class UserController : Controller
     {
     //
     // GET: /User/
     #region Declarations
     static WorkflowUtil wrkFlw = null;
     string page="Step1";
     public User userObj;
     #endregion
     #region Process action method
     public ActionResult Process(string nextButton, string backButton)
     {
     if (wrkFlw == null )
     {
     wrkFlw = new WorkflowUtil();
     }
     if ((nextButton != null))
     {
     page = wrkFlw.RunWorkflow("Next");
     return View(page, userObj);
     }
     else if (backButton != null)
     {
     ModelState.Clear();
     page = wrkFlw.RunWorkflow("Prev");
     return View(page, userObj);
     }
     else
     return View(page, userObj);
     }
     #endregion
     #region Events
     protected override void OnActionExecuting(ActionExecutingContext filterContext)
     {
     userObj = (User)TempData["User"];
     if (userObj == null) userObj = new User();
     TryUpdateModel(userObj);
     if (TempData["CurrentPage"] != null) page = TempData["CurrentPage"].ToString();
     }
     protected override void OnResultExecuted(ResultExecutedContext filterContext)
     {
     TempData["User"] = userObj;
     TempData["CurrentPage"] = page;
     }
     #endregion
     public ActionResult Index()
     {
     return View();
     }
     }

　　第三步：在方法Process上选择添加视图，如下图选择：

　　如此共生成五个view页面：step1.step2，step3，step4，step5，Final。

　　第四步：设计状态机工作流。这里只演示step1的设置，如下图：

　　将一个用户的注册分成了四步，而这四个步骤都是在完善一个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代码如下：

　　如下图：

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

　　第二步：填写职位和薪水

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

　　第四步填写：邮箱和电话

　　为了实现这样的验证，我们可以将验证的错误信息中移除不在当前步骤填写的字段的错误信息，写一个类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去实现的。

　　看下面代码。

validate: function Sys_Mvc_FormContext$validate(eventName) {
         var fields = this.fields;
         var errors = [];
         for (var i = 0; i < fields.length; i++) {
             var field = fields[i];
             if (!field.elements[0].disabled) {
                 var thisErrors = field.validate(eventName);
                 if (thisErrors) {
                     Array.addRange(errors, thisErrors);
                 }
             }
         }
         if (this.replaceValidationSummary) {
             this.clearErrors();
             this.addErrors(errors);
         }
         return errors;
     }
}

　　在第6行代码加入了一句判断：当页面的元素没有被disabled的时候才去验证。

　　好了这样就实现了一次只对Model中的几个属性字段进行验证。

　　运行：

　　asp.net mvc的验证机制只对model中当前页面的属性进行验证：

　　填写正确通过验证：

关注我们