ASP.NET MVC Core提交Bootstrap卡片列表至Post方法遇空模型问题

核心原因是模型绑定需要集合元素的name属性遵循Listings[index].PropertyName格式，而直接用foreach循环生成的输入框不会自动添加索引前缀，导致绑定失败。以下是两种可行的解决方案：

方案一：使用for循环生成带索引的输入框 #

利用for循环的索引值，配合asp-for标签助手自动生成符合绑定规则的name属性：

1. 确认ViewModel结构 #

确保你的视图模型包含可绑定的集合属性：

public class HomePageVM
{
    public List<ListingItemVM> Listings { get; set; }
}

public class ListingItemVM
{
    public int Id { get; set; }
    public string Title { get; set; }
    public string Description { get; set; }
    public string ImageUrl { get; set; } // 图片地址，仅展示用
}

2. 编写Razor视图代码 #

@model HomePageVM

<form asp-action="UpdateListings" method="post">
    @for (int i = 0; i < Model.Listings.Count; i++)
    {
        <div class="card mb-3">
            <div class="card-body">
                <!-- 隐藏字段存储条目ID，确保后端能识别要更新的条目 -->
                <input type="hidden" asp-for="Listings[i].Id" />
                
                <div class="mb-3">
                    <label asp-for="Listings[i].Title" class="form-label">标题</label>
                    <input asp-for="Listings[i].Title" class="form-control" />
                    <span asp-validation-for="Listings[i].Title" class="text-danger"></span>
                </div>
                
                <div class="mb-3">
                    <label asp-for="Listings[i].Description" class="form-label">描述</label>
                    <textarea asp-for="Listings[i].Description" class="form-control"></textarea>
                    <span asp-validation-for="Listings[i].Description" class="text-danger"></span>
                </div>
                
                <!-- 图片展示区域 -->
                @if (!string.IsNullOrEmpty(Model.Listings[i].ImageUrl))
                {
                    <img src="@Model.Listings[i].ImageUrl" class="img-fluid rounded" alt="列表图片" />
                }
            </div>
        </div>
    }

    <button type="submit" class="btn btn-primary">提交更新</button>
</form>

方案二：使用EditorTemplate分离卡片逻辑 #

如果卡片结构复杂，可将单个卡片的渲染逻辑抽离为编辑器模板，代码更简洁易维护：

1. 创建编辑器模板 #

在Views/Shared/EditorTemplates目录下新建ListingItemVM.cshtml文件（文件名需与ViewModel类名一致）：

@model ListingItemVM

<div class="card mb-3">
    <div class="card-body">
        <input type="hidden" asp-for="Id" />
        
        <div class="mb-3">
            <label asp-for="Title" class="form-label">标题</label>
            <input asp-for="Title" class="form-control" />
            <span asp-validation-for="Title" class="text-danger"></span>
        </div>
        
        <div class="mb-3">
            <label asp-for="Description" class="form-label">描述</label>
            <textarea asp-for="Description" class="form-control"></textarea>
            <span asp-validation-for="Description" class="text-danger"></span>
        </div>
        
        @if (!string.IsNullOrEmpty(Model.ImageUrl))
        {
            <img src="@Model.ImageUrl" class="img-fluid rounded" alt="列表图片" />
        }
    </div>
</div>

2. 在主视图中调用模板 #

@model HomePageVM

<form asp-action="UpdateListings" method="post">
    <!-- 自动遍历Listings集合，渲染每个编辑器模板 -->
    @Html.EditorFor(m => m.Listings)

    <button type="submit" class="btn btn-primary">提交更新</button>
</form>

关键注意事项 #

1. 初始化集合：在GET动作中必须确保HomePageVM.Listings已被正确初始化（不为null且包含数据），否则循环或模板不会生成任何内容：

public IActionResult EditListings()
{
    var viewModel = new HomePageVM
    {
        Listings = _yourService.GetAllListings() // 从数据源获取列表数据
    };
    return View(viewModel);
}

2. Post动作参数：确保Post动作接收HomePageVM类型参数：

[HttpPost]
public IActionResult UpdateListings(HomePageVM model)
{
    if (ModelState.IsValid)
    {
        // 执行更新逻辑，如保存到数据库
        _yourService.UpdateListings(model.Listings);
        return RedirectToAction(nameof(Index));
    }
    // 验证失败时返回视图，需保证Listings数据完整
    return View(model);
}

3. 检查name属性：可通过浏览器开发者工具查看表单提交数据，确认输入框的name属性格式为Listings[0].Title、Listings[1].Id等，这是模型绑定成功的核心。

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