ASP.NET Core 8嵌套视图模型最佳实践及表单提交问题咨询

你遇到的核心问题是表单元素的name属性不符合ASP.NET MVC模型绑定规则：foreach遍历生成的字段名没有集合索引，导致绑定器无法将提交值映射到FileTypes集合中。以下是几种简洁的实现方案：

方案一：用for循环替代foreach（最直接） #

首先确保Section中的FileTypes是List<FileType>格式（如果实体里是ICollection<FileType>，传递给局部视图前用.ToList()转换），然后在局部视图中使用带索引的for循环：

@model Section
@using (Html.BeginForm("SubmitSection", "FormController", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    @Html.HiddenFor(m => m.SectionID) <!-- 传递SectionID，方便后端关联数据 -->
    @for (int i = 0; i < Model.FileTypes.Count; i++)
    {
        @Html.TextBoxFor(
            m => m.FileTypes[i].FilePickers, 
            new { 
                @class = "form-control file-picker", 
                type = "file", 
                multiple = Model.FileTypes[i].IsMultiFileSelect 
            }
        )
    }
    <button type="submit">提交</button>
}

关键细节：

• 表单必须添加enctype="multipart/form-data"，否则IFormFile无法完成绑定
• 用FileTypes[i].FilePickers生成的name属性格式为FileTypes[0].FilePickers，完全符合模型绑定的要求
• 隐藏字段传递SectionID，确保后端能识别当前提交的是哪个分区的数据

方案二：使用EditorTemplate（更简洁，适合复用） #

通过编辑器模板让MVC自动处理集合渲染，无需手动写循环：

1. 在Views/Shared/EditorTemplates目录下创建FileType.cshtml文件（文件名必须与类型名一致）：

@model FileType
@Html.TextBoxFor(
    m => m.FilePickers, 
    new { 
        @class = "form-control file-picker", 
        type = "file", 
        multiple = Model.IsMultiFileSelect 
    }
)
@Html.HiddenFor(m => m.FileID) <!-- 保留原有FileID，用于更新场景 -->

2. 在Section局部视图中直接调用EditorFor渲染整个集合：

@model Section
@using (Html.BeginForm("SubmitSection", "FormController", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    @Html.HiddenFor(m => m.SectionID)
    @Html.EditorFor(m => m.FileTypes)
    <button type="submit">提交</button>
}

MVC会自动遍历FileTypes集合，为每个元素渲染模板内容，并生成带正确索引的name属性，代码简洁且可复用。

后端Action的正确写法 #

控制器Action需接收对应模型，建议使用专门的视图模型分离实体与表单逻辑：

// 定义视图模型
public class SubmitSectionViewModel
{
    public int SectionID { get; set; }
    public List<FileTypeUploadViewModel> FileTypes { get; set; }
}

public class FileTypeUploadViewModel
{
    public int FileID { get; set; }
    public bool IsMultiFileSelect { get; set; }
    public List<IFormFile> FilePickers { get; set; }
}

// 控制器Action
[HttpPost]
public async Task<IActionResult> SubmitSection(SubmitSectionViewModel model)
{
    // 处理文件上传逻辑
    var wwwrootPath = _webHostEnvironment.WebRootPath;
    foreach (var fileType in model.FileTypes)
    {
        if (fileType.FilePickers?.Any() ?? false)
        {
            foreach (var file in fileType.FilePickers)
            {
                var filePath = Path.Combine(wwwrootPath, "uploads", Guid.NewGuid() + Path.GetExtension(file.FileName));
                using (var stream = new FileStream(filePath, FileMode.Create))
                {
                    await file.CopyToAsync(stream);
                }
                // 后续可将文件路径保存到数据库
            }
        }
    }
    return RedirectToAction("Index");
}

额外注意事项 #

• 集合转换：如果实体中FileTypes是ICollection<FileType>，查询时需用.Include(s => s.FileTypes).ToList()转换为List，确保视图能通过索引访问元素
• 大文件配置：若需上传大文件，在Program.cs中添加配置：

builder.Services.Configure<FormOptions>(options =>
{
    options.MultipartBodyLengthLimit = 104857600; // 限制为100MB
});

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