使用MVC 4进行远程jQueryvalidation,动态validation以loc开头的所有输入?
描述:
我在MVC4应用程序中有一个简单的表单,它有5个名为loc1-5的文本框和一个提交按钮。 该应用程序在文本框loc1-5中最多使用5个地址,并使用bing地理编码服务和jQuery对地址进行一些处理并创建带有方向的地图。
问题是我需要validationloc1-5文本框,以确保它们是有效的地址,然后继续并确定最有效的方法是使用jQuery.validate远程调用可以使用我的MVC控制器函数预建函数以检查有效地址。
现在我确实提出了一个有效的解决方案来validation这些领域,但我迫切需要让它更具动态性,以便将来可以轻松添加更多文本框。 理想情况下,我希望逻辑能够在所有以’loc’开头的输入上进行validation。
工作解决方案(非常脏):
简单forms(在MVC视图中)
jQueryvalidation代码(在MVC视图中)
$(document).ready(function(){ $( “#的ViewResult”)。validation({ onfocusout:false, onkeyup:false, 规则:{ “loc1”:{ 要求:是的, 远程:{ url:“/ Home / IsValidAddress1”, 超时:2000, 类型:“发布” } }, “loc2”:{ 要求:是的, 远程:{ url:“/ Home / IsValidAddress2”, 超时:2000, 类型:“发布” } }, “loc3”:{ 要求:是的, 远程:{ url:“/ Home / IsValidAddress3”, 超时:2000, 类型:“发布” } }, “loc4”:{ 远程:{ url:“/ Home / IsValidAddress4”, 超时:2000, 类型:“发布” } }, “loc5”:{ 远程:{ url:“/ Home / IsValidAddress5”, 超时:2000, 类型:“发布” } } }, 消息:{ “loc1”:{ 必需:“开始/结束位置是必填字段。”, 远程:“请输入有效地址。” }, “loc2”:{ 要求:“请输入至少3个地址。”, 远程:“请输入有效地址。” }, “loc3”:{ 要求:“请输入至少3个地址。”, 远程:“请输入有效地址。” }, “loc4”:{ 远程:“请输入有效地址。” }, “loc5”:{ 远程:“请输入有效地址。” }, } }); });
远程控制的Home Controller中的function
//检查有效地址的function public Boolean IsValidAddress(string location) { //如果不是空白 if(location!=“”) { //尝试获取航点 Waypoint waypoint = getWaypoint(location); //如果没有返回航点,则返回false if(waypoint == null) { 返回虚假; } } 返回true; } public JsonResult isValidAddress1(string loc1)//参数必须是文本框名称 { if(!IsValidAddress(loc1)) { return new JsonResult {Data = false}; } return new JsonResult {Data = true}; } public JsonResult isValidAddress2(string loc2)//参数必须是文本框名称 { if(!IsValidAddress(loc2)) { return new JsonResult {Data = false}; } return new JsonResult {Data = true}; } public JsonResult isValidAddress3(string loc3)//参数必须是文本框名称 { if(!IsValidAddress(loc3)) { return new JsonResult {Data = false}; } return new JsonResult {Data = true}; } public JsonResult isValidAddress4(string loc4)//参数必须是文本框名称 { if(!IsValidAddress(loc4)) { return new JsonResult {Data = false}; } return new JsonResult {Data = true}; } public JsonResult isValidAddress5(string loc5)//参数必须是文本框名称 { if(!IsValidAddress(loc5)) { return new JsonResult {Data = false}; } return new JsonResult {Data = true}; }
问题:
这又有效,但它非常脏,而且根本不是动态的。
基本上我有两个问题。
- 如何编写jQuery简写为所有以“loc”开头的文本框创建validation规则?
- 据我所知,处理远程调用的MVC控制器函数必须具有传递给它的文本框的名称。 那么如何让一个MVC控制器函数处理多个远程调用呢?
我在jQuery方面不是很强,但我真正想要的是这样的东西,所以我可以稍后用最少的努力添加更多的文本框:
$(document).ready(function(){ $( “#的ViewResult”)。validation({ onfocusout:false, onkeyup:false, 规则:{ “loc1”:{ 要求:是的, }, “loc2”:{ 要求:是的, }, “loc3”:{ 要求:是的, }, $(“input = text”)。StartsWith(“loc”)。each():{ 远程:{ url:“/ Home / IsValidAddress”, 超时:2000, 类型:“发布” } } }, 消息:{ “loc1”:{ 必需:“开始/结束位置是必填字段。”, }, “loc2”:{ 要求:“请输入至少3个地址。”, }, “loc3”:{ 要求:“请输入至少3个地址。”, }, $(“input = text”)。StartsWith(“loc”)。each():{ 远程:“请输入有效地址。” }, } }); });
和家庭控制器function
//检查有效地址的function public JsonResult IsValidAddress(string loc)// loc变量连接到动态文本框名称? { //如果不是空白 if(loc!=“”) { //尝试获取航点 Waypoint waypoint = getWaypoint(loc); //如果没有返回航点,则返回false if(waypoint == null) { return new JsonResult {Data = false}; } } return new JsonResult {Data = true}; }
最后请注意,我没有能力更改MVC模型。 我已经看到许多与此类似的解决方案,直接在MVC模型中编写validation规则和远程调用,但我不能这样做。
欢迎任何改进建议,并提前感谢任何回复。
请试着告诉我哪里出错或者我想要的是什么。
所以我明白了。
最终工作方案:
MVC Home Controller中的function:
//检查有效地址的function //注意:地址变量参数连接到远程调用中的数据属性 public JsonResult IsValidAddress(字符串地址) { //如果不是空白 if(地址!=“”) { //尝试获取航点 Waypoint waypoint = getWaypoint(地址); //如果没有返回航点,则返回false if(waypoint.Location == null) { return new JsonResult {Data = false}; } } return new JsonResult {Data = true}; }
视图中的jQuery函数:
$(document).ready(function(){ $( “#的ViewResult”)。validation({ onfocusout:false, onkeyup:false }); $(“#loc1”)。rules(“add”,{ 要求:是的, 消息:{ 必需:“开始/结束位置是必填字段。”, } }); $(“#loc2”)。rules(“add”,{ 要求:是的, 消息:{ 必填:“请输入至少3个地址。” } }); $(“#loc3”)。rules(“add”,{ 要求:是的, 消息:{ 必填:“请输入至少3个地址。” } }); $('#ViewResult [name ^ =“loc”]')。each(function(){ var currentValue = null; currentValue = $(this); $(this).rules(“add”,{ 远程:{ url:“/ Home / IsValidAddress”, 超时:2000, 类型:“post”, data:{address:function(){return currentValue.val(); }} }, 消息:{ 远程:“请输入有效地址。” } }); }); });
我花了很多时间试图解决这个问题,我想我会分享。
所以我能够通过在规则声明中使用远程调用的data属性来定义问题的第二部分来定义一个名为’address’的新参数,然后将其作为MVC控制器函数中的参数引用。
以下是Home控制器中MVC控制器function的更新代码:
//检查有效地址的function //注意:地址变量参数连接到远程调用中的数据属性 public JsonResult IsValidAddress(字符串地址) { //如果不是空白 if(地址!=“”) { //尝试获取航点 Waypoint waypoint = getWaypoint(地址); //如果没有返回航点,则返回false if(waypoint.Location == null) { return new JsonResult {Data = false}; } } return new JsonResult {Data = true}; }
对于jQuery,有两种方法可以实现它们。
首先使用我之前使用的格式:
$(document).ready(function(){ $( “#的ViewResult”)。validation({ onfocusout:false, onkeyup:false, 规则:{ “loc1”:{ 要求:是的, 远程:{ url:“/ Home / IsValidAddress”, 超时:2000, 类型:“post”, data:{address:function(){return $(“#loc1”)。val(); }} } }, “loc2”:{ 要求:是的, 远程:{ url:“/ Home / IsValidAddress”, 超时:2000, 类型:“post”, data:{address:function(){return $(“#loc2”)。val(); }} } }, “loc3”:{ 要求:是的, 远程:{ url:“/ Home / IsValidAddress”, 超时:2000, 类型:“post”, data:{address:function(){return $(“#loc3”)。val(); }} } }, “loc4”:{ 远程:{ url:“/ Home / IsValidAddress”, 超时:2000, 类型:“post”, data:{address:function(){return $(“#loc4”)。val(); }} } }, “loc5”:{ 远程:{ url:“/ Home / IsValidAddress”, 超时:2000, 类型:“post”, data:{address:function(){return $(“#loc5”)。val(); }} } } }, 消息:{ “loc1”:{ 必需:“开始/结束位置是必填字段。”, 远程:“请输入有效地址。” }, “loc2”:{ 要求:“请输入至少3个地址。”, 远程:“请输入有效地址。” }, “loc3”:{ 要求:“请输入至少3个地址。”, 远程:“请输入有效地址。” }, “loc4”:{ 远程:“请输入有效地址。” }, “loc5”:{ 远程:“请输入有效地址。” } } }); });
或者使用.rules(“add”)方法:
$(document).ready(function(){ $( “#的ViewResult”)。validation({ onfocusout:false, onkeyup:false }); $(“#loc1”)。rules(“add”,{ 要求:是的, 远程:{ url:“/ Home / IsValidAddress”, 超时:2000, 类型:“post”, data:{address:function(){return $(“#loc1”)。val(); }} }, 消息:{ 必需:“开始/结束位置是必填字段。”, 远程:“请输入有效地址。” } }); $(“#loc2”)。rules(“add”,{ 要求:是的, 远程:{ url:“/ Home / IsValidAddress”, 超时:2000, 类型:“post”, data:{address:function(){return $(“#loc2”)。val(); }} }, 消息:{ 要求:“请输入至少3个地址。”, 远程:“请输入有效地址。” } }); $(“#loc3”)。rules(“add”,{ 要求:是的, 远程:{ url:“/ Home / IsValidAddress”, 超时:2000, 类型:“post”, data:{address:function(){return $(“#loc3”)。val(); }} }, 消息:{ 要求:“请输入至少3个地址。”, 远程:“请输入有效地址。” } }); $(“#loc4”)。rules(“add”,{ 远程:{ url:“/ Home / IsValidAddress”, 超时:2000, 类型:“post”, data:{address:function(){return $(“#loc4”)。val(); }} }, 消息:{ 远程:“请输入有效地址。” } }); $(“#loc5”)。rules(“add”,{ 远程:{ url:“/ Home / IsValidAddress”, 超时:2000, 类型:“post”, data:{address:function(){return $(“#loc5”)。val(); }} }, 消息:{ 远程:“请输入有效地址。” } }); });