ASP.NET MVC单视图同时绑定展示数据与新增表单及遍历报错解决

问题根因与解决步骤 #

首先解决两个运行报错 #

你当前的报错是控制器返回值和视图绑定模型类型不匹配导致的，修改如下：

1. 你的GetFirm控制器方法返回的是List<FirmModel>集合，但视图顶部声明的@model models.FirmModel是单个实体类型，这是第二个报错的核心原因。先修改视图顶部的模型声明为集合类型：

@model IEnumerable<models.FirmModel>

2. 第一个报错是你循环语句里的小写models是你项目的命名空间，要改成大写的Model（即视图绑定的传入模型对象），修改后的循环代码：

@foreach(var item in Model)
{
    int status = item.FirmRegistrationStatus;
    // 补充表格行渲染逻辑即可
}

适配同时支持列表展示+Modal新增的需求 #

如果要在同一个页面同时做列表展示和新增表单绑定，推荐用自定义视图模型（ViewModel）的方案，逻辑更清晰：

1. 新建ViewModel类，同时承载列表数据和新增用的空实体：

public class FirmViewModel
{
    // 用于表格渲染的公司列表
    public IEnumerable<FirmModel> FirmList { get; set; }
    // 用于新增表单绑定的空实体
    public FirmModel NewFirm { get; set; }
}

2. 修改GetFirm控制器方法，返回ViewModel对象：

public ActionResult GetFirm()
{
    var viewModel = new FirmViewModel
    {
        FirmList = db.FirmModels.ToList(),
        NewFirm = new FirmModel() // 初始化新增用的空对象
    };
    return View(viewModel);
}

3. 调整视图绑定为新建的ViewModel：

@model 你的项目命名空间.FirmViewModel

4. 表格循环部分调整为遍历列表属性：

<tbody>
@foreach(var item in Model.FirmList)
{
    <tr>
        <td>编辑/打印按钮代码</td>
        <td style="visibility:hidden;">@item.FirmId</td>
        <td>@item.Name</td>
        <td>@item.Contact</td>
    </tr>
}
</tbody>

5. Bootstrap Modal的新增表单直接绑定NewFirm属性即可，示例代码：

<div class="modal fade" id="addFirmModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">新增公司</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                @using (Html.BeginForm("AddFirm", "你的控制器名称", FormMethod.Post))
                {
                    <div class="form-group">
                        @Html.LabelFor(m => m.NewFirm.Name)
                        @Html.TextBoxFor(m => m.NewFirm.Name, new { @class = "form-control" })
                    </div>
                    <div class="form-group">
                        @Html.LabelFor(m => m.NewFirm.Contact)
                        @Html.TextBoxFor(m => m.NewFirm.Contact, new { @class = "form-control" })
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                        <button type="submit" class="btn btn-primary">提交</button>
                    </div>
                }
            </div>
        </div>
    </div>
</div>

如果是简单场景不想新增ViewModel，也可以直接在Modal里写普通表单，给输入框设置和FirmModel字段一致的name属性，提交后后台单独接收参数即可，不需要修改控制器的返回逻辑。

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