使用MVC 4进行远程jQueryvalidation,动态validation以loc开头的所有输入?

描述:

我在MVC4应用程序中有一个简单的表单,它有5个名为loc1-5的文本框和一个提交按钮。 该应用程序在文本框loc1-5中最多使用5个地址,并使用bing地理编码服务和jQuery对地址进行一些处理并创建带有方向的地图。

问题是我需要validationloc1-5文本框,以确保它们是有效的地址,然后继续并确定最有效的方法是使用jQuery.validate远程调用可以使用我的MVC控制器函数预建函数以检查有效地址。

现在我确实提出了一个有效的解决方案来validation这些领域,但我迫切需要让它更具动态性,以便将来可以轻松添加更多文本框。 理想情况下,我希望逻辑能够在所有以’loc’开头的输入上进行validation。

工作解决方案(非常脏):

简单forms(在MVC视图中)

Enter Route

Address 1 (Start & End):

Address 2:

Address 3:

Address 4:

Address 5:

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};
     }

问题:

这又有效,但它非常脏,而且根本不是动态的。

基本上我有两个问题。

  1. 如何编写jQuery简写为所有以“loc”开头的文本框创建validation规则?
  2. 据我所知,处理远程调用的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();  }}
             },
            消息:{
                远程:“请输入有效地址。”
             }
         });
     });