专栏首页大内老A如何解决jQuery Validation针对动态添加的表单无法工作的问题?

如何解决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 条评论
登录 后参与评论

相关文章

  • TechEmpower最新一轮的性能测试出炉,ASP.NET Core依旧表现不俗

    TechEmpower在10月30发布最新一轮(Round 17)针对“Web Framework Benchmarks”的性能测试报告,ASP.NET Cor...

    蒋金楠
  • [WCF]缺少一行代码引发的血案

    这是今天作项目支持的发现的一个关于WCF的问题,虽然最终我只是添加了一行代码就解决了这个问题,但是整个纠错过程是痛苦的,甚至最终发现这个问题都具有偶然性。具体来...

    蒋金楠
  • WCF技术剖析之五:利用ASP.NET兼容模式创建支持会话(Session)的WCF服务

    在《基于IIS的WCF服务寄宿(Hosting)实现揭秘》中,我们谈到在采用基于IIS(或者说基于ASP.NET)的WCF服务寄宿中,具有两种截然不同的运行模式...

    蒋金楠
  • 详谈如何定制自己的博客园皮肤

    如果你仅仅想原封不动的使用本人的定制皮肤,而不想了解实现细节。那么你只需要完成以下几个步骤即可,后面的章节可以忽略。

    静默虚空
  • Linux相关操作

    首先,我们将配置您的CentOS系统,以便在启动时自动启动NetworkManager。你可以通过运行:

    致Great
  • pytest文档59-运行未提交git的用例(pytest-picked)

    我们每天写完自动化用例后都会提交到 git 仓库,随着用例的增多,为了保证仓库代码的干净,当有用例新增的时候,我们希望只运行新增的未提交 git 仓库的用例。 ...

    上海-悠悠
  • 极限帆船赛中的数据分析

    大数据文摘
  • 剑指offer代码解析——面试题14调整数组顺序使奇数在偶数之前

    本题详细解析都已在代码中注释了: /** * 题目:输入一个数组,要求将奇数放在数组的前半段,偶数放在数组的后半段 * @author 大闲人柴毛毛 *...

    大闲人柴毛毛
  • 如何在Debian和Ubuntu下重新打包Deb文件

    本文将会为 Ubuntu、Linux Mint 和 Debian GUN/Linux 用户讲述,如何在它们基于Debian的Linux操作系统上轻松的解压和重新...

    Debian社区

扫码关注云+社区

领取腾讯云代金券