通过jQuery.post()方法将复选框的值发送给控制器
我有一个从数据库中显示所有基础设施(它们的名称,描述,性能)的表。该表的最后一列有复选框。选择一些复选框后,我想要一个按钮,它将删除所有选定的基础设施。这里有表格的代码。通过jQuery.post()方法将复选框的值发送给控制器
<table>
<tr>
<th>
Nazwa //name
</th>
<th>
Opis // description
</th>
<th>
Wydajność // performance
</th>
<th>
zaznacz // select
</th>
</tr>
@foreach (var item in Model)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.Nazwa)
</td>
<td>
@Html.DisplayFor(modelItem => item.Opis)
</td>
<td style="text-align: center">
@Html.DisplayFor(modelItem => item.Wydajnosc) j
</td>
<td style="padding-left: 2%; padding-right: 2%;">
<input type='checkbox' id='myCheckbox' name='Infrastuktura[@item.InfrastrukturaID].myCheckbox' value='@item.InfrastrukturaID' />
</td>
</tr>
}
我知道我需要一些变量,它会保存复选框的所有值。我有类似的东西:(但didnt't正常工作)
var checked = $('input[type="checkbox"]#myCheckbox').attr('checked');
然后,我必须把这个数据(例如使用jQuery.post()),我写了几个功能,发送与后数据,但没有一个能正常工作。下面我把这些功能之一:
$('#submitButton').click(function() {
if (checked) {
$.ajax({
type: 'POST',
url: '/Home/InfrastrukturaDelete',
data: 'id: ' +checked,
contentType: 'json',
dataType: 'json'
});
}
else {
alert("ble");
}
});
这是我在HomeController的方法:
[HttpPost]
public ActionResult InfrastrukturaDelete(int[] myCheckbox)
{
foreach (int item in myCheckbox)
{
Infrastruktury infrastruktura = naukaRepository.GetInfrastruktura(item);
naukaRepository.DeleteInfrastruktura(infrastruktura);
naukaRepository.Save();
}
return RedirectToAction("InfrastrukturyView");
}
我总是得到错误500或资源解释为其他但MIME类型不确定的转移。另外如果可以的话,告诉我控制器应该如何看待,以处理这个Ajax函数。我会很感激任何帮助。
我与复选框TD看起来像这样:
<td style="padding-left: 2%; padding-right: 2%;">
<input type='checkbox' id='myCheckbox' name='InfrastukturaID' value='@item.InfrastrukturaID' />
</td>
我与后脚本:
<script type="text/javascript">
function deleteRow() {
if ($(':checkbox:checked')) {
var postData = $('input[type="checkbox"]').serialize();
$.post('/Home/InfrastrukturaDelete', postData,
function() {
$(':checkbox:checked').each(function() {
if (this.checked) {
$(this).closest('tr').detach();
}
});
});
}
};
</script>
在$。员额()
第三个参数是函数,动态删除TR,这包含选中的复选框。我在控制器动作看起来像这样:
[HttpPost]
public ActionResult InfrastrukturaDelete(int[] InfrastukturaID)
{
foreach (int item in InfrastukturaID)
{
Infrastruktury infrastruktura = naukaRepository.GetInfrastruktura(item);
naukaRepository.DeleteInfrastruktura(infrastruktura);
naukaRepository.Save();
}
return Content("OK");
}
尝试用traditional: true
在mvc3-ajax-post-mutliple-checkbox-values-to-controller从这个带到序列化数据,它可能对你有帮助...
$.ajax({
url: "/room/removeselectedroom/@Model.mRoomid",
type: "POST",
dataType: "json",
data: jdata,
traditional: true,
success: function (msg) {
$('#mRooms').html(msg);
}
})
Here约数组序列的一些信息。
从jQuery 1.4开始,$ .param()方法递归地序列化深层对象以适应现代脚本语言和框架,比如PHP和Ruby on Rails。您可以通过设置jQuery.ajaxSettings.traditional = true;来全局禁用此功能。
即使我用“的传统:真正的”在我的岗位方法,在Chrome浏览器控制台显示错误500“对象引用不设置到对象的实例。”错误。它在我的控制器方法的某处看到错误。 – tzm
我不确定我是否理解你的问题。我认为你正在寻找一种方式来发布选中的基础设施的ID。
在这种情况下,这是我会做什么:
改变输入的名称checkboxs到非变量值(例如“Infrastuktura [@ item.InfrastrukturaID] .myCheckbox”变为“ InfrastukturaID“)
-
使用jquery post方法,将数据作为表单数据发回到url。作为JSON数据(你没有提到,作为一个要求)
$('#submitButton').click(function() { $.post('/Home/InfrastrukturaDelete', $("input[type='checkbox']").serialize(), function (msg) { $('#mRooms').html(msg); }) ); });
这将不发表您的数据。相反,你会得到一个发布到url的查询字符串。了解更多信息。序列化()在http://api.jquery.com/serialize/
随着所有复选框一个名字,贴在查询字符串会是这个样子:
InfrastukturaID=ID1&InfrastukturaID=ID2&InfrastukturaID=ID5
这应该那么不会太难遍历服务器端执行删除。
服务器端我会执行循环像这样(对不起,我的代码VB而不是C#,但你应该能够翻译):
For Each id As String In Request.Form("InfrastrukturaID")
'try convert string to int ID
'perform delete operation using the id
Next
'submit/save changes for delete operation
我在循环,而不是INT中使用的字符串,因为你必须做出确定你可以先投射到int。不能相信数据将永远是你想要的。
你理解我完美(我想发布选中的基础设施的ID)。我试图去做,就像你写的一样。仍然是“错误500内部服务器错误”和“对象引用未设置为对象的实例”。我的POST看起来像这样:InfrastukturaID = 24&InfrastukturaID = 25(它看起来不错)。在控制器中我的方法可能有问题吗? – tzm
我更新了我的答案。我希望这是有帮助的,这是我给出的第一个答案。 –
请标记答案,如果它解决了您的问题。 –
是否使用contentType: "application/json; charset=utf-8"
工作?
$('#submitButton').click(function() {
if (checked) {
$.ajax({
type: 'POST',
url: '/Home/InfrastrukturaDelete',
data: 'id: ' +checked,
contentType: "application/json; charset=utf-8", //<--- Change here
dataType: 'json'
});
}
else {
alert("ble");
}
});
不错的完整答案! –