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

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

: public class Contact

   : {

   :     [Required]

   :     public string Id { get; set; }

   :     [Required]

   :     public string FirstName { get; set; }

   :     [Required]

   :     public string LastName { get; set; }

   :     [Required]

  :     [DataType(DataType.EmailAddress)]

  :     public string EmailAddress { get; set; }

  :     [Required]

  :     [DataType(DataType.PhoneNumber)]

  :     public string PhoneNo { get; set; }

  : }

  :

  : public class HomeController : Controller

  : {

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

  :     {

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

  :         new Contact{Id = "", FirstName = "Si", LastName = "Li", EmailAddress = "zhangsan@gmail.com", PhoneNo=""}

  :     };

  :

  :     public ActionResult Index()

  :     {

  :         return View();

  :     }

  :

  :     [HttpGet]

  :     public ActionResult Update(string id)

  :     {

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

  :     }

  :

  :     [HttpPost]

  :     public ActionResult Update(Contact contact)

  :     {

  :         //省略操作

  :     }

  : }

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

: @model Contact

   : @{

   :     Layout = null;

   : }

   : @using (Html.BeginForm())

   : {

   :     @Html.EditorForModel()

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

   : }

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

 : <html>

   :     <head>

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

   :     </head>

   :     <body>

   :         <div id="updateContact"></div>

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

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

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

  :          <script type="text/javascript">

  :              $(function () {

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

  :                  });

  :              })

  :         </script>

  :     </body>

  : </html>

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

: $(function () {

   :     $("body #updateContact").load("home/update/001", null, function () {

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

   :         $.validator.unobtrusive.parse($("form"));

   :     });

   : })

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

如何解决jQuery Validation针对动态添加的表单无法工作的问题？的更多相关文章

  1. form表单 无法提交js动态添加的表单元素问题。。

    第一种情况, 这种情况js动态添加的表单元素是不能提交到服务器端的 <table> <form method="post" action=" url   ...

  2. javascript动态添加form表单元素

    2014年11月7日 17:10:40 之前写过几篇类似的文章,现在看来比较初级,弄一个高级的简单的 情景: 后台要上传游戏截图,截图数量不确定,因此使用动态添加input节点的方法去实现这个效果 主 ...

  3. Jquery Validation 多按钮，多表单，分组验证

    真正做到了 多按钮的验证. 在用户输入的时候就可以验证,而网上大部分多按钮验证都是必须要用户点击按钮后才可以验证. 研究了两天终于弄出来了,不知道两天是过长还是过段,现在分享给小伙伴们. 小伙伴们支持 ...

  4. Angular实现动态添加删除表单输入框功能

    <div class="form-group form-group-sm" *ngFor="let i of login"> <label c ...

  5. jquery mobile Checkbox动态添加刷新及事件绑定

    jquery mobile Checkbox动态添加刷新及事件绑定 在微信项目中,涉及到一个多选功能.数据来自后台数据库,需要动态加载. 项目结构:微信api+web app.使用jquery mob ...

  6. jQuery动态创建form表单并提交到后台(携带一定的数据进行页面跳转)

    今天遇到这么一个需求,携带一个编号一个名字跳转到另一个JSP页面,直接页面跳转(get携带数据)的话不太安全,于是想到到后台转发一下. 第一种:直接以表单提交方式的进行 JS代码: var form ...

  7. C#中缓存的使用 ajax请求基于restFul的WebApi(post、get、delete、put) 让 .NET 更方便的导入导出 Excel .net core api +swagger(一个简单的入门demo 使用codefirst+mysql) C# 位运算详解 c# 交错数组 c# 数组协变 C# 添加Excel表单控件（Form Controls） C#串口通信程序

    C#中缓存的使用   缓存的概念及优缺点在这里就不多做介绍,主要介绍一下使用的方法. 1.在ASP.NET中页面缓存的使用方法简单,只需要在aspx页的顶部加上一句声明即可:  <%@ Outp ...

  8. Vue3组件（九）Vue + element-Plus + json = 动态渲染的表单控件

    一个成熟的表单 表单表单,你已经长大了,你要学会: 动态渲染 支持单列.双列.多列 支持调整布局 支持表单验证 支持调整排列(显示)顺序 依据组件值显示需要的组件 支持 item 扩展组件 可以自动创 ...

  9. vue+element创建动态的form表单.以及动态生成表格的行和列

    动态创建form表单,网上有插件 (form-create) 不过我不知道它怎么用,没有使用成功,如果你使用成功了,欢迎下方留言. 最后我使用了笨方法,针对各个表单写好通用的组件,然后根据type用v ...

随机推荐

  1. System call in linux by C

    1: #include <stdlib.h> 2: int system(const char *command); 3:  4: while (something) { 5: int r ...

  2. POJ 3691 (AC自动机+状态压缩DP)

    题目链接:  http://poj.org/problem?id=3691 题目大意:给定N个致病DNA片段以及一个最终DNA片段.问最终DNA片段最少修改多少个字符,使得不包含任一致病DNA. 解题 ...

  3. 20145315 《Java程序设计》实验三实验报告

    实验三 敏捷开发与XP实践 实验内容 下载并学会使用git上传代码: 与同学结对,相互下载并更改对方代码,并上传: 实现代码的重载. 实验步骤 下载并用git上传代码: 1.下载并安装好git,在cm ...

  4. CC150 - 11.5

    Question: Given a sorted array of strings which is interspersed with empty strings, write a method t ...

  5. Android之adb异常

    Android使用adb模拟器时出现"unable to establish connection to adb"."ADB server didn't ACK" ...

  6. winform学习之----进程和线程

    Process[] pros = Process.GetProcesses();//获取多个进程            foreach(var item in pros)            {   ...

  7. WampServer搭建php环境时出现的哪些问题？

    WampServer搭建php环境时遇到的问题 安装时报错,缺少MSVCR100.dll文件 这是因为wampServer安装时用到的vc库没有更新,要安装更新之后再进行安装,因为之前安装的VC版本低 ...

  8. Stackoverflow架构

    Stackoverflow用的是.net开发的,用的缓存是Redis,Stackoverflow架构的演讲地址是:http://www.infoq.com/cn/presentations/archi ...

  9. Nginx 笔记与总结（2）信号控制

    开启.关闭.重启 Nginx 官方地址:http://wiki.nginx.org/CommandLine 开启: /usr/local/nginx/sbin/nginx 关闭,用信号控制,语法: k ...

  10. mysql执行完select后，释放游标

    内存释放 在我们执行完SELECT语句后,释放游标内存是一个很好的习惯. .可以通过PHP函数mysql_free_result()来实现内存的释放. 以下实例演示了该函数的使用方法. 2.mysql ...