ASP.NET Framework结合jQuery实现动态表单时，索引重计算问题未正确处理求助

嗨，我看你在做ASP.NET Framework结合jQuery的动态费用表单时，遇到了添加/删除行后索引没法保持连续的问题，这个坑我之前踩过，给你分享下我实测有效的解决方案吧！

问题核心分析 #

咱们要解决的核心是：每次添加或删除费用行后，所有表单元素的name属性（比如Expenses[0].Description）里的索引必须是连续的0、1、2...，这样ASP.NET ModelBinder才能正确把表单数据绑定到你的Expenses集合里。

第一步：整理HTML结构（包含初始行和模板） #

首先，我们需要把初始的费用行（从Model里读取的已存在数据）和一个隐藏的行模板整合到页面里，方便后续克隆：

@model ExpenseApplication.Models.ViewModels.ExpenseFormViewModel

@using (Html.BeginForm("AddExpense", "Employee", FormMethod.Post))
{
    <h2>Create Expense Form</h2>
    @Html.ValidationSummary(true, "", new { @class = "text-danger" })

    <!-- 货币选择等其他表单字段 -->
    <div class="form-group">
        @Html.LabelFor(m => m.Currency, "Currency")
        @Html.DropDownListFor(m => m.Currency, new SelectList(Model.CurrencyOptions), new { @class = "form-control" })
        @Html.ValidationMessageFor(m => m.Currency, "", new { @class = "text-danger" })
    </div>

    <!-- 动态费用行容器 -->
    <div id="expenseData" data-expense-index="@Model.Expenses.Count">
        <!-- 渲染已有的费用行 -->
        @for (int i = 0; i < Model.Expenses.Count; i++)
        {
            <div class="expense-row mb-3">
                <div class="col">
                    @Html.LabelFor(m => m.Expenses[i].Description, "描述")
                    @Html.TextBoxFor(m => m.Expenses[i].Description, new { @class = "form-control" })
                    @Html.ValidationMessageFor(m => m.Expenses[i].Description, "", new { @class = "text-danger" })
                </div>
                <div class="col">
                    @Html.LabelFor(m => m.Expenses[i].ExpenseDate, "日期")
                    @Html.TextBoxFor(m => m.Expenses[i].ExpenseDate, new { @class = "form-control datepicker" })
                    @Html.ValidationMessageFor(m => m.Expenses[i].ExpenseDate, "", new { @class = "text-danger" })
                </div>
                <div class="col">
                    @Html.LabelFor(m => m.Expenses[i].Amount, "金额")
                    @Html.TextBoxFor(m => m.Expenses[i].Amount, new { @class = "form-control" })
                    @Html.ValidationMessageFor(m => m.Expenses[i].Amount, "", new { @class = "text-danger" })
                </div>
                <div class="col align-self-end">
                    <button type="button" class="btn btn-danger remove-row">删除</button>
                </div>
            </div>
        }
    </div>

    <!-- 隐藏的费用行模板，用于克隆 -->
    <div id="expenseRowTemplate" style="display: none;">
        <div class="expense-row mb-3">
            <div class="col">
                @Html.LabelFor(m => m.Expenses[0].Description, "描述")
                @Html.TextBoxFor(m => m.Expenses[0].Description, new { @class = "form-control" })
                @Html.ValidationMessageFor(m => m.Expenses[0].Description, "", new { @class = "text-danger" })
            </div>
            <div class="col">
                @Html.LabelFor(m => m.Expenses[0].ExpenseDate, "日期")
                @Html.TextBoxFor(m => m.Expenses[0].ExpenseDate, new { @class = "form-control datepicker" })
                @Html.ValidationMessageFor(m => m.Expenses[0].ExpenseDate, "", new { @class = "text-danger" })
            </div>
            <div class="col">
                @Html.LabelFor(m => m.Expenses[0].Amount, "金额")
                @Html.TextBoxFor(m => m.Expenses[0].Amount, new { @class = "form-control" })
                @Html.ValidationMessageFor(m => m.Expenses[0].Amount, "", new { @class = "text-danger" })
            </div>
            <div class="col align-self-end">
                <button type="button" class="btn btn-danger remove-row">删除</button>
            </div>
        </div>
    </div>

    <!-- 添加行按钮 -->
    <button type="button" id="addExpenseRow" class="btn btn-primary mt-3">添加费用行</button>
    <button type="submit" class="btn btn-success mt-3 ms-2">提交</button>
}

