您的位置：首页 > 其它

解决对于动态添加的表单,校验失效问题

2015-07-22 22:35 513 查看

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

还是以前文涉及的“联系人管理”为例，在一个ASP.NET MVC应用中定义了如下两个类型，Contact封装联系人信息，HomeController包含三个Action，除了默认Index外，两个Update方法用于修改指定的联系人信息。

[code]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: }

[/code]

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

[code] @model Contact
2: @{
3:     Layout = null;
4: }
5: @using (Html.BeginForm())
6: {
7:     @Html.EditorForModel()
8:     <input type="submit" value="Save" />
9: }

[/code]

默认Action方法Index对应的View（Index.cshtml）具有如下定义，页面主体内容是在加载的时候通过Ajax方法访问Action方法Update获取的。

[code]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>

[/code]

遗憾的是，运行程序后点击Save按钮提交表单后，输入的数据并不会被验证（客户端验证）。为了解决这个问题，可以在动态注入表单之后按照如下的方式调用$.validator.unobtrusive.parse()对表单元素进行重新解析。

[code]      $(function () {
2:     $("body #updateContact").load("home/update/001", null, function () {
3:         $("form").removeData("validator").removeData("unobtrusiveValidation");
4:         $.validator.unobtrusive.parse($("form"));
5:     });
6: })

[/code]

再次运行程序，客户端验证将会生效：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航