1

描述：

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

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

现在我确实想出了一个可行的解决方案来验证这些字段，但我迫切需要使它更加动态，以便将来可以以最小的努力添加更多的文本框。理想情况下，我希望逻辑能够对所有以“loc”开头的输入进行验证。

工作解决方案（非常脏）：

简单形式（在 MVC 视图中）

<form action="/Home/ViewResult" method="post" id="ViewResult" name="ViewResult">
<fieldset>
<legend>Enter Route</legend>
<p>
Address 1 (Start & End):
</p>
<p>
<input type="text" id="loc1" name="loc1" value='' />
</p>
<p>
Address 2:
</p>
<p>
<input type="text" id="loc2" name="loc2" value='' />
</p>
<p>
Address 3:
</p>
<p>
<input type="text" id="loc3" name="loc3" value='' />
</p>
<p>
Address 4:
</p>
<p>
<input type="text" id="loc4" name="loc4" value='' />
</p>
<p>
Address 5:
</p>
<p>
<input type="text" id="loc5" name="loc5" value='' />
</p>
<p>
<input type="submit" value="Route"/>
</p>
</fieldset>
</form>

jQuery 验证代码（在 MVC 视图中）

<script src="../../Scripts/jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">

    $(文档).ready(函数 () {
        $("#ViewResult").validate({
            onfocusout：错误，
            onkeyup：假，
            规则：{
                “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”：{
                    required: "开始/结束位置是必填字段。",
                    远程：“请输入一个有效的地址。”
                },
                “loc2”：{
                    required: "请输入至少 3 个地址。",
                    远程：“请输入一个有效的地址。”
                },
                “loc3”：{
                    required: "请输入至少 3 个地址。",
                    远程：“请输入一个有效的地址。”
                },
                “loc4”：{
                    远程：“请输入一个有效的地址。”
                },
                “loc5”：{
                    远程：“请输入一个有效的地址。”
                },
            }

        });
    });


</script>

远程引用的 Home Controller 中的函数

    // 检查有效地址的函数
    公共布尔 IsValidAddress（字符串位置）
    {
        // 如果不为空
        如果（位置！=“”）
        {
            // 尝试获取航路点
            航点航点 = getWaypoint(location);

            // 如果没有返回航点，则返回 false
            如果（航点==空）
            {
                返回假；
            }
        }

        返回真；
    }

    public JsonResult isValidAddress1(string loc1) // 参数必须是文本框名称
    {
        如果（！IsValidAddress（loc1））
        {
            返回新的 JsonResult { 数据 = false };
        }
        返回新的 JsonResult { 数据 = true };
    }

    public JsonResult isValidAddress2(string loc2) // 参数必须是文本框名称
    {
        如果（！IsValidAddress（loc2））
        {
            返回新的 JsonResult { 数据 = false };
        }
        返回新的 JsonResult { 数据 = true };
    }

    public JsonResult isValidAddress3(string loc3) // 参数必须是文本框名称
    {
        如果（！IsValidAddress（loc3））
        {
            返回新的 JsonResult { 数据 = false };
        }
        返回新的 JsonResult { 数据 = true };
    }

    public JsonResult isValidAddress4(string loc4) // 参数必须是文本框名称
    {
        如果（！IsValidAddress（loc4））
        {
            返回新的 JsonResult { 数据 = false };
        }
        返回新的 JsonResult { 数据 = true };
    }

    public JsonResult isValidAddress5(string loc5) // 参数必须是文本框名称
    {
        如果（！IsValidAddress（loc5））
        {
            返回新的 JsonResult { 数据 = false };
        }
        返回新的 JsonResult { 数据 = true };
    }

问题：

这同样有效，但它很脏而且根本不是动态的。

基本上我有两个问题。

  1. 如何编写 jQuery 速记来为所有以“loc”开头的文本框创建验证规则？
  2. 据我所知，处理远程调用的 MVC 控制器函数必须将文本框的名称传递给它。那么如何让一个 MVC 控制器函数处理对它的多个远程调用呢？

我在 jQuery 方面不是很强大，但我真正想要的是这样的东西，所以我可以稍后以最小的努力添加更多的文本框：

