Use Multiple View And 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:
   

   Create table stdDepartment(Id int primary key identity, Name nvarchar(50))
   Insert into stdDepartment values('Teacher')
   Insert into stdDepartment values('HOD')
   Insert into stdDepartment values('Professor')
   Create Table Student(StudentID int identity primary key, StudentName nvarchar(50), Gender nvarchar(50), SchoolName nvarchar(50))
   Alter table Student add DepartmentId int
   Alter table Student
   add foreign key(DepartmentId)
   references stdDepartment(Id)
   Insert into Student values('Munesh', 'Male', 'VIT', 1)
   Insert into Student values('Rahul', 'Male', 'ABC', 2)
   Insert into Student values('Reet', 'Female', 'XYZ', 2)
   Insert into Student values('Anshuman', 'Male', 'PQR', 3)
   Insert into Student values('Simi', 'Female', 'NIT', 3)
   Insert into Student values('Nency', 'Female', 'MIT', 2)
   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:
      

      using System;
      using System.Collections.Generic;
      using System.Linq;
      using System.Web;
      using System.ComponentModel.DataAnnotations.Schema;
      namespace MvcApplication1.Models
      {
          [Table("Student")]
          public class Student
          {
              public int StudentId
              {
                  get;
                  set;
              }
              public string StudentName
              {
                  get;
                  set;
              }
              public string Gender
              {
                  get;
                  set;
              }
              public string SchoolName
              {
                  get;
                  set;
              }
              public string DepartmentId
              {
                  get;
                  set;
              }
          }
      }

   2. Go to your MVC application and right click on Models folder and adda class as “Department.cs”. Write the following code.
      
      
      

      using System;
      using System.Collections.Generic;
      using System.Linq;
      using System.Web;
      using System.ComponentModel.DataAnnotations.Schema;
      namespace MvcApplication1.Models
      {
          [Table("stdDepartment")]
          public class Department
          {
              public int Id
              {
                  get;
                  set;
              }
              public string Name
              {
                  get;
                  set;
              }
              public List < Student > students
              {
                  get;
                  set;
              }
          }
      }

      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.
      

      using System;
      using System.Collections.Generic;
      using System.Linq;
      using System.Web;
      using System.Data.Entity;
      namespace MvcApplication1.Models
      {
          public class StudentContext: DbContext
          {
              public DbSet < Student > _studentDb
              {
                  get;
                  set;
              }
              public DbSet < Department > _departmentDb
              {
                  get;
                  set;
              }
          }
      }

      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.
   
   
   

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MvcApplication1.Models;
namespace MvcApplication1.Controllers
{
    public class DepartmetntController: Controller
    {
        public ActionResult Index()
        {
            StudentContext context = new StudentContext();
            List < Department > departments = context._departmentDb.ToList();
            return View(departments);
        }
    }
}

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.
   
   
   

   @using MvcApplication1.Models;
   @model IEnumerable<Department>
   @{
      ViewBag.Title = "Department List";
   }
   <div style = "font-family:Verdana">
      <h2> Student Department List</h2>
      <ul>
         @foreach (Department dept in @Model)
         {
            <li>
               @Html.ActionLink(dept.Name, "Index", "Student", new { DepartmentId = dept.Id }, null);
            </li>
         }
      </ul>
   </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:
   

   //Controller class
   using System;
   using System.Collections.Generic;
   using System.Linq;
   using System.Web;
   using System.Web.Mvc;
   using MvcApplication1.Models;
   namespace MvcApplication1.Controllers
   {
       public class StudentController: Controller
       {
           public ActionResult Index(int departmentId)
           {
               StudentContext _context = new StudentContext();
               List < Student > _students = _context._studentDb.Where(c => c.DepartmentId == departmentId).ToList();
               return View(_students);
           }
           public ActionResult StudentDetail(int id)
           {
               StudentContext _context = new StudentContext();
               Student _student = _context._studentDb.Single(c => c.StudentId == id);
               return View(_student);
           }
       }
   }

   View For Student “Index” Method and “StudentDetail” Method
   

   //Index View
   @model IEnumerable
   <MvcApplication1.Models.Student>
   @using MvcApplication1.Models;
   @{
       ViewBag.Title = "Student Names";
   }
   
       <div style="font-family: Arial">
           <h2>Student Names</h2>
           <ul>
               @foreach (Student _student in @Model)
               {
   
                   <li>
                       @Html.ActionLink(_student.StudentName,"StudentDetail",new {id = _student.StudentId})
                   </li>
               }
   
           </ul>
       </div>
   @Html.ActionLink("go Back To Department List", "Index", "Department");
   //StudentDetail View
   @model MvcApplication1.Models.Student
   @{
       ViewBag.Title = "StudentDetail";
   }
   
       <h2>StudentDetail</h2>
       <table style="font-family:Arial">
           <tr>
               <td>
                   Student ID:
               </td>
               <td>
                   @Model.StudentId
               </td>
           </tr>
           <tr>
               <td>
                   Name:
               </td>
               <td>
                   @Model.StudentName
               </td>
           </tr>
           <tr>
               <td>
                   Gender:
               </td>
               <td>
                   @Model.Gender
               </td>
           </tr>
           <tr>
               <td>
                   City:
               </td>
               <td>
                   @Model.SchoolName
               </td>
           </tr>
       </table>
   @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”.
   

   using System;
   using System.Collections.Generic;
   using System.Linq;
   using System.Web;
   using System.Web.Mvc;
   using System.Web.Routing;
   namespace MvcApplication1
   {
       public class RouteConfig
       {
           public static void RegisterRoutes(RouteCollection routes)
           {
               routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
               routes.MapRoute(name: "Default", url: "{controller}/{action}/{id}", defaults: new
               {
                   controller = "Department", action = "Index", id = UrlParameter.Optional
               });
           }
       }
   }

   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.