ASP.NET MVC：如何将表单绑定至视图模型中的List<RequiredDocument>集合

这个问题本质上是ASP.NET MVC模型绑定里集合绑定的典型场景——要让后端正确识别表单提交的集合数据，关键是要让表单元素的name属性符合MVC模型绑定器的识别规则。我来一步步给你梳理解决方案：

核心原理 #

MVC的模型绑定器依赖带索引的命名格式来识别集合元素，格式为：CollectionName[index].PropertyName（比如RequiredDocuments[0].RequiredCopies）。只要你的表单元素按这个规则命名，后端就能自动把提交的值映射到RequiredDocuments集合对应的元素里。

步骤1：提前初始化ViewModel的RequiredDocuments集合 #

首先要在控制器里给ViewModel的RequiredDocuments赋值，让它和AvailableDocuments一一对应，这样视图才能正确绑定每个元素的属性：

public ActionResult YourFormAction()
{
    var viewModel = new YourViewModel();
    // 从数据库获取可用文档
    viewModel.AvailableDocuments = db.Documents.ToList();
    // 初始化必填文档集合，和可用文档一一匹配
    viewModel.RequiredDocuments = viewModel.AvailableDocuments.Select(doc => new RequiredDocument
    {
        Document = doc,
        RequiredCopies = 1, // 设置默认份数
        IsRequired = false // 默认不勾选
    }).ToList();
    
    return View(viewModel);
}

步骤2：用for循环（或EditorTemplate）生成正确的表单元素 #

方式一：使用for循环（最直接） #

因为RequiredDocuments是List<T>（支持索引访问），我们可以用for循环遍历，借助HtmlHelper方法自动生成符合规则的name属性：

@model YourViewModel

<!-- 用Ajax表单提交，记得引入jquery.unobtrusive-ajax.js -->
@using (Ajax.BeginForm("SubmitDocuments", "YourController", 
    new AjaxOptions { HttpMethod = "POST", OnSuccess = "onSubmitSuccess" }))
{
    @for (int i = 0; i < Model.RequiredDocuments.Count; i++)
    {
        <div class="reqdoc">
            <!-- 绑定RequiredDocuments[i].Document.Id（隐藏域） -->
            @Html.HiddenFor(m => m.RequiredDocuments[i].Document.Id)
            
            <div class="form-check">
                <!-- 绑定RequiredDocuments[i].IsRequired（复选框） -->
                @Html.CheckBoxFor(m => m.RequiredDocuments[i].IsRequired, new { @class = "form-check-input" })
                <label class="form-check-label">
                    @Model.RequiredDocuments[i].Document.Name
                </label>
            </div>
            
            <!-- 绑定RequiredDocuments[i].RequiredCopies（数字输入框） -->
            @Html.TextBoxFor(m => m.RequiredDocuments[i].RequiredCopies, 
                new { @class = "form-control", type = "number", min = "1" })
        </div>
    }
    
    <button type="submit" class="btn btn-primary mt-3">提交需求</button>
}

<script>
function onSubmitSuccess(response) {
    // 处理提交成功后的逻辑，比如提示用户
    alert('文档需求提交成功！');
}
</script>

方式二：使用EditorTemplate（更优雅） #

如果你的表单元素需要复用，可以创建一个EditorTemplate：

1. 在Views/Shared/EditorTemplates文件夹下创建RequiredDocument.cshtml
2. 编写模板内容：

@model RequiredDocument

<div class="reqdoc">
    @Html.HiddenFor(m => m.Document.Id)
    
    <div class="form-check">
        @Html.CheckBoxFor(m => m.IsRequired, new { @class = "form-check-input" })
        <label class="form-check-label">
            @Model.Document.Name
        </label>
    </div>
    
    @Html.TextBoxFor(m => m.RequiredCopies, 
        new { @class = "form-control", type = "number", min = "1" })
</div>

然后在主视图里直接调用EditorFor，它会自动为集合的每个元素生成正确的表单元素：

@model YourViewModel

@using (Ajax.BeginForm("SubmitDocuments", "YourController", 
    new AjaxOptions { HttpMethod = "POST", OnSuccess = "onSubmitSuccess" }))
{
    @Html.EditorFor(m => m.RequiredDocuments)
    
    <button type="submit" class="btn btn-primary mt-3">提交需求</button>
}

步骤3：后端接收绑定的数据 #

在控制器的POST方法里，直接接收ViewModel参数即可，MVC会自动完成绑定：

[HttpPost]
public ActionResult SubmitDocuments(YourViewModel viewModel)
{
    // 这里viewModel.RequiredDocuments已经包含了用户提交的所有数据
    // 编写你的业务逻辑，比如保存到数据库
    
    return Json(new { Success = true, Message = "提交成功" });
}

可选：手动写name属性（不推荐但可行） #

如果你坚持用foreach循环，也可以手动维护索引并设置name属性，但容易出错，示例如下：

@{ int index = 0; }
@foreach (var doc in Model.AvailableDocuments)
{
    <div class="reqdoc">
        <input type="hidden" name="RequiredDocuments[@index].Document.Id" value="@doc.Id" />
        
        <div class="form-check">
            <input type="checkbox" name="RequiredDocuments[@index].IsRequired" 
                class="form-check-input" />
            <label class="form-check-label">@doc.Name</label>
        </div>
        
        <input type="number" name="RequiredDocuments[@index].RequiredCopies" 
            class="form-control" min="1" />
    </div>
    index++;
}

注意事项 #

• 确保引入了jquery.unobtrusive-ajax.js（如果用Ajax.BeginForm），否则Ajax提交不会生效。
• 如果不用Ajax.BeginForm，也可以用纯jQuery手动提交表单，代码示例：

  $('form').submit(function(e) {
      e.preventDefault();
      $.ajax({
          url: $(this).attr('action'),
          type: 'POST',
          data: $(this).serialize(),
          success: function(res) {
              alert(res.Message);
          }
      });
  });
  

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