Question

我是MVC和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 {

内

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

1 个答案: