為了充分利用ASP.NET MVC在服務端呈現HTML的能力，在《利用動態注入HTML的方式來設計復雜頁面》一文中介紹了，通過Ajax調用獲取HTML來呈現復雜頁面中某一部分界面的解決方案。我們知道ASP.NET MVC默認集成了jQuery Validation，但是對於通過JavaScript動態添加的表單，客戶端驗證默認情況下是失效的。
還是以前文涉及的“聯系人管理”為例，在一個ASP.NET MVC應用中定義了如下兩個類型，Contact封裝聯系人信息，HomeController包含三個Action，除了默認Index外，兩個Update方法用於修改指定的聯系人信息。
1: public class Contact
2: {
3: [Required]
4: public string Id { get; set; }
5: [Required]
6: public string FirstName { get; set; }
7: [Required]
8: public string LastName { get; set; }
9: [Required]
10: [DataType(DataType.EmailAddress)]
11: public string EmailAddress { get; set; }
12: [Required]
13: [DataType(DataType.PhoneNumber)]
14: public string PhoneNo { get; set; }
15: }
16:
17: public class HomeController : Controller
18: {
19: private static List<Contact> contacts = new List<Contact>
20: {
21: new Contact{Id = "001", FirstName = "San", LastName = "Zhang", EmailAddress = "zhangsan@gmail.com", PhoneNo="123"},
22: new Contact{Id = "002", FirstName = "Si", LastName = "Li", EmailAddress = "zhangsan@gmail.com", PhoneNo="456"}
23: };
24:
25: public ActionResult Index()
26: {
27: return View();
28: }
29:
30: [HttpGet]
31: public ActionResult Update(string id)
32: {
33: return View(contacts.First(c => c.Id == id));
34: }
35:
36: [HttpPost]
37: public ActionResult Update(Contact contact)
38: {
39: //省略操作
40: }
41: }
如下所示的是Action方法Update對應的View（Update.cshtml）的定義，這是一個Model類型為Contact的強類型View，指定的聯系人信息以編輯狀態呈現在一個表單中：
1: @model Contact
2: @{
3: Layout = null;
4: }
5: @using (Html.BeginForm())
6: {
7: @Html.EditorForModel()
8: <input type="submit" value="Save" />
9: }
默認Action方法Index對應的View（Index.cshtml）具有如下定義，頁面主體內容是在加載的時候通過Ajax方法訪問Action方法Update獲取的。
1: <html>
2: <head>
3: <title>修改聯系人信息</title>
4: </head>
5: <body>
6: <div id="updateContact"></div>
7: <script type="text/javascript" src="@Url.Content("~/Assets/js/jquery-1.7.1.min.js")"></script>
8: <script type="text/javascript" src="@Url.Content("~/Assets/js/jquery.validate.min.js")"></script>
9: <script type="text/javascript" src="@Url.Content("~/Assets/js/jquery.validate.unobtrusive.min.js")"></script>
10: <script type="text/javascript">
11: $(function () {
12: $("body #updateContact").load("home/update/001");
13: });
14: })
15: </script>
16: </body>
17: </html>
遺憾的是，運行程序后點擊Save按鈕提交表單后，輸入的數據並不會被驗證（客戶端驗證）。為了解決這個問題，可以在動態注入表單之后按照如下的方式調用$.validator.unobtrusive.parse()對表單元素進行重新解析。
1: $(function () {
2: $("body #updateContact").load("home/update/001", null, function () {
3: $("form").removeData("validator").removeData("unobtrusiveValidation");
4: $.validator.unobtrusive.parse($("form"));
5: });
6: })
再次運行程序，客戶端驗證將會生效：
