ASP.NET MVC中如何在单个视图内同时使用两个模型类？

你的代码存在两个直接导致运行异常的问题：

• 控制器Index方法返回的是List<Project>类型数据，但视图声明绑定的是IEnumerable<ProjectRole>类型，模型类型完全不匹配，会直接抛出绑定错误。
• 要在单视图内使用两个模型的关联数据，标准方案是用视图模型（ViewModel） 封装所需的所有数据，而不是直接传实体类。

1. 补充实体导航属性 #

先修改ProjectRole实体类，添加关联实体的导航属性，方便后续加载关联数据：

public class ProjectRole
{
    public int Id { get; set; }

    [Required]
    public double HourlyRate { get; set; }

    [ForeignKey("Person")]
    public int PersonId { get; set; }
    // 新增Person导航属性
    public Person Person { get; set; }

    [ForeignKey("Project")]
    public int ProjectId { get; set; }
    // 新增Project导航属性
    public Project Project { get; set; }

    [ForeignKey("AppRole")]
    public int RoleId { get; set; }
    // 新增AppRole导航属性
    public AppRole AppRole { get; set; }
}

2. 创建复合视图模型 #

在项目中新建ViewModels文件夹，添加如下复合视图模型类，封装你需要用到的两个模型数据：

public class ProjectCompositeViewModel
{
    // 存储所有项目数据
    public IEnumerable<Project> Projects { get; set; }
    // 存储所有项目角色数据
    public IEnumerable<ProjectRole> ProjectRoles { get; set; }
}

3. 修改控制器逻辑 #

修改ProjectsController的Index方法，加载关联数据后填充视图模型返回：

// 需先引入命名空间
using Microsoft.EntityFrameworkCore;

// GET: Projects
[Authorize(Roles = "Member")]
public async Task<IActionResult> Index()
{
    var viewModel = new ProjectCompositeViewModel
    {
        // 加载项目列表，同时关联加载对应的角色数据
        Projects = await _context.Projects
            .Include(p => p.ProjectRoles)
            .ToListAsync(),
        // 加载项目角色列表，同时关联加载人员、项目数据，方便视图直接取名称
        ProjectRoles = await _context.ProjectRoles
            .Include(pr => pr.Person)
            .Include(pr => pr.Project)
            .ToListAsync()
    };
    return View(viewModel);
}

4. 修改视图绑定逻辑 #

首先替换视图顶部的模型声明，绑定你创建的复合视图模型：

@model Project2.Models.ViewModels.ProjectCompositeViewModel

然后调整列表遍历逻辑，使用视图模型中的ProjectRoles属性，同时直接读取关联实体的名称：

<tbody>
    @foreach (var item in Model.ProjectRoles)
    {
        <tr>
            <td>
                @* 显示人员名称而非ID *@
                @Html.DisplayFor(modelItem => item.Person.Name)
            </td>
            <td>
                @* 显示项目名称而非ID *@
                @Html.DisplayFor(modelItem => item.Project.Name)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.HourlyRate)
            </td>
            <td>
                @* 要显示角色名称可以取 item.AppRole.Name *@
                @Html.DisplayFor(modelItem => item.RoleId)
            </td>
            <td>
                <a asp-action="Edit" asp-route-id="@item.Id">Edit</a> |
                <a asp-action="Details" asp-route-id="@item.Id">Details</a> |
                <a asp-action="Delete" asp-route-id="@item.Id">Delete</a>
            </td>
        </tr>
    }
</tbody>

如果需要在视图中同时展示项目列表，直接遍历Model.Projects即可。

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