通过jQuery.post（）方法将复选框的值发送给控制器

Question

我有一个从数据库中显示所有基础设施（它们的名称，描述，性能）的表。该表的最后一列有复选框。选择一些复选框后，我想要一个按钮，它将删除所有选定的基础设施。这里有表格的代码。

<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函数。我会很感激任何帮助。

Answer 1

我与复选框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"); 
    } 

Answer 2

尝试用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;来全局禁用此功能。

Answer 3

我不确定我是否理解你的问题。我认为你正在寻找一种方式来发布选中的基础设施的ID。

在这种情况下，这是我会做什么：

1. 改变输入的名称checkboxs到非变量值（例如“Infrastuktura [@ item.InfrastrukturaID] .myCheckbox”变为“ InfrastukturaID“）

2. 使用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。不能相信数据将永远是你想要的。

Answer 4

是否使用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"); 
    } 
});