2023年6月21日发(作者：)
解决对于动态添加的表单,校验失效问题为了充分利⽤ MVC在服务端呈现HTML的能⼒，在《》⼀⽂中介绍了，通过Ajax调⽤获取HTML来呈现复杂页⾯中某⼀部分界⾯的解决⽅案。我们知道 MVC默认集成了jQuery Validation，但是对于通过JavaScript动态添加的表单，客户端验证默认情况下是失效的。还是以前⽂涉及的“联系⼈管理”为例，在⼀个 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(ddress)] 11: public string EmailAddress { get; set; } 12: [Required] 13: [DataType(umber)] 14: public string PhoneNo { get; set; } 15: } 16:
17: public class HomeController : Controller 18: { 19: private static List
25: public ActionResult Index() 26: { 27: return View(); 28: } 29:
30: [HttpGet] 31: public ActionResult Update(string id) 32: { 33: return View((c => == id)); 34: } 35:
36: [HttpPost] 37: public ActionResult Update(Contact contact) 38: { 39: //省略操作 40: } 41: }
如下所⽰的是Action⽅法Update对应的View（）的定义，这是⼀个Model类型为Contact的强类型View，指定的联系⼈信息以编辑状态呈现在⼀个表单中： @model Contact 2: @{ 3: Layout = null; 4: } 5: @using (orm()) 6: {
7: @ForModel() 8: 9: }
默认Action⽅法Index对应的View（）具有如下定义，页⾯主体内容是在加载的时候通过Ajax⽅法访问Action⽅法Update获取的。1: 2:
3:4: 5:
6:
7: 8: 9: 10: 16: 17:遗憾的是，运⾏程序后点击Save按钮提交表单后，输⼊的数据并不会被验证（客户端验证）。为了解决这个问题，可以在动态注⼊表单之后按照如下的⽅式调⽤$.()对表单元素进⾏重新解析。 $(function () { 2: $("body #updateContact").load("home/update/001", null, function () { 3: $("form").removeData("validator").removeData("unobtrusiveValidation"); 4: $.($("form")); 5: });
6: })
再次运⾏程序，客户端验证将会⽣效：
2023年6月21日发(作者：)
解决对于动态添加的表单,校验失效问题为了充分利⽤ MVC在服务端呈现HTML的能⼒，在《》⼀⽂中介绍了，通过Ajax调⽤获取HTML来呈现复杂页⾯中某⼀部分界⾯的解决⽅案。我们知道 MVC默认集成了jQuery Validation，但是对于通过JavaScript动态添加的表单，客户端验证默认情况下是失效的。还是以前⽂涉及的“联系⼈管理”为例，在⼀个 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(ddress)] 11: public string EmailAddress { get; set; } 12: [Required] 13: [DataType(umber)] 14: public string PhoneNo { get; set; } 15: } 16:
17: public class HomeController : Controller 18: { 19: private static List
25: public ActionResult Index() 26: { 27: return View(); 28: } 29:
30: [HttpGet] 31: public ActionResult Update(string id) 32: { 33: return View((c => == id)); 34: } 35:
36: [HttpPost] 37: public ActionResult Update(Contact contact) 38: { 39: //省略操作 40: } 41: }
如下所⽰的是Action⽅法Update对应的View（）的定义，这是⼀个Model类型为Contact的强类型View，指定的联系⼈信息以编辑状态呈现在⼀个表单中： @model Contact 2: @{ 3: Layout = null; 4: } 5: @using (orm()) 6: {
7: @ForModel() 8: 9: }
默认Action⽅法Index对应的View（）具有如下定义，页⾯主体内容是在加载的时候通过Ajax⽅法访问Action⽅法Update获取的。1: 2:
3:4: 5:
6:
7: 8: 9: 10: 16: 17:遗憾的是，运⾏程序后点击Save按钮提交表单后，输⼊的数据并不会被验证（客户端验证）。为了解决这个问题，可以在动态注⼊表单之后按照如下的⽅式调⽤$.()对表单元素进⾏重新解析。 $(function () { 2: $("body #updateContact").load("home/update/001", null, function () { 3: $("form").removeData("validator").removeData("unobtrusiveValidation"); 4: $.($("form")); 5: });
6: })
再次运⾏程序，客户端验证将会⽣效：
发布评论