ASP.NET Core表单中用部分视图处理列表的最佳方案

ASP.NET Core确实有内置机制解决这个问题，核心是利用模型绑定的索引规则和部分视图的模型上下文传递，无需额外依赖第三方库。

核心逻辑 #

ASP.NET Core的模型绑定要求集合类型的表单字段命名遵循Parent.CollectionName[index].PropertyName格式，动态添加子项时，只需确保新生成的字段名符合该规则即可完成自动绑定。

具体实现步骤 #

1. 定义基础模型 #

public class Member
{
    public List<MemberChild> Children { get; set; } = new List<MemberChild>();
    // 其他主表单属性
}

public class MemberChild
{
    public string Name { get; set; }
    // 其他子项属性
}

2. 主视图渲染已有子项并准备动态模板 #

主视图（MemberForm.cshtml）中，通过传递字段前缀给部分视图，让已有子项的表单字段自动生成符合规则的name属性：

@model Member

<form asp-action="SaveMember">
    <!-- 主表单其他字段 -->
    
    <div id="children-container">
        @for (int i = 0; i < Model.Children.Count; i++)
        {
            @await Html.PartialAsync("_MemberChildForm", Model.Children[i], new ViewDataDictionary(ViewData)
            {
                TemplateInfo = new TemplateInfo { HtmlFieldPrefix = $"Children[{i}]" }
            })
        }
    </div>

    <button type="button" id="add-child-btn">添加子项</button>
    <button type="submit">提交表单</button>
</form>

3. 调整部分视图（_MemberChildForm.cshtml） #

部分视图无需硬编码字段名，直接使用ASP.NET Core的表单辅助方法，它会自动继承主视图传递的字段前缀：

@model MemberChild

<div class="child-item">
    <div class="form-group">
        <label asp-for="Name"></label>
        <input asp-for="Name" class="form-control" />
        <span asp-validation-for="Name" class="text-danger"></span>
    </div>
    <!-- 其他子项字段 -->
    <button type="button" class="remove-child-btn">删除</button>
</div>

4. 动态添加子项的JS逻辑 #

通过AJAX请求后端获取带正确字段前缀的空白部分视图，同时处理子项删除后的索引重置（可选，ASP.NET Core支持非连续索引，但连续索引更规范）：

$(document).ready(function() {
    $('#add-child-btn').click(function() {
        var currentCount = $('.child-item').length;
        $.get(`/Member/GetEmptyChildForm?index=${currentCount}`, function(html) {
            $('#children-container').append(html);
        });
    });

    $('#children-container').on('click', '.remove-child-btn', function() {
        $(this).closest('.child-item').remove();
        reindexChildFields();
    });
});

function reindexChildFields() {
    $('.child-item').each(function(index) {
        var prefix = `Children[${index}]`;
        // 更新表单控件的name和id
        $(this).find('input, select, textarea').each(function() {
            var newName = $(this).attr('name').replace(/Children\[\d+\]/, prefix);
            var newId = $(this).attr('id').replace(/Children_\d+_/, `Children_${index}_`);
            $(this).attr({ name: newName, id: newId });
        });
        // 更新label的for属性
        $(this).find('label').each(function() {
            var newFor = $(this).attr('for').replace(/Children_\d+_/, `Children_${index}_`);
            $(this).attr('for', newFor);
        });
        // 更新验证消息的关联字段
        $(this).find('[data-valmsg-for]').each(function() {
            var newValMsgFor = $(this).attr('data-valmsg-for').replace(/Children\[\d+\]/, prefix);
            $(this).attr('data-valmsg-for', newValMsgFor);
        });
    });
}

5. 后端提供空白子视图接口 #

在MemberController中添加Action，返回带指定字段前缀的空白部分视图：

public IActionResult GetEmptyChildForm(int index)
{
    var emptyChild = new MemberChild();
    return PartialView("_MemberChildForm", emptyChild, new ViewDataDictionary(ViewData)
    {
        TemplateInfo = new TemplateInfo { HtmlFieldPrefix = $"Children[{index}]" }
    });
}

关键说明 #

• 字段前缀传递：通过ViewDataDictionary的TemplateInfo.HtmlFieldPrefix，让部分视图的表单辅助方法自动生成Children[0].Name这类符合绑定规则的字段名。
• 验证兼容：只要字段名正确，客户端和服务器端的数据验证都会自动生效，无需额外配置。
• 索引灵活性：ASP.NET Core支持非连续索引，但删除子项后重置索引能避免字段名混乱，提升可维护性。

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