<script src="../../Scripts/jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">

    $(文档).ready(函数 () {
        $("#ViewResult").validate({
            onfocusout：错误，
            onkeyup：假，
            规则：{
                “loc1”：{
                    要求：真，
                },
                “loc2”：{
                    要求：真，
                },
                “loc3”：{
                    要求：真，
                },
                $("input=text").StartsWith("loc").each(): {
                    偏僻的： {
                        url: "/Home/IsValidAddress",
                        超时：2000，
                        类型：“帖子”
                    }
                }
            },
            消息：{
                “loc1”：{
                    required: "开始/结束位置是必填字段。",
                },
                “loc2”：{
                    required: "请输入至少 3 个地址。",
                },
                “loc3”：{
                    required: "请输入至少 3 个地址。",
                },
                $("input=text").StartsWith("loc").each(): {
                    远程：“请输入一个有效的地址。”
                },
            }

        });
    });


</script>

和家庭控制器功能

    // 检查有效地址的函数
    public JsonResult IsValidAddress(string loc) // loc 变量连接到动态文本框名称？
    {
        // 如果不为空
        如果 (loc != "")
        {
            // 尝试获取航路点
            航点航点 = getWaypoint(loc);

            // 如果没有返回航点，则返回 false
            如果（航点==空）
            {
                返回新的 JsonResult { 数据 = false };
            }
        }

        返回新的 JsonResult { 数据 = true };
    }

最后请注意，我没有能力更改 MVC 模型。我见过很多与此类似的解决方案，它们直接在 MVC 模型中编写验证规则和远程调用，但我根本无法那样做。

欢迎任何改进建议，并提前感谢您的任何回复。

请尝试告诉我我哪里出错了，或者我想要的是否可能。

4

2 回答 2

3

所以我想通了。

最终工作解决方案：

MVC Home Controller 中的功能：

    // 检查有效地址的函数
    // 注意：地址变量参数连接到远程调用中的数据属性
    public JsonResult IsValidAddress(字符串地址)
    {
        // 如果不为空
        如果（地址！=“”）
        {
            // 尝试获取航路点
            航点航点 = getWaypoint(地址);

            // 如果没有返回航点，则返回 false
            如果（航点。位置 == 空）
            {
                返回新的 JsonResult { 数据 = false };
            }
        }
        返回新的 JsonResult { 数据 = true };
    }

视图中的 jQuery 函数：

<script src="../../Scripts/jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">

    $(文档).ready(函数 () {
        $("#ViewResult").validate({
            onfocusout：错误，
            onkeyup: 假
        });
        $("#loc1").rules("add", {
            要求：真，
            消息：{
                required: "开始/结束位置是必填字段。",
            }
        });
        $("#loc2").rules("add", {
            要求：真，
            消息：{
                必填：“请输入至少 3 个地址。”
            }
        });
        $("#loc3").rules("add", {
            要求：真，
            消息：{
                必填：“请输入至少 3 个地址。”
            }
        });
        $('#ViewResult [name^="loc"]').each(function () {
            var currentValue = null;
            当前值 = $(这个);
            $(this).rules("add", {
                偏僻的： {
                    url: "/Home/IsValidAddress",
                    超时：2000，
                    类型：“帖子”，
                    数据：{地址：函数（）{返回currentValue.val（）；} }
                },
                消息：{
                    远程：“请输入一个有效的地址。”
                }
            });
        });
    });


</script>

我花了很多时间试图弄清楚这一点，我想我会分享。

于 2012-04-21T23:42:20.420 回答
1

因此，我能够通过在规则声明中使用远程调用的数据属性来定义一个名为“地址”的新参数，然后在 MVC 控制器函数中将其作为参数引用，从而找出问题的第二部分。

这是 Home 控制器中 MVC 控制器功能的更新代码：

    // 检查有效地址的函数
    // 注意：地址变量参数连接到远程调用中的数据属性
    public JsonResult IsValidAddress(字符串地址)
    {
        // 如果不为空
        如果（地址！=“”）
        {
            // 尝试获取航路点
            航点航点 = getWaypoint(地址);

            // 如果没有返回航点，则返回 false
            如果（航点。位置 == 空）
            {
                返回新的 JsonResult { 数据 = false };
            }
        }
        返回新的 JsonResult { 数据 = true };
    }

