ASP.NET Core MVC 动态表单：正确绑定可增删的嵌套对象列表-js教程-PHP中文网

ASP.NET Core MVC 动态表单：正确绑定可增删的嵌套对象列表

本文详解如何在 asp.net core mvc 中实现动态添加/删除嵌套对象（如 productfeatures）并确保模型绑定正常工作——关键在于提交前对 input name 属性进行连续索引重排，而非依赖稀疏或复用的序号。

本文详解如何在 asp.net core mvc 中实现动态添加/删除嵌套对象（如 productfeatures）并确保模型绑定正常工作——关键在于提交前对 input name 属性进行连续索引重排，而非依赖稀疏或复用的序号。

在 ASP.NET Core MVC 中，模型绑定器要求 List<t></t> 类型的集合参数必须使用连续、从 0 开始的整数索引（如 Product.ProductFeatures[0].TitleName、Product.ProductFeatures[1].Value），且不能跳号或重复。你当前的 JS 实现通过 removedItems 缓存已删除索引并复用它们，虽节省 ID，却破坏了绑定所需的索引连续性：当用户删除中间项（如索引 1）后，剩余项仍保留原名（如 [0] 和 [2]），导致模型绑定器忽略 [2]（因它期待 [1]），最终仅绑定首项。

✅ 正确解法是：每次删除后，立即对所有现存 DOM 元素重新编号，使其 name 属性严格匹配当前视觉顺序（0, 1, 2…）。以下是优化后的完整 JavaScript 实现：

let itemCount = 0;

$('#cmdAdd1').click(function () {
    addNewFeature();
});

function addNewFeature() {
    const index = itemCount++;
    const newItem = `
        <div id="item${index}" class="input-group mb-2">
            <input id="title${index}" name="Product.ProductFeatures[${index}].TitleName" placeholder="عنوان" class="form-control" type="text"><input id="value${index}" name="Product.ProductFeatures[${index}].Value" placeholder="مقدار" class="form-control" type="text"><button type="button" class="btn btn-danger remove-feature" data-index="${index}">
                حذف ویژگی
            </button>
        </div>`;

    $('#features').append(newItem);
}

// 使用事件委托避免重复绑定（推荐）
$(document).on('click', '.remove-feature', function () {
    const index = $(this).data('index');
    $('#item' + index).remove();
    reIndexItems(); // 删除后立即重排
});

function reIndexItems() {
    $('#features .input-group').each(function (i) {
        const $group = $(this);
        const newId = 'item' + i;

        // 更新容器 ID
        $group.attr('id', newId);

        // 更新两个文本框的 name 属性
        $group.find('input[type="text"]').each(function () {
            const oldName = $(this).attr('name');
            const fieldName = oldName.split('.').pop(); // 获取 TitleName 或 Value
            $(this).attr('name', `Product.ProductFeatures[${i}].${fieldName}`);
        });

        // 更新删除按钮的 data-index
        $group.find('.remove-feature').data('index', i);
    });
}

? 关键改进说明：

✅ 移除状态管理：不再维护 removedItems 数组，彻底规避索引复用逻辑；
✅ 事件委托：使用 $(document).on('click', ...) 绑定删除按钮，避免为每个动态元素重复绑定事件；
✅ 精准重排：reIndexItems() 遍历当前所有 .input-group，按实际 DOM 顺序（i）重写 name 和 data-index，确保服务端接收的索引绝对连续；
✅ 语义化结构：使用 <button></button> 替代 <input type="button">，更符合 HTML5 规范。

? 后端注意事项：
确保控制器 Action 接收参数类型与模型一致：

[HttpPost]
public IActionResult Create([Bind("Product")] ProductViewModel model)
{
    // model.Product.ProductFeatures 将自动绑定为完整 List<productfeature>
    // 即使用户删除中间项，只要前端 name 索引连续，绑定即成功
}</productfeature>

⚠️ 额外建议：