Project

My Table
Figure 1: Project Table

The following is the script of the table:

  1. CREATE TABLE [dbo].[Project](
  2. [ProjectID] [int] IDENTITY(1,1) NOT NULL,
  3. [ProjectName] [varchar](50) NULL,
  4. [ProjectLeader] [varchar](50) NULL,
  5. CONSTRAINT [PK_Project] PRIMARY KEY CLUSTERED
  6. (
  7. [ProjectID] ASC
  8. )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
  9. ) ON [PRIMARY]
  11. GO
  12. SET ANSI_PADDING OFF
  13. GO
And the second table is Employee:

table is Employee
Figure 2: Employee Table

The script of the Employee table is:
  1. CREATE TABLE [dbo].[Employee](
  2. [ID] [int] IDENTITY(1,1) NOT NULL,
  3. [Name] [varchar](50) NULL,
  4. [Email] [varchar](500) NULL,
  5. [Country] [varchar](50) NULL,
  6. [ProjectID] [int] NULL,
  7. CONSTRAINT [PK_Employee] PRIMARY KEY CLUSTERED
  8. (
  9. [ID] ASC
  10. )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
  11. ) ON [PRIMARY]
  13. GO
  14. SET ANSI_PADDING OFF
  15. GO
Now create a new Visual Studio Project.

new Visual Studio Project
Figure 3: Creating a new Visual Studio project

internet application
Figure 4: Visual Studio Project

Now right-click on the Project Solution Explorer and Add New ADO.NET Entity Data Model as in the following:

add project
Figure 5: Add New ADO.NET Entity Data Model

click next
Figure 6: Choose Model Contents

clock ok
Figure 7: Connection Properties

Employee project
Figure 8: Choose your Data Connection

finish
Figure 9: Choose Database objects and settings

design
Figure 10: Tables are created

Now see the data in the tables, Project and Employee:

see Data
Figure 11: Added some data

Employee Tables
Figure 12: Employee Table

Now right-click on the Model folder inside your project's Solution Explorer and Add New Item. Now add a new class and name it EmpProject.cs.

Class
Figure 13: New class created

Write the following code snippet.

code
Figure 14: Code written
  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  6. namespace ShowingNestedDataDisplayInMVC4.Models
  7. {
  8. public class EmpProject
  9. {
  10. public Project project { get; set; }
  11. public List<Employee> projectEmployee { get; set; }
  12. }
  13. }
Now right-click on Controller and Add New Controller.

new controller
Figure 15: Add New Controller

project controller
Figure 16: Added Project Controller

Write the following code in the project's Controller:


Figure 17: Code added.
  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. using System.Web.Mvc;
  6. using ShowingNestedDataDisplayInMVC4.Models;
  8. namespace ShowingNestedDataDisplayInMVC4.Controllers
  9. {
  10. public class ProjectController : Controller
  11. {
  12. //
  13. // GET: /Project/
  14. public ActionResult Index()
  15. {
  16. List<EmpProject> prjEMPReport = new List<EmpProject>();
  18. // here MyDatabaseEntities is our data context
  19. using (EmployeeProjectEntities dc = new EmployeeProjectEntities())
  20. {
  21. var prjRecords = dc.Project.OrderByDescending(a => a.ProjectID);
  22. foreach (var i in prjRecords)
  23. {
  24. var empPrjDTL = dc.Employee.Where(a => a.ProjectID == (i.ProjectID)).ToList();
  25. prjEMPReport.Add(new EmpProject { project = i, projectEmployee = empPrjDTL });
  26. }
  27. }
  28. return View(prjEMPReport);
  29. }
  30. }
  31. }
Now right-click on the Index Action method and select Add View.

Add View
Figure 18: Add View

