为了充分利用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. （centos）linux下访问双系统windows7文件系统

    fdisk -l 无法挂载 NTFS格式的分区:mount: unknown filesystem type ‘ntfs’.   问题:       # mount –t ntfs /dev/sdb1 ...

  2. slice、substring和substr

    首先,他们都接收两个参数,slice和substring接收的是起始位置和结束位置(不包括结束位置),而substr接收的则是起始位置和所要返回的字符串长度.直接看下面例子: 1    var tes ...

  3. HDU 1180 (BFS搜索)

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=1180 题目大意:迷宫中有一堆楼梯,楼梯横竖变化.这些楼梯在奇数时间会变成相反状态,通过楼梯会顺便到达 ...

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

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

  5. Lazy Load, 延迟加载图片的 jQuery 插件【备忘】

    http://www.neoease.com/lazy-load-jquery-plugin-delay-load-image/ jQuery Unveil – 另一款非常轻量的延迟加载插件 http ...

  6. ios cocos2d TexturePacker生成文件后的使用方法

    (1)将*.pvr.ccz文件转换为CCSpriteBatchNode (2)   将对应的plist文件读到CCSpriteFrameCache中 (3) 从CCSpriteFrameCache获取 ...

  7. CC150 - 11.3

    Question: Given a sorted array of n integers that has been rotated an unknown number of times, write ...

  8. NSThread

    每个iOS应用程序都有个专门用来更新显示UI界面.处理用户的触摸事件的主线程,因此不能将其他太耗时的操作放在主线程中执行,不然会造成主线程堵塞(出现卡机现象),带来极坏的用户体验.一般的解决方案就是将 ...

  9. PHP 下载导出中文名的文件的编码注意事项

    我的页面全部都为utf-8 在代码中我的文件名是中文名. 在创建文件时,就要将utf-8转码成gbk(用以支持中文) $file = iconv('utf-8',"gbk",$fi ...

  10. 【IOS笔记】Using View Controllers in Your App

    参考:http://www.cnblogs.com/patientAndPersist/p/3279645.html Using View Controllers in Your App Whethe ...