MVC AJAX表单提交父模型与多子模型列表问题咨询

这个问题我之前帮好几个开发者排查过，核心问题出在ASP.NET MVC模型绑定处理动态列表的索引机制上——当你用AJAX添加Partial View时，很容易因为控件的name属性重复或者索引不连续，导致模型绑定器把旧记录重复解析一遍，就出现了你说的第二次提交重复的情况。下面给你一步步拆解解决方案：

ASP.NET MVC的模型绑定器识别列表项，依赖的是控件name属性里的连续整数索引（比如Company.Employees[0].Name、Company.Employees[1].Name）。如果动态添加的子项name和已有项重复，或者索引跳号，绑定器就会把重复的name对应的值重复添加到列表里，这就是重复记录的来源。

1. 给Partial View配置正确的绑定前缀 #

首先，你的子模型Partial View必须基于父模型的列表索引生成唯一的name属性。假设父模型Company有List<Employee>类型的Employees属性，后端要写一个返回Partial View的Action，手动设置绑定前缀：

public ActionResult AddEmployee(int index)
{
    // 关键：设置绑定前缀，让Partial View里的控件生成正确的name格式
    ViewData.TemplateInfo.HtmlFieldPrefix = $"Employees[{index}]";
    return PartialView("_EmployeePartial", new Employee());
}

对应的Partial View（_EmployeePartial.cshtml）用强类型辅助方法渲染控件：

@model Employee

<div class="employee-item">
    @Html.HiddenFor(m => m.Id)
    @Html.LabelFor(m => m.Name)
    @Html.EditorFor(m => m.Name)
    @Html.ValidationMessageFor(m => m.Name)
    <button type="button" class="remove-btn">删除</button>
</div>

2. 前端动态计算索引，避免重复 #

前端点击“添加”按钮时，先统计当前已有的子项数量，把这个数量作为新索引传给后端，确保每次添加的子项索引都是连续递增的：

$('.add-employee-btn').click(function() {
    // 统计现有子项数量，作为新的索引
    var currentItemCount = $('.employee-item').length;
    $.ajax({
        url: '@Url.Action("AddEmployee")',
        type: 'GET',
        data: { index: currentItemCount },
        success: function(html) {
            $('#employee-container').append(html);
        }
    });
});

3. 处理删除后的索引连续性（可选但关键） #

如果允许删除子项，删除后会出现索引跳号（比如删了索引1的项，剩下0和2），这时候绑定器会忽略跳号的项，导致提交时丢失数据。可以在删除后重新整理所有子项的name和id属性：

$(document).on('click', '.remove-btn', function() {
    $(this).closest('.employee-item').remove();
    // 重新遍历所有子项，更新索引
    $('.employee-item').each(function(newIndex) {
        // 更新所有输入控件的name属性
        $(this).find('input, select, textarea').each(function() {
            var oldName = $(this).attr('name');
            var newName = oldName.replace(/Employees\[\d+\]/, `Employees[${newIndex}]`);
            $(this).attr('name', newName);
            // 同步更新id属性（保证label和控件的关联）
            var oldId = $(this).attr('id');
            var newId = oldId.replace(/Employees_\d+_/, `Employees_${newIndex}_`);
            $(this).attr('id', newId);
        });
        // 更新label的for属性
        $(this).find('label').each(function() {
            var oldFor = $(this).attr('for');
            var newFor = oldFor.replace(/Employees_\d+_/, `Employees_${newIndex}_`);
            $(this).attr('for', newFor);
        });
    });
});

4. 后端接收模型的注意事项 #

控制器Action要直接接收父模型Company，并且子模型列表要用List<Employee>类型（不要用IEnumerable<Employee>，因为绑定器需要列表的索引器来解析数据）：

[HttpPost]
public ActionResult SaveCompany(Company company)
{
    if (ModelState.IsValid)
    {
        // 执行保存逻辑
        return RedirectToAction("Index");
    }
    return View(company);
}

提交前可以打开浏览器开发者工具（F12），查看表单数据里的name属性，确保没有重复值，且索引是从0开始的连续整数。

内容的提问来源于stack exchange，提问作者Kruti