这里的模板里用[0]作为索引占位符，克隆的时候会替换成当前的正确索引。

第二步：编写jQuery逻辑（添加/删除/重索引） #

接下来是关键的JS部分，核心是删除行后重新遍历所有剩余行，更新它们的索引：

$(document).ready(function() {
    // 绑定添加行事件
    $("#addExpenseRow").click(function() {
        var currentIndex = $("#expenseData").data("expense-index");
        // 克隆模板并替换所有[0]为当前索引
        var rowHtml = $("#expenseRowTemplate").html().replace(/\[0\]/g, "[" + currentIndex + "]");
        // 把新行添加到容器里
        $("#expenseData").append(rowHtml);
        // 更新索引计数器
        $("#expenseData").data("expense-index", currentIndex + 1);
        // 重新解析验证规则，确保新行有客户端验证
        $.validator.unobtrusive.parse("#expenseData");
    });

    // 绑定删除行事件（用委托绑定，确保动态添加的行也能触发）
    $(document).on("click", ".remove-row", function() {
        // 删除当前行
        $(this).closest(".expense-row").remove();
        // 调用重索引函数
        reindexExpenseRows();
        // 重新解析验证规则
        $.validator.unobtrusive.parse("#expenseData");
    });

    // 核心：重索引所有费用行的函数
    function reindexExpenseRows() {
        // 遍历所有剩余的费用行
        $(".expense-row").each(function(newIndex) {
            // 遍历当前行的所有表单元素（input/select/textarea等）
            $(this).find("input, select, textarea, label").each(function() {
                // 更新name属性里的索引
                var oldName = $(this).attr("name");
                if (oldName) {
                    var newName = oldName.replace(/\[(\d+)\]/g, "[" + newIndex + "]");
                    $(this).attr("name", newName);
                }
                // 更新id属性里的索引（避免重复id，影响JS/CSS选择器）
                var oldId = $(this).attr("id");
                if (oldId) {
                    var newId = oldId.replace(/\_(\d+)\_/g, "_" + newIndex + "_");
                    $(this).attr("id", newId);
                }
                // 更新for属性（label的for要对应input的id）
                var oldFor = $(this).attr("for");
                if (oldFor) {
                    var newFor = oldFor.replace(/\_(\d+)\_/g, "_" + newIndex + "_");
                    $(this).attr("for", newFor);
                }
            });
        });
        // 更新容器的索引计数器为当前行数
        $("#expenseData").data("expense-index", $(".expense-row").length);
    }
});

几个关键注意点 #

1. 客户端验证：每次添加或删除行后，一定要调用$.validator.unobtrusive.parse("#expenseData")，不然新添加的行不会触发ASP.NET的客户端验证。
2. id和for属性：ASP.NET生成的表单元素id是类似Expenses_0_Description的格式，删除行后如果不更新id，会出现重复id，可能导致JS或CSS选择器失效，同时label的for属性也要对应更新。
3. 委托绑定事件：删除按钮用$(document).on("click", ".remove-row", ...)而不是直接绑定，这样动态添加的行里的删除按钮也能触发事件。

这样处理后，不管你添加多少行，删除中间任意行，所有剩余行的索引都会自动变成连续的0、1、2...，ModelBinder就能正确绑定数据啦！

备注：内容来源于stack exchange，提问作者hello world