使用 Javascript 从 html 表中动态删除行

Question

我是 MVC 和 JavaScript 的新手，所以请原谅我的基本问题。我正在编写一个显示多行数据的视图，并在每行的末尾显示一个删除按钮。单击时，该按钮将运行一些 JavaScript，该 JavaScript 使用 .remove() 删除该行。

当我单击“删除”按钮时，该行被删除，但是当我返回控制器时，被删除行下方的任何行都不会传输回控制器，并且计数比我删除的行少一。例如，如果我有 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 只会在索引器从零开始且连续时绑定集合。在您的情况下，当您删除第 4 行时，您的索引器是 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 {里面