ASP.NET Core MVC表单提交时删除行后数据无法完整回传求助

问题根源 #

ASP.NET Core MVC的集合模型绑定依赖连续的、从0开始的整数索引。删除中间行后，剩余行的索引出现断层（比如原5行删第3行后，索引变成0、1、3、4），模型绑定器会直接忽略索引不连续的项，导致仅能接收到前2行数据。

正确解决步骤 #

1. 确保行内包含索引隐藏字段 #

渲染表格时，每行必须添加name为MandateCheckDetailsList.Index的隐藏字段，同时所有表单控件的name遵循MandateCheckDetailsList[索引].属性名格式：

@for (int i = 0; i < Model.MandateCheckDetailsList.Count; i++)
{
    <tr data-index="@i">
        <td>
            <input type="hidden" name="MandateCheckDetailsList.Index" value="@i" />
            <input asp-for="MandateCheckDetailsList[i].YourProperty1" />
        </td>
        <td>
            <input asp-for="MandateCheckDetailsList[i].YourProperty2" />
        </td>
        <td>
            <button type="button" class="delete-row">删除</button>
        </td>
    </tr>
}

2. 删除行后重新索引的JS代码 #

删除行后，遍历剩余行更新索引值和所有表单控件的name属性，保证索引从0开始连续：

$('.delete-row').click(function() {
    // 删除当前行
    $(this).closest('tr').remove();
    
    // 重新索引剩余行
    $('tr[data-index]').each(function(newIndex) {
        var $row = $(this);
        // 更新行的索引标记
        $row.attr('data-index', newIndex);
        
        // 更新索引隐藏字段的value
        $row.find('input[name="MandateCheckDetailsList.Index"]').val(newIndex);
        
        // 更新所有表单控件的name属性
        $row.find('[name^="MandateCheckDetailsList["]').each(function() {
            var oldName = $(this).attr('name');
            var newName = oldName.replace(/MandateCheckDetailsList\[\d+\]/, `MandateCheckDetailsList[${newIndex}]`);
            $(this).attr('name', newName);
        });
    });

    // 若页面有客户端验证，删除后重新解析验证规则
    $('form').removeData('validator').removeData('unobtrusiveValidation');
    $.validator.unobtrusive.parse('form');
});

3. 常见错误排查 #

• 禁止手动修改asp-for生成的name属性，必须通过JS动态替换索引
• 确认索引隐藏字段的name严格为MandateCheckDetailsList.Index（集合名+.Index）
• 提交前通过浏览器F12检查所有表单控件的name，确保索引是0、1、2、3连续递增的

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