.NET MVC实现类似Ruby on Rails form_for的嵌套表单问题

1. 先确认视图模型与初始化逻辑 #

你的CreateBlogVM必须采用可实例化的集合类型，不能用接口，同时要在GET请求时初始化集合：

public class CreateBlogVM
{
    public Blog Blog { get; set; }
    // 必须用List<T>，模型绑定器无法直接实例化IEnumerable<T>
    public List<Post> Posts { get; set; } = new List<Post>();

    public CreateBlogVM()
    {
        // GET请求时默认初始化一个Post，用于渲染初始字段
        Posts.Add(new Post());
    }
}

2. 视图用强类型助手生成正确name属性 #

不要手动写input标签，用Html.TextBoxFor这类强类型助手结合带索引的for循环，MVC会自动生成Posts[0].Title格式的name：

@model CreateBlogVM

@using (Html.BeginForm("Create", "Blog", FormMethod.Post))
{
    <!-- Blog基础字段 -->
    <div>
        @Html.LabelFor(m => m.Blog.Title)
        @Html.TextBoxFor(m => m.Blog.Title)
    </div>

    <!-- 循环渲染Post字段 -->
    <div id="posts-container">
        @for (int i = 0; i < Model.Posts.Count; i++)
        {
            <div class="post-item">
                @Html.LabelFor(m => m.Posts[i].Title)
                @Html.TextBoxFor(m => m.Posts[i].Title)

                @Html.LabelFor(m => m.Posts[i].Content)
                @Html.TextAreaFor(m => m.Posts[i].Content)

                <button type="button" class="remove-post">删除</button>
            </div>
        }
    </div>

    <button type="button" id="add-post">添加新文章</button>
    <button type="submit">提交</button>
}

这样生成的input标签name会自动符合模型绑定要求，POST提交时Posts就能正确接收数据。

3. 动态添加/删除Post的jQuery实现 #

如果需要动态增减Post字段，要手动维护name属性的索引格式，步骤如下：

首先添加隐藏的Post模板：

<!-- 隐藏的模板，用于克隆生成新字段 -->
<div id="post-template" style="display:none;">
    <div class="post-item">
        <label>文章标题</label>
        <input type="text" name="Posts[{index}].Title" />

        <label>文章内容</label>
        <textarea name="Posts[{index}].Content"></textarea>

        <button type="button" class="remove-post">删除</button>
    </div>
</div>

然后编写jQuery逻辑：

$(function() {
    // 添加新Post
    $('#add-post').click(function() {
        var container = $('#posts-container');
        var newIndex = container.find('.post-item').length;
        // 克隆模板并替换占位符为实际索引
        var newPost = $('#post-template').html().replace(/{index}/g, newIndex);
        container.append(newPost);
    });

    // 删除Post并重新整理索引
    $(document).on('click', '.remove-post', function() {
        $(this).closest('.post-item').remove();
        // 遍历剩余Post项，更新所有字段的索引
        $('#posts-container .post-item').each(function(index) {
            $(this).find('[name^="Posts["]').each(function() {
                var oldName = $(this).attr('name');
                var newName = oldName.replace(/Posts\[(\d+)\]/, 'Posts[' + index + ']');
                $(this).attr('name', newName);
            });
        });
    });
});

关键注意：动态生成的字段name必须严格遵循集合名[连续索引].属性名格式，删除后要重新整理索引，不能出现断层（比如0、2），否则模型绑定器会忽略断层后的项。

4. 控制器POST Action写法 #

确保参数直接接收CreateBlogVM：

[HttpPost]
public ActionResult Create(CreateBlogVM model)
{
    if (ModelState.IsValid)
    {
        // 执行Blog与Posts的保存逻辑
        return RedirectToAction("Index");
    }
    // 验证失败返回视图时，确保Posts集合不为空
    model.Posts ??= new List<Post>();
    if (model.Posts.Count == 0) model.Posts.Add(new Post());
    return View(model);
}

常见坑点总结 #

• 禁止用IEnumerable<Post>作为集合类型，必须用List<T>
• 必须用带索引的for循环渲染字段，不能用foreach（foreach无法生成正确的索引格式）
• 动态字段的name必须严格匹配Posts[N].XXX格式
• 删除字段后必须重新整理索引，避免断层

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