通過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"); 
    } 
});