MVC使用Entity Framework Code First,用漂亮表格显示1对多关系

部门和职员是1对多关系。用一个表格列出所有部门，并且在每行显示该部门下的所有职员名称。如下：

部门和职员的Model：

using System.Collections.Generic;

namespace MvcApplication1.Models
{
    public class Department
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Location { get; set; }

        public List<Employee>  Employees { get; set; }
    }
}

namespace MvcApplication1.Models
{
    public class Employee
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Gender { get; set; }
        public  int Salary { get; set; }

        public Department Department { get; set; }
    }
}

需要一个Entity Framework的上下文，具体是派生于DbContext类：

using System.Data.Entity;

namespace MvcApplication1.Models
{
    public class EmployeeDbContext : DbContext
    {
        public DbSet<Department> Departments { get; set; }
        public DbSet<Employee> Employees { get; set; }
    }
}

写一个Repository类，获取Department的同时，通过Eager Loading把该Department下的所有Employee加载下来：

using System.Collections.Generic;
using System.Linq;
using MvcApplication1.Models;

namespace MvcApplication1.Repository
{
    public class EmployeeRepository
    {
        public List<Department> GetDepartments()
        {
            using (EmployeeDbContext employeeDbContext = new EmployeeDbContext())
            {
                return employeeDbContext.Departments.Include("Employees").ToList();
            }
        }
    }
}

EmployeeController中：

using System.Web.Mvc;
using MvcApplication1.Repository;

namespace MvcApplication1.Controllers
{
    public class EmployeeController : Controller
    {
        EmployeeRepository employeeRepository = new EmployeeRepository();
        public ActionResult Index()
        {
            return View(employeeRepository.GetDepartments());
        }

    }
}

Employee/Index.cshtml强类型视图显示，使用由明凯提供的一个漂亮表格样式呈现内容。

@model IEnumerable<MvcApplication1.Models.Department>

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<style type="text/css">
/* CSS Document */
body {
    font: normal 11px auto "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    color: #4f6b72;
    background: #E6EAE9;
}
a {
    color: #c75f3e;
}
#mytable {
    width: 450px;
    padding: 0;
    margin: 0;
}
caption {
    padding: 0 0 5px 0;
    width: 450px;
    font: italic 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    text-align: center;
}
th {
    font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    color: #4f6b72;
    border-right: 1px solid #C1DAD7;
    border-bottom: 1px solid #C1DAD7;
    border-top: 1px solid #C1DAD7;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-align: center;
    padding: 6px 6px 6px 12px;
    background: #CAE8EA url(images/bg_header.jpg) no-repeat;
}
th.nobg {
    border-top: 0;
    border-left: 0;
    border-right: 1px solid #C1DAD7;
    background: none;
}
td {
    border-right: 1px solid #C1DAD7;
    border-bottom: 1px solid #C1DAD7;
    background: #fff;
    font-size:11px;
    padding: 6px 6px 6px 12px;
    color: #4f6b72;
    text-align: center;
}
td.alt {
    background: #F5FAFA;
    color: #797268;
}
th.spec {
    border-left: 1px solid #C1DAD7;
    border-top: 0;
    background: #fff url(images/bullet1.gif) no-repeat;
    font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
}
th.specalt {
    border-left: 1px solid #C1DAD7;
    border-top: 0;
    background: #f5fafa url(images/bullet2.gif) no-repeat;
    font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    color: #797268;
}
/*---------for IE 5.x bug*/
html>body td{ font-size:11px;}
</style>

@if (Model.Count() > 0)
{
    <table id="mytable" cellspacing="0">
        <caption>部门列表</caption>
        <tr>
            <th>部门名称</th>
            <th>地址</th>
            <th>包含员工</th>
        </tr>
        @foreach (var item in Model)
        {
            <tr>
                <td class="alt">@item.Name</td>
                <td class="alt">@item.Location</td>
                <td class="alt">
                    @{ Html.RenderPartial("Employees", @item.Employees);}
                </td>
            </tr>
        }
    </table>
}
else
{
  <span>暂无记录~~</span>
}

当显示Department的Employees集合属性的时候，我们通过Employee/Employees.cshtml强类型部分视图遍历集合，显示该部门下的职员名称。

@model IEnumerable<MvcApplication1.Models.Employee>

@if (Model.Count() > 0)
{
    var result = string.Empty;
    foreach (var item in Model)
    {
        result += item.Name + ",";
    }
    <span>@result.Substring(0, @result.Length -1)</span>
}
else
{
   <span style="color: red;">该部门下暂无员工~~</span>
}

配置Web.config中的连接字符串,其中name属性值与派生于DbContext的EmployeeDbContext类名一致:

<connectionStrings>
   ...
   <add name="EmployeeDbContext"
       connectionString="Data Source=.;User=some user name;Password=some password;Initial Catalog=EFSample;Integrated Security=True"
       providerName="System.Data.SqlClient"/>
  </connectionStrings>

→运行，页面显示"暂无记录~~",因为数据库中还没数据。
→打开Sql Server Management Studio，发现已经创建好了EFSample数据库以及表，插入一些数据。
→再次运行，即可看到效果。

□ 参考资料

Part 3 - Entity Framework Code First Approach

一款漂亮的表格样式