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

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

再次运行程序,客户端验证将会生效:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏coder修行路

Go实现海量日志收集系统(三)

2403
来自专栏DeveWork

多说 提速:js内页页脚加载、静态文件CDN

最近为 Jeff的阳台 折腾着插件的提速工作。Jeff的阳台使用了多说评论系统,但多说的加载速度实在是不敢恭维(稳定性也一样),于是又邪恶地想到为多说提速一番,...

19810
来自专栏张善友的专栏

Webix JavaScript UI 库可以帮你构建跨平台的HTML5 和 CSS3 程序

XB 软件公司最近发布了JavaScript UI 库Webix ,其中包含的组件超过45个,用这些组件可以构建跟HTML5 和 CSS3 兼容的程序,这些程序...

2106
来自专栏逸鹏说道

07.LoT.UI 前后台通用框架分解系列之——轻巧的文本编辑器

LoT.UI汇总:http://www.cnblogs.com/dunitian/p/4822808.html#lotui 上次说的是强大的百度编辑器 http...

3517
来自专栏java架构师

Web开发中的文件上传组件uploadify的使用

在Web开发中,有很多可以上传的组件模块,利用HTML的File控件的上传也是一种办法,不过这种方式,需要处理的细节比较多,而且只能支持单文件的操作。在目前We...

2965
来自专栏葡萄城控件技术团队

如何在 ASP.NET MVC 中集成 AngularJS(2)

在如何在 ASP.NET MVC 中集成 AngularJS(1)中,我们介绍了 ASP.NET MVC 捆绑和压缩、应用程序版本自动刷新和工程构建等内容。 下...

25710
来自专栏跟着阿笨一起玩NET

WinForm中如何判断关闭事件来源于用户点击右上角的“关闭”按钮

在C#的WinForm程序中,有的时候需要判定关闭请求从哪里发出来的。比如是用户点击了右上角的“关闭”按钮,还是调用了WinForm.Close()方法。最典型...

2381
来自专栏乐沙弥的世界

MongoDB基于复制集创建索引

712
来自专栏Danny的专栏

在EasyUI的DataGrid中嵌入Combobox

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/huyuyang6688/article/...

8183
来自专栏林德熙的博客

win10 uwp 显示SVG win2d 使用 svg

这些图片在http://www.zcool.com.cn/下载,不知道是不是不能直接用

2031

扫码关注云+社区

领取腾讯云代金券