如何解决jQuery Validation针对动态添加的表单无法工作的问题?
2012-11-25 11:13
477 查看
为了充分利用ASP.NET MVC在服务端呈现HTML的能力,在《利用动态注入HTML的方式来设计复杂页面》一文中介绍了,通过Ajax调用获取HTML来呈现复杂页面中某一部分界面的解决方案。我们知道ASP.NET MVC默认集成了jQuery Validation,但是对于通过JavaScript动态添加的表单,客户端验证默认情况下是失效的。
还是以前文涉及的“联系人管理”为例,在一个ASP.NET MVC应用中定义了如下两个类型,Contact封装联系人信息,HomeController包含三个Action,除了默认Index外,两个Update方法用于修改指定的联系人信息。
[/code]
如下所示的是Action方法Update对应的View(Update.cshtml)的定义,这是一个Model类型为Contact的强类型View,指定的联系人信息以编辑状态呈现在一个表单中:
[/code]
默认Action方法Index对应的View(Index.cshtml)具有如下定义,页面主体内容是在加载的时候通过Ajax方法访问Action方法Update获取的。
[/code]
遗憾的是,运行程序后点击Save按钮提交表单后,输入的数据并不会被验证(客户端验证)。为了解决这个问题,可以在动态注入表单之后按照如下的方式调用$.validator.unobtrusive.parse()对表单元素进行重新解析。
[/code]
再次运行程序,客户端验证将会生效:
还是以前文涉及的“联系人管理”为例,在一个ASP.NET MVC应用中定义了如下两个类型,Contact封装联系人信息,HomeController包含三个Action,除了默认Index外,两个Update方法用于修改指定的联系人信息。
[code] 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 = "001", FirstName = "San", LastName = "Zhang", EmailAddress = "zhangsan@gmail.com", PhoneNo="123"}, new Contact{Id = "002", FirstName = "Si", LastName = "Li", EmailAddress = "zhangsan@gmail.com", PhoneNo="456"} }; 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) { //省略操作 } }
[/code]
如下所示的是Action方法Update对应的View(Update.cshtml)的定义,这是一个Model类型为Contact的强类型View,指定的联系人信息以编辑状态呈现在一个表单中:
[code] @model Contact @{ Layout = null; } @using (Html.BeginForm()) { @Html.EditorForModel() <input type="submit" value="Save" /> }
[/code]
默认Action方法Index对应的View(Index.cshtml)具有如下定义,页面主体内容是在加载的时候通过Ajax方法访问Action方法Update获取的。
[code] <html> <head> <title>修改联系人信息</title> </head> <body> <div id="updateContact"></div> <script type="text/javascript" src="@Url.Content("~/Assets/js/jquery-1.7.1.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>
[/code]
遗憾的是,运行程序后点击Save按钮提交表单后,输入的数据并不会被验证(客户端验证)。为了解决这个问题,可以在动态注入表单之后按照如下的方式调用$.validator.unobtrusive.parse()对表单元素进行重新解析。
[code] $(function () { $("body #updateContact").load("home/update/001", null, function () { $("form").removeData("validator").removeData("unobtrusiveValidation"); $.validator.unobtrusive.parse($("form")); }); })
[/code]
再次运行程序,客户端验证将会生效:
相关文章推荐
- 如何解决jQuery Validation针对动态添加的表单无法工作的问题?
- 如何解决jQuery Validation针对动态添加的表单无法工作的问题?
- 如何解决jQuery Validation针对动态添加的表单无法工作的问题?
- jQuery - 动态添加、删除form表单项(附:新增项数据无法提交问题解决)
- APK IPA --------------- iis7如何添加mime类型支持所有后缀名文件下载的方法(解决特殊后缀文件无法下载的问题)
- HOWTO:如何解决安装包在系统“添加/删除”中无法修复或卸载的问题
- 解决Win32 SDK编程添加list control控件程序无法运行的问题 . 和如何画进度条
- [原] VS新添加WebApplication项目,无法运行,请求帮助,问题如何解决
- 解决对于动态添加的表单,校验失效问题
- form表单 无法提交js动态添加的表单元素问题。。
- 动态链接库知识点归纳之二(如何添加类,如何解决名字改变问题)
- jquery live方法,解决jquery动态添加按钮无法触发点击事件的问题
- 如果dom节点是动态添加进页面的,在页面节点绑定事件如何解决的问题。
- 解决 easyui 动态添加控件时无法渲染的问题
- Android Studio so文件如何添加,如何解决极光推送无法推送的奇怪问题
- 工作问题积累(十一)如何解决"应用程序无法启动,因为应用程序的并行配置不正确"问题
- iis7如何添加mime类型支持所有后缀名文件下载的方法(解决特殊后缀文件无法下载的问题)
- 如何解决用户添加到AD Group仍然无法访问SharePoint网站的问题?
- Javascript动态添加文本输入框在后台无法取值问题的解决
- 解决QT5.3.1下触控笔无法工作的问题