ASP.NET Core 2 MVC视图中为已有模型添加新项并提交的实现问题

问题背景 #

现有基于ParticipantModel的视图，模型包含List<ParticipantSpecificFieldsModel>集合，当前仅通过foreach渲染文本展示，需要实现修改现有项+新增集合项并完整提交到控制器的功能。

模型代码 #

public class ParticipantModel
{
    public List<ParticipantSpecificFieldsModel>? ParticipantSpecificFieldsModel { get; set; }
}

public class ParticipantSpecificFieldsModel
{
    public string? FieldName { get; set; }
    public string? FieldValue { get; set; }
}

解决方案 #

一、修正现有集合的表单渲染 #

原视图仅用span展示数据，无法提交修改。需改用带索引的表单控件，让ASP.NET MVC能正确绑定集合：

@using (Html.BeginForm("Update", "Client", FormMethod.Post, new { id = "formUpdate", enctype = "multipart/form-data" }))
{
    <!-- 渲染现有可编辑项 -->
    @if (Model.ParticipantSpecificFieldsModel != null && Model.ParticipantSpecificFieldsModel.Count > 0)
    {
        @for (int i = 0; i < Model.ParticipantSpecificFieldsModel.Count; i++)
        {
            <div style="float:left; width:80%; margin-bottom:8px;" class="field-item">
                <div class="col-2" style="float:left;">
                    @Html.EditorFor(model => model.ParticipantSpecificFieldsModel[i].FieldName, 
                        new { htmlAttributes = new { @class = "form-control" } })
                </div>
                <div class="col-2" style="float:left;">
                    @Html.EditorFor(model => model.ParticipantSpecificFieldsModel[i].FieldValue, 
                        new { htmlAttributes = new { @class = "form-control" } })
                </div>
                <div class="col-1" style="float:left;">
                    <button type="button" class="btn btn-danger remove-field">删除</button>
                </div>
            </div>
        }
    }

二、添加动态新增项的模板与JS逻辑 #

通过模板克隆+索引替换实现动态新增，保证表单控件的name符合ASP.NET集合绑定规则：

<!-- 新增项模板（默认隐藏） -->
    <div id="fieldTemplate" style="display:none;">
        <div style="float:left; width:80%; margin-bottom:8px;" class="field-item">
            <div class="col-2" style="float:left;">
                <input type="text" name="ParticipantSpecificFieldsModel[__INDEX__].FieldName" class="form-control" />
            </div>
            <div class="col-2" style="float:left;">
                <input type="text" name="ParticipantSpecificFieldsModel[__INDEX__].FieldValue" class="form-control" />
            </div>
            <div class="col-1" style="float:left;">
                <button type="button" class="btn btn-danger remove-field">删除</button>
            </div>
        </div>
    </div>

    <!-- 新增按钮 -->
    <button type="button" id="addNewField" class="btn btn-primary mt-3">添加新字段</button>

    <!-- 提交按钮 -->
    <button type="submit" class="btn btn-success mt-3 ms-2">保存修改</button>
}

<script>
    // 新增字段逻辑
    document.getElementById('addNewField').addEventListener('click', function() {
        const fieldCount = document.querySelectorAll('.field-item').length;
        const template = document.getElementById('fieldTemplate').innerHTML;
        const newField = template.replace(/__INDEX__/g, fieldCount);
        document.getElementById('formUpdate').insertAdjacentHTML('beforeend', newField);
    });

    // 删除字段逻辑（事件委托）
    document.getElementById('formUpdate').addEventListener('click', function(e) {
        if (e.target.classList.contains('remove-field')) {
            e.target.closest('.field-item').remove();
            reindexFields(); // 删除后重新整理索引，保证绑定稳定
        }
    });

    // 重新整理字段索引
    function reindexFields() {
        const fields = document.querySelectorAll('.field-item');
        fields.forEach((item, index) => {
            const nameInput = item.querySelector('input[name*="FieldName"]');
            const valueInput = item.querySelector('input[name*="FieldValue"]');
            nameInput.name = nameInput.name.replace(/\[\d+\]/, `[${index}]`);
            valueInput.name = valueInput.name.replace(/\[\d+\]/, `[${index}]`);
        });
    }
</script>

三、控制器接收逻辑 #

确保控制器方法正确接收ParticipantModel参数：

[HttpPost]
public IActionResult Update(ParticipantModel model)
{
    if (ModelState.IsValid)
    {
        // 处理修改/新增的集合项逻辑
        // 例如：保存到数据库
        return RedirectToAction("Index");
    }
    // 验证失败时返回视图，保留用户输入
    return View(model);
}

核心注意事项 #

1. 集合绑定规则：表单控件的name必须遵循集合名[索引].属性名格式，ASP.NET才能将表单值绑定到List集合。
2. 禁用foreach渲染：foreach无法生成带索引的name属性，必须用for循环或手动指定name。
3. 索引连续性：删除项后重新整理索引，避免因索引断裂导致部分项无法绑定（ASP.NET支持非连续索引，但连续索引更稳定）。

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