对于 jQuery，有两种方法可以做到这一点。

首先使用我之前使用的格式：

<script src="../../Scripts/jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">

    $(文档).ready(函数 () {
        $("#ViewResult").validate({
            onfocusout：错误，
            onkeyup：假，
            规则：{
                “loc1”：{
                    要求：真，
                    偏僻的： {
                        url: "/Home/IsValidAddress",
                        超时：2000，
                        类型：“帖子”，
                        数据：{地址：函数（）{返回$（“#loc1”）.val（）；} }
                    }
                },
                “loc2”：{
                    要求：真，
                    偏僻的： {
                        url: "/Home/IsValidAddress",
                        超时：2000，
                        类型：“帖子”，
                        数据：{地址：函数（）{返回$（“#loc2”）.val（）；} }
                    }
                },
                “loc3”：{
                    要求：真，
                    偏僻的： {
                        url: "/Home/IsValidAddress",
                        超时：2000，
                        类型：“帖子”，
                        数据：{地址：函数（）{返回$（“#loc3”）.val（）；} }
                    }
                },
                “loc4”：{
                    偏僻的： {
                        url: "/Home/IsValidAddress",
                        超时：2000，
                        类型：“帖子”，
                        数据：{地址：函数（）{返回$（“#loc4”）.val（）；} }
                    }
                },
                “loc5”：{
                    偏僻的： {
                        url: "/Home/IsValidAddress",
                        超时：2000，
                        类型：“帖子”，
                        数据：{地址：函数（）{返回$（“#loc5”）.val（）；} }
                    }
                }
            },
            消息：{
                “loc1”：{
                    required: "开始/结束位置是必填字段。",
                    远程：“请输入一个有效的地址。”
                },
                “loc2”：{
                    required: "请输入至少 3 个地址。",
                    远程：“请输入一个有效的地址。”
                },
                “loc3”：{
                    required: "请输入至少 3 个地址。",
                    远程：“请输入一个有效的地址。”
                },
                “loc4”：{
                    远程：“请输入一个有效的地址。”
                },
                “loc5”：{
                    远程：“请输入一个有效的地址。”
                }
            }
        });
    });


</script>

或者使用 .rules("add") 方法：

<script src="../../Scripts/jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">

    $(文档).ready(函数 () {
        $("#ViewResult").validate({
            onfocusout：错误，
            onkeyup: 假
        });
        $("#loc1").rules("add", {
            要求：真，
            偏僻的： {
                url: "/Home/IsValidAddress",
                超时：2000，
                类型：“帖子”，
                数据：{地址：函数（）{返回$（“#loc1”）.val（）；} }
            },
            消息：{
                required: "开始/结束位置是必填字段。",
                远程：“请输入一个有效的地址。”
            }
        });
        $("#loc2").rules("add", {
            要求：真，
            偏僻的： {
                url: "/Home/IsValidAddress",
                超时：2000，
                类型：“帖子”，
                数据：{地址：函数（）{返回$（“#loc2”）.val（）；} }
            },
            消息：{
                required: "请输入至少 3 个地址。",
                远程：“请输入一个有效的地址。”
            }
        });
        $("#loc3").rules("add", {
            要求：真，
            偏僻的： {
                url: "/Home/IsValidAddress",
                超时：2000，
                类型：“帖子”，
                数据：{地址：函数（）{返回$（“#loc3”）.val（）；} }
            },
            消息：{
                required: "请输入至少 3 个地址。",
                远程：“请输入一个有效的地址。”
            }
        });
        $("#loc4").rules("add", {
            偏僻的： {
                url: "/Home/IsValidAddress",
                超时：2000，
                类型：“帖子”，
                数据：{地址：函数（）{返回$（“#loc4”）.val（）；} }
            },
            消息：{
                远程：“请输入一个有效的地址。”
            }
        });
        $("#loc5").rules("add", {
            偏僻的： {
                url: "/Home/IsValidAddress",
                超时：2000，
                类型：“帖子”，
                数据：{地址：函数（）{返回$（“#loc5”）.val（）；} }
            },
            消息：{
                远程：“请输入一个有效的地址。”
            }
        });
    });


</script>
于 2012-04-19T13:55:35.043 回答