为了充分利用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. 不容易系列之二[HDU2042]

    不容易系列之二 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Sub ...

  2. Open the Lock[HDU1195]

    Open the Lock Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Tot ...

  3. BZOJ3919 : [Baltic2014]portals

    预处理出每个点上下左右能延伸到的最远点以及到它们的距离的最小值md. 然后spfa,一个点除了可以以1的代价到达四周的点之外,还可以以md+1的代价到达四个方向能到达的最远点. #include< ...

  4. ModelMap和ModelAndView的作用

    首先介绍ModelMap和ModelAndView的作用 ModelMap ModelMap 对象主要用于传递控制方法处理数据到结果页面,也就是说我们把结果页面上需要的数据放到ModelMap对象中即 ...

  5. 用 Freemarker 生成 word 文档（包含图片）

    1. 用word写一个需要导出的word模板,然后存为xml格式. 2. 将xml中需要动态修改内容的地方,换成freemarker的标识符,例如: <w:p wsp:rsidR="0 ...

  6. people 0919

    package liu0919; public class People { private double height;// 身高 private String name;// 名字 private ...

  7. nginx源码编译安装

    安装编译所需的包: [root@xaiofan ~]# yum install -y gcc gcc-c++ autoconf automake 安装nginx使用某些功能需要的包: [root@xa ...

  8. Wilddog - 野狗统计

    根据业务需求提出的统计代码. <!DOCTYPE HTML> <html lang="en-US"> <head> <meta chars ...

  9. Excel操作类

    '引入Excel的COM组件 Imports System Imports System.Data Imports System.Configuration Imports System.Web Im ...

  10. LeetCode | Regular Expression Matching

    Regular Expression Matching Implement regular expression matching with support for '.' and '*'. '.' ...