说明
我在MVC4应用程序中有一个简单的表单，它有5个名为loc1-5的文本框和一个提交按钮。该应用程序在文本框loc1-5中最多使用5个地址，并使用bing地理编码服务和jQuery对地址进行一些处理并创建带有方向的地图。
问题是我需要在继续之前验证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">
$(document).ready(function () {
$("#ViewResult").validate({
onfocusout: false,
onkeyup: false,
rules: {
"loc1": {
required: true,
remote: {
url: "/Home/IsValidAddress1",
timeout: 2000,
type: "post"
}
},
"loc2": {
required: true,
remote: {
url: "/Home/IsValidAddress2",
timeout: 2000,
type: "post"
}
},
"loc3": {
required: true,
remote: {
url: "/Home/IsValidAddress3",
timeout: 2000,
type: "post"
}
},
"loc4": {
remote: {
url: "/Home/IsValidAddress4",
timeout: 2000,
type: "post"
}
},
"loc5": {
remote: {
url: "/Home/IsValidAddress5",
timeout: 2000,
type: "post"
}
}
},
messages: {
"loc1": {
required: "Start/End Location is a required field.",
remote: "Please enter a valid address."
},
"loc2": {
required: "Please enter at least 3 addresses.",
remote: "Please enter a valid address. "
},
"loc3": {
required: "Please enter at least 3 addresses.",
remote: "Please enter a valid address. "
},
"loc4": {
remote: "Please enter a valid address. "
},
"loc5": {
remote: "Please enter a valid address. "
},
}
});
});
</script>
远程
引用的Home Controller中的功能
// Function to check for a valid address
public Boolean IsValidAddress(string location)
{
// If it is not blank
if (location != "")
{
// Attempt to get the waypoint
Waypoint waypoint = getWaypoint(location);
// If no waypoint returned, return false
if (waypoint == null)
{
return false;
}
}
return true;
}
public JsonResult isValidAddress1(string loc1) // Parameter must be textbox name
{
if (!IsValidAddress(loc1))
{
return new JsonResult { Data = false };
}
return new JsonResult { Data = true };
}
public JsonResult isValidAddress2(string loc2) // Parameter must be textbox name
{
if (!IsValidAddress(loc2))
{
return new JsonResult { Data = false };
}
return new JsonResult { Data = true };
}
public JsonResult isValidAddress3(string loc3) // Parameter must be textbox name
{
if (!IsValidAddress(loc3))
{
return new JsonResult { Data = false };
}
return new JsonResult { Data = true };
}
public JsonResult isValidAddress4(string loc4) // Parameter must be textbox name
{
if (!IsValidAddress(loc4))
{
return new JsonResult { Data = false };
}
return new JsonResult { Data = true };
}
public JsonResult isValidAddress5(string loc5) // Parameter must be textbox name
{
if (!IsValidAddress(loc5))
{
return new JsonResult { Data = false };
}
return new JsonResult { Data = true };
}
问题：
这再次起作用但它非常脏并且完全没有动态。
基本上我有两个问题。
我在jQuery方面不是很强，但我真正想要的是这样的东西，所以我可以稍后用最少的努力添加更多的文本框：
<script src="../../Scripts/jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#ViewResult").validate({
onfocusout: false,
onkeyup: false,
rules: {
"loc1": {
required: true,
},
"loc2": {
required: true,
},
"loc3": {
required: true,
},
$("input=text").StartsWith("loc").each(): {
remote: {
url: "/Home/IsValidAddress",
timeout: 2000,
type: "post"
}
}
},
messages: {
"loc1": {
required: "Start/End Location is a required field.",
},
"loc2": {
required: "Please enter at least 3 addresses.",
},
"loc3": {
required: "Please enter at least 3 addresses.",
},
$("input=text").StartsWith("loc").each(): {
remote: "Please enter a valid address. "
},
}
});
});
</script>
家庭控制器功能
// Function to check for a valid address
public JsonResult IsValidAddress(string loc) // loc variable connect to dynamic textbox names?
{
// If it is not blank
if (loc != "")
{
// Attempt to get the waypoint
Waypoint waypoint = getWaypoint(loc);
// If no waypoint returned, return false
if (waypoint == null)
{
return new JsonResult { Data = false };
}
}
return new JsonResult { Data = true };
}
最后请注意，我没有能力更改MVC模型。我已经看到很多与此类似的解决方案，直接在MVC模型中编写验证规则和远程调用，但我不能这样做。
欢迎任何改进建议，并提前感谢任何回复。
请尝试告诉我哪里出错或者我想要的是什么。
答案 0 :(得分：3)
所以我想通了。
最终工作解决方案：
MVC Home Controller中的功能：
// Function to check for a valid address
// Note: address variable parameter connects to data attribute in remote call
public JsonResult IsValidAddress(string address)
{
// If it is not blank
if (address != "")
{
// Attempt to get the waypoint
Waypoint waypoint = getWaypoint(address);
// If no waypoint returned, return false
if (waypoint.Location == null)
{
return new JsonResult { Data = false };
}
}
return new JsonResult { Data = true };
}
View中的jQuery函数：
<script src="../../Scripts/jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#ViewResult").validate({
onfocusout: false,
onkeyup: false
});
$("#loc1").rules("add", {
required: true,
messages: {
required: "Start/End Location is a required field.",
}
});
$("#loc2").rules("add", {
required: true,
messages: {
required: "Please enter at least 3 addresses."
}
});
$("#loc3").rules("add", {
required: true,
messages: {
required: "Please enter at least 3 addresses."
}
});
$('#ViewResult [name^="loc"]').each(function () {
var currentValue = null;
currentValue = $(this);
$(this).rules("add", {
remote: {
url: "/Home/IsValidAddress",
timeout: 2000,
type: "post",
data: { address: function () { return currentValue.val(); } }
},
messages: {
remote: "Please enter a valid address."
}
});
});
});
</script>
我花了很多时间试图解决这个问题，我想我会分享。
答案 1 :(得分：1)
所以我能够通过在规则声明中使用远程调用的data属性来定义问题的第二部分来定义一个名为'address'的新参数，然后将其作为MVC控制器函数中的参数引用。
以下是Home控制器中MVC控制器功能的更新代码：
// Function to check for a valid address
// Note: address variable parameter connects to data attribute in remote call
public JsonResult IsValidAddress(string address)
{
// If it is not blank
if (address != "")
{
// Attempt to get the waypoint
Waypoint waypoint = getWaypoint(address);
// If no waypoint returned, return false
if (waypoint.Location == null)
{
return new JsonResult { Data = false };
}
}
return new JsonResult { Data = true };
}
对于jQuery，有两种方法可以实现它。
首先使用我之前使用的格式：
<script src="../../Scripts/jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#ViewResult").validate({
onfocusout: false,
onkeyup: false,
rules: {
"loc1": {
required: true,
remote: {
url: "/Home/IsValidAddress",
timeout: 2000,
type: "post",
data: { address: function () { return $("#loc1").val(); } }
}
},
"loc2": {
required: true,
remote: {
url: "/Home/IsValidAddress",
timeout: 2000,
type: "post",
data: { address: function () { return $("#loc2").val(); } }
}
},
"loc3": {
required: true,
remote: {
url: "/Home/IsValidAddress",
timeout: 2000,
type: "post",
data: { address: function () { return $("#loc3").val(); } }
}
},
"loc4": {
remote: {
url: "/Home/IsValidAddress",
timeout: 2000,
type: "post",
data: { address: function () { return $("#loc4").val(); } }
}
},
"loc5": {
remote: {
url: "/Home/IsValidAddress",
timeout: 2000,
type: "post",
data: { address: function () { return $("#loc5").val(); } }
}
}
},
messages: {
"loc1": {
required: "Start/End Location is a required field.",
remote: "Please enter a valid address."
},
"loc2": {
required: "Please enter at least 3 addresses.",
remote: "Please enter a valid address."
},
"loc3": {
required: "Please enter at least 3 addresses.",
remote: "Please enter a valid address."
},
"loc4": {
remote: "Please enter a valid address."
},
"loc5": {
remote: "Please enter a valid address."
}
}
});
});
</script>
或使用.rules（“add”）方法：
<script src="../../Scripts/jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#ViewResult").validate({
onfocusout: false,
onkeyup: false
});
$("#loc1").rules("add", {
required: true,
remote: {
url: "/Home/IsValidAddress",
timeout: 2000,
type: "post",
data: { address: function () { return $("#loc1").val(); } }
},
messages: {
required: "Start/End Location is a required field.",
remote: "Please enter a valid address."
}
});
$("#loc2").rules("add", {
required: true,
remote: {
url: "/Home/IsValidAddress",
timeout: 2000,
type: "post",
data: { address: function () { return $("#loc2").val(); } }
},
messages: {
required: "Please enter at least 3 addresses.",
remote: "Please enter a valid address."
}
});
$("#loc3").rules("add", {
required: true,
remote: {
url: "/Home/IsValidAddress",
timeout: 2000,
type: "post",
data: { address: function () { return $("#loc3").val(); } }
},
messages: {
required: "Please enter at least 3 addresses.",
remote: "Please enter a valid address."
}
});
$("#loc4").rules("add", {
remote: {
url: "/Home/IsValidAddress",
timeout: 2000,
type: "post",
data: { address: function () { return $("#loc4").val(); } }
},
messages: {
remote: "Please enter a valid address."
}
});
$("#loc5").rules("add", {
remote: {
url: "/Home/IsValidAddress",
timeout: 2000,
type: "post",
data: { address: function () { return $("#loc5").val(); } }
},
messages: {
remote: "Please enter a valid address."
}
});
});
</script>