如何在MVC视图中通过ViewModel将两个模型数据展示到单个HTML表格

这个需求很常见，咱们一步步来实现，保证清晰易懂：

1. 先创建对应的ViewModel #

ViewModel是专门为View定制的模型，它能把多个业务模型的需要展示的字段整合到一起，避免直接在View里处理复杂的关联逻辑。咱们创建一个包含所有要展示字段的ViewModel：

public class EmployeeDepartmentViewModel
{
    public int EmployeeId { get; set; }
    public string EmployeeName { get; set; }
    public string City { get; set; }
    public string MobileNo { get; set; }
    public string Email { get; set; }
    public string DepartmentName { get; set; }
}

这里只保留咱们需要在页面上展示的字段，不用把原模型的所有属性都加进来，按需选择就行。

2. 在Controller中准备数据并映射到ViewModel #

接下来要在Controller里把Employee和Department的数据关联起来，然后转换成ViewModel的集合传给View。假设你用Entity Framework来操作数据库，代码示例如下：

public ActionResult Index()
{
    // 替换成你自己的DbContext类名
    using (var dbContext = new YourDbContext())
    {
        // 通过Join关联员工和部门表，筛选并映射到ViewModel
        var employeeDepartmentList = from emp in dbContext.Employees
                                     join dept in dbContext.Departments 
                                     on emp.DepartmentId equals dept.DepartmentId
                                     select new EmployeeDepartmentViewModel
                                     {
                                         EmployeeId = emp.Id,
                                         EmployeeName = emp.EmployeeName,
                                         City = emp.City,
                                         MobileNo = emp.MobileNo,
                                         Email = emp.Email,
                                         DepartmentName = dept.DepartmentName
                                     };

        // 如果你已经给Employee模型配置了Department的导航属性（比如public Department Department { get; set; }），可以用更简洁的写法：
        // var employeeDepartmentList = dbContext.Employees.Include(emp => emp.Department)
        //                                                .Select(emp => new EmployeeDepartmentViewModel
        //                                                {
        //                                                    EmployeeId = emp.Id,
        //                                                    EmployeeName = emp.EmployeeName,
        //                                                    City = emp.City,
        //                                                    MobileNo = emp.MobileNo,
        //                                                    Email = emp.Email,
        //                                                    DepartmentName = emp.Department.DepartmentName
        //                                                });

        // 把数据转换成List后传给View
        return View(employeeDepartmentList.ToList());
    }
}

这段代码的核心是把两个表的数据关联起来，然后将查询结果映射到咱们创建的ViewModel集合中，最后传递给View。

3. 在View中渲染HTML表格 #

最后一步就是在View里接收ViewModel集合，然后渲染成HTML表格。首先在View的顶部指定模型类型：

@model IEnumerable<EmployeeDepartmentViewModel>

然后编写表格的HTML代码，用foreach遍历模型数据：

<table style="border-collapse: collapse; width: 100%;">
    <thead>
        <tr style="background-color: #f2f2f2;">
            <th style="border: 1px solid #ddd; padding: 8px;">员工ID</th>
            <th style="border: 1px solid #ddd; padding: 8px;">员工姓名</th>
            <th style="border: 1px solid #ddd; padding: 8px;">城市</th>
            <th style="border: 1px solid #ddd; padding: 8px;">手机号</th>
            <th style="border: 1px solid #ddd; padding: 8px;">邮箱</th>
            <th style="border: 1px solid #ddd; padding: 8px;">部门名称</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td style="border: 1px solid #ddd; padding: 8px;">@item.EmployeeId</td>
                <td style="border: 1px solid #ddd; padding: 8px;">@item.EmployeeName</td>
                <td style="border: 1px solid #ddd; padding: 8px;">@item.City</td>
                <td style="border: 1px solid #ddd; padding: 8px;">@item.MobileNo</td>
                <td style="border: 1px solid #ddd; padding: 8px;">@item.Email</td>
                <td style="border: 1px solid #ddd; padding: 8px;">@item.DepartmentName</td>
            </tr>
        }
    </tbody>
</table>

这样就能把员工和对应的部门信息展示在同一个表格里了。如果项目里用了Bootstrap之类的UI框架，直接替换表格的样式类就行，核心逻辑不变。

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