使用Javascript動態地從html表中刪除行

Question

我是MVC和JavaScript的新手，所以請原諒我的基本問題。我正在編寫一個顯示多行數據的視圖，並在每行的末尾顯示一個「刪除」按鈕。點擊後，該按鈕將運行一些使用.remove（）刪除行的JavaScript。

當我單擊刪除按鈕時，該行被刪除，但是當我返回到控制器時，被刪除的行下面的任何行都不會傳回控制器，並且計數小於我刪除的行。例如，如果我有6行並刪除第4行，當我提交回控制器時，計數爲3，行5和行6丟失。不知道爲什麼。以下是我的視圖和控制器。

任何幫助將不勝感激。

查看

@using (Html.BeginForm("Edit", "Contacts", FormMethod.Post)) 
{ 
    <table> 
     <tr> 
      <th><label>Last Name</label></th> 
      <th><label>First Name</label></th> 
      .... // more table headings 
      <th></th> 
     </tr> 
     @if (Model != null && Model.Count > 0) 
     { 
      int j = 0; 
      foreach (var i in Model) 
      { 
       <tr> 
        <td> 
         @Html.TextBoxFor(a => a[j].LASTNAME) 
         @Html.HiddenFor(a => a[j].DOB_NBR) 
         @Html.ValidationMessageFor(a => a[j].LASTNAME) 
        </td> 
        <td> 
         @Html.TextBoxFor(a => a[j].FIRSTNAME) 
         @Html.ValidationMessageFor(a => a[j].FIRSTNAME) 
        </td> 
        .... // more controls 
        <td><button type="button" id="btnDelete" class="deleteContact btn btn btn-danger btn-xs">Remove</button></td> 
       </tr> 
       j++; 
      } 
     } 
    </table> 
    <input type="button" class="add-button btn btn-default" name="add" value="Add" /> 
    <input type="submit" name="submitAction" value="Submit" class="btn btn-primary" onclick="return confirm('Please double check all information before submitting. Submit Notification?')" /> 
} 
@section Scripts { 
    @Scripts.Render("~/bundles/jqueryval") 
} 
<script src="~/Scripts/jquery-1.10.2.min.js"></script> 
<script src="~/Scripts/jquery.validate.min.js"></script> 
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script> 
<script type="text/javascript"> 
    $(document).on("click", ".deleteContact", function() { 
     $(this).closest("tr").remove(); 
    }); 
</script> 

控制器

[HttpPost] 
[ValidateAntiForgeryToken] 
public ActionResult Edit(string submitAction, List<ENTITY_CONTACTS> entity_Contacts) 
{ 
    // entity_Contacts is not bound with all items in the collection 
} 

Answer 1

默認情況下，DefaultModelBinder將只綁定集合時的索引是從零開始的連續和。在你的情況下，當你刪除第四行時，你的索引器是0,1,2,4和5，所以只有前3個被綁定。您可以通過爲索引器添加隱藏輸入來覆蓋此行爲，這允許DefaultModelBinder匹配非連續索引器。

更改您的循環來

for (int i = 0; i < Model.Count; i++) // do not use a foreach loop 
{ 
    <tr class="contacts-record"> 
     <td> 
      <input type="hidden" name="Index" value="@i" /> // add this 
      @Html.TextBoxFor(a => a[i].LASTNAME) 
      @Html.HiddenFor(a => a[i].DOB_NBR) 
      @Html.ValidationMessageFor(a => a[i].LASTNAME, "", new { @class = "text-danger" }) 
     </td> 
     .... // other td elements 
    <tr> 
} 

有關綁定到集合的詳細信息，請參閱Model Binding To A List，如果你也在尋找動態地添加項目到收藏，參考答案here和here

方注意：從「刪除」按鈕中刪除id屬性。您創建的重複id屬性是無效的HTML。還要刪除jquery.validate.min.js和jquery.validate.unobtrusive.min.js的腳本，因爲您已經使用@Scripts.Render("~/bundles/jqueryval")添加了它們，但是您需要確保jquery-1.10.2.min.js先呈現，最好使用@Scripts.Render("~/bundles/jquery")。另外，所有的腳本應該在@section Scripts {