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

Question

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

当我点击 Remove 按钮时，该行被删除，但是当我返回到 Controller 时，被删除行下方的任何行都不会传输回 Controller ，并且计数比我删除的行少一。例如，如果我有 6 行并删除第 4 行，当我提交回 Controller 时，计数为 3，第 5 行和第 6 行丢失。不知道为什么。下面是我的 View 和 Controller 。

任何帮助将不胜感激。

查看

@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>

Controller

[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 只会在索引器从零开始且连续时绑定(bind)集合。在您的情况下，当您删除第 4 行时，您的索引器为 0、1、2、4 和 5，因此只有前 3 个被绑定(bind)。您可以通过为索引器添加隐藏输入来覆盖此行为，这允许 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>
}

有关绑定(bind)到集合的更多信息，请参阅 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 {

内