In Index.cshtm write the following code:
  1. @model IEnumerable<ShowingNestedDataDisplayInMVC4.Models.EmpProject>
  3. @{
  4. ViewBag.Title = "Displaying Data In Nested Grid View In MVC4";
  5. WebGrid grid = new WebGrid(source: Model, canSort: false);
  6. }
  8. <style>
  9. #gridT, #gridT tr {
  10. border: 1px solid #0D857B;
  11. }
  13. #nestedT, #nestedT tr {
  14. border: 1px solid #f3f3f3;
  15. }
  17. #nestedT {
  18. margin: 0px 0px 0px 10px;
  19. padding: 5px;
  20. width: 95%;
  21. }
  23. #nestedT th {
  24. font-size: 14px;
  25. font-weight: bold;
  26. background-color: green;
  27. }
  29. .recordHoverEffect {
  30. cursor: pointer;
  31. }
  33. .recordHoverEffect:hover {
  34. background-color: rgb(248, 242, 242);
  35. }
  37. .expandRecordRecord {
  38. background-image: url(/Images/ShowHideImage.png);
  39. background-position-x: -22px;
  40. background-repeat: no-repeat;
  41. }
  43. .collapseRecordRecord {
  44. background-image: url(/Images/ShowHideImage.png);
  45. background-position-x: -2px;
  46. background-repeat: no-repeat;
  47. }
  48. </style>
  49. @section Scripts{
  50. <script>
  51. $(document).ready(function () {
  52. var size = $("#main #gridT > thead > tr >th").size();
  53. $("#main #gridT > thead > tr >th").last().remove();
  54. $("#main #gridT > thead > tr").prepend("<th></th>");
  55. $("#main #gridT > tbody > tr").each(function (i, el) {
  56. $(this).prepend(
  57. $("<td></td>")
  58. .addClass("expandRecord")
  59. .addClass("recordHoverEffect")
  60. .attr('title', "Show Hide Details")
  61. );
  64. var table = $("table", this).parent().html();
  66. $(this).after("<tr><td></td><td style='padding:5px; margin:0px;' colspan='" + (size - 1) + "'>" + table + "</td></tr>");
  67. $("table", this).parent().remove();
  69. $(".recordHoverEffect", this).live("click", function () {
  70. $(this).parent().closest("tr").next().slideToggle(100);
  71. $(this).toggleClass("expandRecord collapseRecord");
  72. });
  73. });
  76. $("#main #gridT > tbody > tr td.expandRecord").each(function (i, el) {
  77. $(this).toggleClass("expandRecord collapseRecord");
  78. $(this).parent().closest("tr").next().slideToggle(100);
  79. });
  81. });
  82. </script>
  83. }
  84. <div id="main" style="padding: 25px; background-color: yellow;">
  85. @grid.GetHtml(
  86. htmlAttributes: new { id = "gridT", width = "900px", style = "background-color:skyblue; color:blue; font-size:14pt; font-family:TimesNewRoman;" },
  87. columns: grid.Columns(
  88. grid.Column("project.ProjectID", "Project ID"),
  89. grid.Column("project.ProjectName", "Project Name"),
  90. grid.Column("project.ProjectLeader", "Project Leader"),
  92. grid.Column(format: (item) =>
  93. {
  94. WebGrid subGrid = new WebGrid(source: item.projectEmployee);
  95. return subGrid.GetHtml(
  96. htmlAttributes: new { id = "nestedT", style = "background-color:red; color:white; font-size:12pt; font-family:verdana;" },
  97. columns: subGrid.Columns(
  98. subGrid.Column("ID", " Employee ID"),
  99. subGrid.Column("Name", "Name"),
  100. subGrid.Column("Email", "Email"),
  101. subGrid.Column("Country", "Country")
  102. )
  103. );
  104. })
  105. )
  106. )
  107. </div>
You can set your view as start up, for this open Route.config inside App_Start Folder and make the following settings:

setting
Figure 19: RouteConfig.cs
  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. using System.Web.Mvc;
  6. using System.Web.Routing;
  8. namespace ShowingNestedDataDisplayInMVC4
  9. {
  10. public class RouteConfig
  11. {
  12. public static void RegisterRoutes(RouteCollection routes)
  13. {
  14. routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
  16. routes.MapRoute(
  17. name: "Default",
  18. url: "{controller}/{action}/{id}",
  19. defaults: new { controller = "Project", action = "Index", id = UrlParameter.Optional }
  20. );
  21. }
  22. }
  23. }
Now run your application:

output
Figure 20: Output

Now go to Project ID to expand the details of this project as in the following:

show hide detail
Figure 21: Expand the details

emp email
Figure 22: After expanding the details

project id
Figure 23: After expanding the details of Project ID 2

employee
Figure 24: Details for Project ID 3

product

Figure 25: Details for Project ID 1, 2 and 3