如何解决jQuery Validation针对动态添加的表单无法工作的问题？

发布时间：2020-12-16 09:08:18 所属栏目：asp.Net 来源：网络整理

导读：为了充分利用ASP.NET MVC在服务端呈现HTML的能力，在《利用动态注入HTML的方式来设计复杂页面》一文中介绍了，通过Ajax调用获取HTML来呈现复杂页面中某一部分界面的解决方案。我们知道ASP.NET MVC默认集成了jQuery Validation，但是对于通过JavaScript动态添

为了充分利用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

   3:     [Required]

   5:     [Required]

   7:     [Required]

   9:     [Required]

  11:     string EmailAddress { get; set; }

  13:     [DataType(DataType.PhoneNumber)]

  15: }

  17: class HomeController : Controller

  19:     private static List<Contact> contacts = new List<Contact>

  21:         new Contact{Id = "001",FirstName = "San",LastName = "Zhang",EmailAddress = "zhangsan@gmail.com",PhoneNo="123"},

  23:     };

  25:     public ActionResult Index()

  27:         return View();

  29:?

  31:     public ActionResult Update(string id)

  33:         return View(contacts.First(c => c.Id == id));

  35:?

  37:     public ActionResult Update(Contact contact)

  39:         //省略操作

  41: }

如下所示的是Action方法Update对应的View（Update.cshtml）的定义，这是一个Model类型为Contact的强类型View，指定的联系人信息以编辑状态呈现在一个表单中：

   2: @{

   4: }

   6: {

   8:     <input type="submit" value="Save" />

   1: <html>

   3:         <title>修改联系人信息</title>

   5:     <body>

   7:         <script type="text/javascript" src="@Url.Content("~/Assets/js/jquery-1.7.1.min.js")"></script>

   9:         <script type="@Url.Content("~/Assets/js/jquery.validate.unobtrusive.min.js  10:          <script type="text/javascript">

  12:                  $("body #updateContact").load("home/update/001");

  14:              })

  16:     </body>

   1: $(function () {

   3:         $("form").removeData("validator").removeData("unobtrusiveValidation");

   5:     });