JQuery 在 MVC 中 - 使用 getJson 将表单数据作为数组发送
JQuery in MVC - Send form data as array with getJson
我有一个 MVC 视图,它通过使用 getJSON 定期指向我的控制器中的一个方法并解析返回的 Json.
来更新页面上的元素
控制器中的方法蓝图:
public JsonResult GetAttendeeJson()
{
//Code which creates the Json I need.
return Json(result, JsonRequestBehavior.AllowGet);
}
来自视图的调用:
function showDetects() {
// This is the main AJAX that retrieves the data.
$.getJSON('/Attendee/CardDetections', function (data) {
$.each(data, function (i, country) {
// perform actions using data.
});
});
}
了解我在做什么并不重要,但我的情况发生了变化,我现在在我的视图中添加了一个包含可变数量复选框的表单(取决于哪个用户使用该页面,复选框的数量将是不同)。
复选框表单创建:
<form onsubmit="@Url.Action("Index", "Attendee")" method="post" id="checkboxform">
@{int i = 0;}
@{foreach (string s in ViewBag.LocationNames)
{
<div class="radio-inline">
@s
<input class="checkboxcontrol" onchange="this.form.submit()" type="checkbox" id="CheckBoxes" name="CheckBoxes" value="@ViewBag.LocationIds[i]">
</div>
i++;
}
}
</form>
添加此表单意味着我现在需要我的控制器方法 returns Json 才能使用这些复选框的数据。 GetAttendeeJson
现在需要知道当前在表单上选中了哪些复选框。
所以我希望方法蓝图是这样的:
public JsonResult GetAttendeeJson(int[] checkBoxValues)
{
//Code which creates the Json I need using the checkbox values.
return Json(result, JsonRequestBehavior.AllowGet);
}
是否可以在不提交表单的情况下执行此操作?我使用提交来做一些导致重新加载页面的事情。我使用 getJson 来更新页面内容。
理想情况下,我只想获取数组中选中复选框的值字段,并在调用它时将其作为参数发送到 GetAttendeeJson
函数。
谢谢,
JK
假设您关注 HTML -
<input type="checkbox" name="chk" value="1" /> 1
<input type="checkbox" name="chk" value="2" /> 2
<input type="checkbox" name="chk" value="3" /> 3
<input type="checkbox" name="chk" value="4" /> 4
<input type="button" id="submit" value="Submit"/>
然后我们可以使用 AJAX POST
将选中的复选框推送到操作方法,如下所示 -
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script>
$(function () {
$("#submit").click(function () {
var vals = [];
$('input:checkbox[name=chk]:checked').each(function () {
vals.push($(this).val());
});
$.ajax({
url: "/Home/GetAttendeeJson",
type: "post",
dataType: "json",
data: JSON.stringify({ checkBoxValues: vals }),
contentType: 'application/json; charset=utf-8',
success: function (result) {
if (result.success) {
}
else {
}
}
});
});
});
</script>
当我们点击按钮时,可以在以下控制器操作中获得选中的复选框 -
public JsonResult GetAttendeeJson(int[] checkBoxValues)
{
//Code which creates the Json I need using the checkbox values.
return Json("true", JsonRequestBehavior.AllowGet)
}
视图呈现如下,我们可以 check/uncheck 复选框 -
然后当你设置断点并调试代码时,输出将如下所示 -
尝试定期触发 ajax 呼叫。这样您无需提交表单就可以将其发送到您的函数。
我有一个 MVC 视图,它通过使用 getJSON 定期指向我的控制器中的一个方法并解析返回的 Json.
来更新页面上的元素控制器中的方法蓝图:
public JsonResult GetAttendeeJson()
{
//Code which creates the Json I need.
return Json(result, JsonRequestBehavior.AllowGet);
}
来自视图的调用:
function showDetects() {
// This is the main AJAX that retrieves the data.
$.getJSON('/Attendee/CardDetections', function (data) {
$.each(data, function (i, country) {
// perform actions using data.
});
});
}
了解我在做什么并不重要,但我的情况发生了变化,我现在在我的视图中添加了一个包含可变数量复选框的表单(取决于哪个用户使用该页面,复选框的数量将是不同)。
复选框表单创建:
<form onsubmit="@Url.Action("Index", "Attendee")" method="post" id="checkboxform">
@{int i = 0;}
@{foreach (string s in ViewBag.LocationNames)
{
<div class="radio-inline">
@s
<input class="checkboxcontrol" onchange="this.form.submit()" type="checkbox" id="CheckBoxes" name="CheckBoxes" value="@ViewBag.LocationIds[i]">
</div>
i++;
}
}
</form>
添加此表单意味着我现在需要我的控制器方法 returns Json 才能使用这些复选框的数据。 GetAttendeeJson
现在需要知道当前在表单上选中了哪些复选框。
所以我希望方法蓝图是这样的:
public JsonResult GetAttendeeJson(int[] checkBoxValues)
{
//Code which creates the Json I need using the checkbox values.
return Json(result, JsonRequestBehavior.AllowGet);
}
是否可以在不提交表单的情况下执行此操作?我使用提交来做一些导致重新加载页面的事情。我使用 getJson 来更新页面内容。
理想情况下,我只想获取数组中选中复选框的值字段,并在调用它时将其作为参数发送到 GetAttendeeJson
函数。
谢谢, JK
假设您关注 HTML -
<input type="checkbox" name="chk" value="1" /> 1
<input type="checkbox" name="chk" value="2" /> 2
<input type="checkbox" name="chk" value="3" /> 3
<input type="checkbox" name="chk" value="4" /> 4
<input type="button" id="submit" value="Submit"/>
然后我们可以使用 AJAX POST
将选中的复选框推送到操作方法,如下所示 -
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script>
$(function () {
$("#submit").click(function () {
var vals = [];
$('input:checkbox[name=chk]:checked').each(function () {
vals.push($(this).val());
});
$.ajax({
url: "/Home/GetAttendeeJson",
type: "post",
dataType: "json",
data: JSON.stringify({ checkBoxValues: vals }),
contentType: 'application/json; charset=utf-8',
success: function (result) {
if (result.success) {
}
else {
}
}
});
});
});
</script>
当我们点击按钮时,可以在以下控制器操作中获得选中的复选框 -
public JsonResult GetAttendeeJson(int[] checkBoxValues)
{
//Code which creates the Json I need using the checkbox values.
return Json("true", JsonRequestBehavior.AllowGet)
}
视图呈现如下,我们可以 check/uncheck 复选框 -
然后当你设置断点并调试代码时,输出将如下所示 -
尝试定期触发 ajax 呼叫。这样您无需提交表单就可以将其发送到您的函数。