MVC uses Entity Framework Code First to display one-to-multiple relationships in a beautiful table.

There is a one-to-many relationship between departments and employees. List all departments in a table, and display the names of all employees under the department in each row. As follows:

 

Department and Employee 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; }    }}

 

An Entity Framework context is required, which is derived from the DbContext class:

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

Write a Repository class to get the Department and load all the employees under the Department through Eager Loading:

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();            }        }    }}

 

In 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());        }    }}

 

The strong type view of Employee/Index. cshtml is displayed, and the content is presented using a beautiful table style provided by mingkai.

@ 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: pixel PX; 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 s Olid # 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, Ari Al, 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> Department List </caption> <tr> <th> Department name </th> <Th> address </th> <th> include employee </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> no record at present ~~ </Span>}

When the Employees set attribute of Department is displayed, the set is traversed through the strong-type partial view of Employee/Employees. cshtml to display the Employee name of the Department.

@ 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;"> no employees in this department ~~ </Span>}

 

Configure the connection string in Web. config. The name attribute value is consistent with the EmployeeDbContext class name derived from DbContext:

<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>

 

→ Run. The page displays "no record found currently ~~ ", Because there is no data in the database.
→ Open SQL Server Management Studio and find that the EFSample database and table have been created and some data has been inserted.
→ Run again to see the effect.

□References

Part 3-Entity Framework Code First Approach

A beautiful table style