Saturday 23 May 2015

Use multiple View and tables in Asp.Net MVC

In this Tutorial we will learn that how to use multiple table in Asp.Net MVC, 
Before Coming to this tutorial go through Data Access from databse using Entity framework

Here we will take two tables name (1)  stdDepartment (2) 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 process we will do here
1.   When we will run this application first we will show the entire department Name, with the Link.
2.   When we will click on Department hyperlink this should render to the Name List for that specific Department with hyper link.
3.   When we will 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 add a 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 a  another class and give 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 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 databse 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.

No comments:

Post a Comment

C# program Selection Sorting

Selection sort is a straightforward sorting algorithm. This algorithm search for the smallest number in the elements array and then swap i...