Use Multiple View And Tables In ASP.NET MVC

In this article we will learn how to use multiple tables in ASP.NET MVC.

Before coming to this tutorial go through Data Access from databse using Entity framework. Here we will take two tables named stdDepartment and Student.

  1. Go to your Sql Server Management System and execute following Query:
    1. Create table stdDepartment(Id int primary key identity, Name nvarchar(50))  
    2. Insert into stdDepartment values('Teacher')  
    3. Insert into stdDepartment values('HOD')  
    4. Insert into stdDepartment values('Professor')  
    5. Create Table Student(StudentID int identity primary key, StudentName nvarchar(50), Gender nvarchar(50), SchoolName nvarchar(50))  
    6. Alter table Student add DepartmentId int  
    7. Alter table Student  
    8. add foreign key(DepartmentId)  
    9. references stdDepartment(Id)  
    10. Insert into Student values('Munesh''Male''VIT', 1)  
    11. Insert into Student values('Rahul''Male''ABC', 2)  
    12. Insert into Student values('Reet''Female''XYZ', 2)  
    13. Insert into Student values('Anshuman''Male''PQR', 3)  
    14. Insert into Student values('Simi''Female''NIT', 3)  
    15. Insert into Student values('Nency''Female''MIT', 2)  
    16. Insert into Student values('XYZ''Male''PQR', 1)  
  2. What processes we will do here:

    1. When we run this application first we will show the entire department Name, with the Link.
    2. When we click on Department hyperlink this should render to the Name List for that specific Department with hyper link.
    3. When we Click on This name hyper Link it should render to the detail of that name.

  3. Implement this Process

    1. Go to your MVC application and right click on Models folder and add a class as “Student.cs”. Write the following code:
      1. using System;  
      2. using System.Collections.Generic;  
      3. using System.Linq;  
      4. using System.Web;  
      5. using System.ComponentModel.DataAnnotations.Schema;  
      6. namespace MvcApplication1.Models  
      7. {  
      8.     [Table("Student")]  
      9.     public class Student  
      10.     {  
      11.         public int StudentId  
      12.         {  
      13.             get;  
      14.             set;  
      15.         }  
      16.         public string StudentName  
      17.         {  
      18.             get;  
      19.             set;  
      20.         }  
      21.         public string Gender  
      22.         {  
      23.             get;  
      24.             set;  
      25.         }  
      26.         public string SchoolName  
      27.         {  
      28.             get;  
      29.             set;  
      30.         }  
      31.         public string DepartmentId  
      32.         {  
      33.             get;  
      34.             set;  
      35.         }  
      36.     }  
      37. }  
    2. Go to your MVC application and right click on Models folder and adda class as “Department.cs”. Write the following code.


      1. using System;  
      2. using System.Collections.Generic;  
      3. using System.Linq;  
      4. using System.Web;  
      5. using System.ComponentModel.DataAnnotations.Schema;  
      6. namespace MvcApplication1.Models  
      7. {  
      8.     [Table("stdDepartment")]  
      9.     public class Department  
      10.     {  
      11.         public int Id  
      12.         {  
      13.             get;  
      14.             set;  
      15.         }  
      16.         public string Name  
      17.         {  
      18.             get;  
      19.             set;  
      20.         }  
      21.         public List < Student > students  
      22.         {  
      23.             get;  
      24.             set;  
      25.         }  
      26.     }  
      27. }  
      Here [Table("Student")] and [Table("stdDepartment")] are Table Attributes which use “System.ComponentModel.DataAnnotations.Schema” NameSpace. Inside Table attribute we write Database name.

    3. Again Right Click on Models Class and  another class and name this as “StudentContext.cs” and write the following code.
      1. using System;  
      2. using System.Collections.Generic;  
      3. using System.Linq;  
      4. using System.Web;  
      5. using System.Data.Entity;  
      6. namespace MvcApplication1.Models  
      7. {  
      8.     public class StudentContext: DbContext  
      9.     {  
      10.         public DbSet < Student > _studentDb  
      11.         {  
      12.             get;  
      13.             set;  
      14.         }  
      15.         public DbSet < Department > _departmentDb  
      16.         {  
      17.             get;  
      18.             set;  
      19.         }  
      20.     }  
      21. }  
      Here we created Context Class for the Student and Department class.

  4. Go to the controller Folder and add a controller with name “Departmet," and The following code in Department Controller class.


    1. using System;  
    2. using System.Collections.Generic;  
    3. using System.Linq;  
    4. using System.Web;  
    5. using System.Web.Mvc;  
    6. using MvcApplication1.Models;  
    7. namespace MvcApplication1.Controllers  
    8. {  
    9.     public class DepartmetntController: Controller  
    10.     {  
    11.         public ActionResult Index()  
    12.         {  
    13.             StudentContext context = new StudentContext();  
    14.             List < Department > departments = context._departmentDb.ToList();  
    15.             return View(departments);  
    16.         }  
    17.     }  
    18. }  
  5. Right click on this Index Method and add a view for this Department Controller. Write this following code.

    While adding a view to this controller Select “Strongly-typed view , from there in the dropdown list select “Department” if you are able to see this, then you build your application and then create view.


    1. @using MvcApplication1.Models;  
    2. @model IEnumerable<Department>  
    3. @{  
    4.    ViewBag.Title = "Department List";  
    5. }  
    6. <div style = "font-family:Verdana">  
    7.    <h2> Student Department List</h2>  
    8.    <ul>  
    9.       @foreach (Department dept in @Model)  
    10.       {  
    11.          <li>  
    12.             @Html.ActionLink(dept.Name, "Index""Student"new { DepartmentId = dept.Id }, null);  
    13.          </li>  
    14.       }  
    15.    </ul>  
    16. </div>  
  6. Student Controller class and Index View This is Same as Previous Tutorial as i explained Data Access from database using Entity framework.

    There is need to small change:
    1. //Controller class  
    2. using System;  
    3. using System.Collections.Generic;  
    4. using System.Linq;  
    5. using System.Web;  
    6. using System.Web.Mvc;  
    7. using MvcApplication1.Models;  
    8. namespace MvcApplication1.Controllers  
    9. {  
    10.     public class StudentController: Controller  
    11.     {  
    12.         public ActionResult Index(int departmentId)  
    13.         {  
    14.             StudentContext _context = new StudentContext();  
    15.             List < Student > _students = _context._studentDb.Where(c => c.DepartmentId == departmentId).ToList();  
    16.             return View(_students);  
    17.         }  
    18.         public ActionResult StudentDetail(int id)  
    19.         {  
    20.             StudentContext _context = new StudentContext();  
    21.             Student _student = _context._studentDb.Single(c => c.StudentId == id);  
    22.             return View(_student);  
    23.         }  
    24.     }  
    25. }  
    View For Student “Index” Method and “StudentDetail” Method
    1. //Index View  
    2. @model IEnumerable  
    3. <MvcApplication1.Models.Student>  
    4. @using MvcApplication1.Models;  
    5. @{  
    6.     ViewBag.Title = "Student Names";  
    7. }  
    8.   
    9.     <div style="font-family: Arial">  
    10.         <h2>Student Names</h2>  
    11.         <ul>  
    12.             @foreach (Student _student in @Model)  
    13.             {  
    14.   
    15.                 <li>  
    16.                     @Html.ActionLink(_student.StudentName,"StudentDetail",new {id = _student.StudentId})  
    17.                 </li>  
    18.             }  
    19.   
    20.         </ul>  
    21.     </div>  
    22. @Html.ActionLink("go Back To Department List""Index""Department");  
    23. //StudentDetail View  
    24. @model MvcApplication1.Models.Student  
    25. @{  
    26.     ViewBag.Title = "StudentDetail";  
    27. }  
    28.   
    29.     <h2>StudentDetail</h2>  
    30.     <table style="font-family:Arial">  
    31.         <tr>  
    32.             <td>  
    33.                 Student ID:  
    34.             </td>  
    35.             <td>  
    36.                 @Model.StudentId  
    37.             </td>  
    38.         </tr>  
    39.         <tr>  
    40.             <td>  
    41.                 Name:  
    42.             </td>  
    43.             <td>  
    44.                 @Model.StudentName  
    45.             </td>  
    46.         </tr>  
    47.         <tr>  
    48.             <td>  
    49.                 Gender:  
    50.             </td>  
    51.             <td>  
    52.                 @Model.Gender  
    53.             </td>  
    54.         </tr>  
    55.         <tr>  
    56.             <td>  
    57.                 City:  
    58.             </td>  
    59.             <td>  
    60.                 @Model.SchoolName  
    61.             </td>  
    62.         </tr>  
    63.     </table>  
    64. @Html.ActionLink("Back To Student Name List""Index"new { DepartmentId = @Model.DepartmentId })  
    Before Running This application change in Route.Config Class . Change their Controller name as “Department”.
    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;  
    7. namespace MvcApplication1  
    8. {  
    9.     public class RouteConfig  
    10.     {  
    11.         public static void RegisterRoutes(RouteCollection routes)  
    12.         {  
    13.             routes.IgnoreRoute("{resource}.axd/{*pathInfo}");  
    14.             routes.MapRoute(name: "Default", url: "{controller}/{action}/{id}", defaults: new  
    15.             {  
    16.                 controller = "Department", action = "Index", id = UrlParameter.Optional  
    17.             });  
    18.         }  
    19.     }  
    20. }  
    Now run your application and check the output.



    When You will Click On Department name it will render to the respective Student List.



    Here you click on Student name it will go to respective Student detail.