MVC驗證11-對複雜型別使用jQuery非同步驗證

本篇體驗使用"jQuery結合Html.BeginForm()"對複雜型別屬性進行非同步驗證。與本篇相關的"兄弟篇"包括：

MVC驗證08-jQuery非同步驗證   
MVC驗證09-使用MVC的Ajax.BeginForm方法實現非同步驗證   
MVC驗證10-到底用哪種方式實現客戶端服務端雙重非同步驗證   

 

  準備工作

□ js方面：
1、jquery的某個版本
2、jquery.validate.js
3、jquery.validate.unobtrusive.js

□ Web.config：
  <appSettings>
      ...
    <add key="ClientValidationEnabled" value="true" />
    <add key="UnobtrusiveJavaScriptEnabled" value="true" />
  </appSettings>

□ View Model

    public class User
    {
        [Required]
        [StringLength(8, MinimumLength = 3)]
        [ValidUserName(ErrorMessage = "使用者名稱必須是darren")]
        [Display(Name = "使用者名稱")]
        public string UserName { get; set; }

        [Required]
        [StringLength(8, MinimumLength = 3)]
        [Display(Name = "別名")]
        public string DisplayName { get; set; }
    }

    public class ValidationModel
    {
        public User User { get; set; }
        public List<User>  Users { get; set; }
    }

□ 自定義特性

    public class ValidUserNameAttribute : ValidationAttribute
    {
        public override bool IsValid(object value)
        {
            //同時滿足2個條件返回true
            return (value != null && value.ToString() == "darren");
        }
    }

 

  HomeController無論是否驗證成功都返回部分檢視

using System.Web.Mvc;
using ValidComplex.Models;

namespace ValidComplex.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View(new ValidationModel());
        }

        public ActionResult ValidUser(ValidationModel validationModel)
        {
            return PartialView(!ModelState.IsValid ? "_Form" : "_Success", validationModel);
        }
    }
}

 

  Index.cshtml檢視

注意：
※ 從控制器返回的部分檢視被載入到Index.cshtml檢視中id為FormContainer的div中。$("#FormContainer").html(data);
※ 表單提交不應該這樣寫：$("form").on("submit", function (event)，因為對動態生成內容無效。

@model ValidComplex.Models.ValidationModel

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@DateTime.Now: Index.cshtml檢視被渲染

<div id="FormContainer">
    @Html.Partial("_Form")
</div>

@section scripts
{
    <script type="text/javascript">
        $(function() {
            $('#FormContainer').on("submit", "form",function(event){
            //$("form").on("submit", function (event) {
                event.preventDefault();
                var form = $(this);
                $.ajax({
                    url: form.attr('action'),
                    type: "POST",
                    data: form.serialize(),
                    success: function (data) {
                         $("#FormContainer").html(data);
                         $.validator.unobtrusive.parse("form");
                    },
                    error: function (jqXhr, textStatus, errorThrown) {
                        alert("Error '" + jqXhr.status + "' (textStatus: '" + textStatus + "', errorThrown: '" + errorThrown + "')");
                    },
                });
            });
        });
    </script>
}

 

  _Form.cshtml部分檢視

@model ValidComplex.Models.ValidationModel

@DateTime.Now: Partial/_Form.cshtml檢視被渲染
<hr/>
<style type="text/css">
    p {
        margin: 3px;
    }

    h6 {
        margin: 3px;
    }
</style>

@using (Html.BeginForm("ValidUser", "Home"))
{   
    <h6>輸入使用者資訊</h6>        
    <p>
        @Html.LabelFor(m => m.User.UserName):
        @Html.EditorFor(m => m.User.UserName)
        @Html.ValidationMessageFor(m => m.User.UserName)
    </p>   
    <p>
        @Html.LabelFor(m => m.User.DisplayName):
        @Html.EditorFor(m => m.User.DisplayName)
        @Html.ValidationMessageFor(m => m.User.DisplayName)
    </p>    
    <h6>輸入多個使用者資訊</h6>       
    for (var i = 0; i <= 1; i++)
    {
        <h6>使用者 @i</h6>    
        <p>
            @Html.LabelFor(m => m.Users[i].UserName):
            @Html.EditorFor(m => m.Users[i].UserName)
            @Html.ValidationMessageFor(m => m.Users[i].UserName)
        </p>   
        <p>
            @Html.LabelFor(m => m.Users[i].DisplayName):
            @Html.EditorFor(m => m.Users[i].DisplayName)
            @Html.ValidationMessageFor(m => m.Users[i].DisplayName)
        </p>
    }    
    <input type="submit" value="提交" />
}

 

  _Success.cshtml部分檢視

@model ValidComplex.Models.ValidationModel

<p><strong>驗證通過 :)</strong></p>

<p>
    使用者名稱: '@Model.User.UserName'<br />
    別名: '@Model.User.DisplayName'<br />
    使用者1的使用者名稱: '@Model.Users[0].UserName'<br />
    使用者1的別名: '@Model.Users[0].DisplayName'<br />
    使用者2的使用者名稱: '@Model.Users[1].UserName'<br />
    使用者2的別名: '@Model.Users[1].DisplayName'
</p>

效果：

沒有填寫，提交，報錯：

 

字數長度不符合，UserName不符合，提交，報錯：

 

自定義特性，通過服務端驗證後報錯：

 

填寫正確，提交，通過：

 

  總結

可見，如果要對包含複雜型別屬性(類屬性、集合屬性等)的View Model進行驗證，只需要對簡單類(比如這裡的User)設定各種驗證規則。