How to Use Multiple Models in View using ViewModel: Asp.Net MVC

April 27, 2014 , , , , 0 Comments

Asp.Net MVC uses such type of classes in which each field may contains specific validation rules using data annotations, to let the user interact with those only. These fields may contains some extra fields to be used as a temporary purpose.

Create two classes in the Models folder named Student and Employee as written below:

public class Student
public string Name { get; set; }
public int Age { get; set; }
public string City { get; set; }
public class Employee
public int EmpId { get; set; }
public string EmpName { get; set; }

Create a folder in our solution named ViewModels and add a class named Student_EmployeeViewModel which will have the following code.

public class Student_EmployeeViewModel
public List<Student> Students { get; set; }
public List<Employee> Employees { get; set; }

Come to our Controller (Home controller) and add an Action (Student_Employee) which will be type of HttpGet. This action will have some lines of code as below which contains two list of student and employee and then assign them to the newly created object of Student_EmployeeViewModel.

public ActionResult Student_Employee()
List<Student> studentList = new List<Student>();
studentList.Add(new Student() { Name = "Student 1", Age = 24 });
studentList.Add(new Student() { Name = "Student 2", Age = 25 });
studentList.Add(new Student() { Name = "Student 3", Age = 23 });

List<Employee> empList = new List<Employee>();
empList.Add(new Employee() { EmpName = "Employee 1", EmpId = 101 });
empList.Add(new Employee() { EmpName = "Employee 2", EmpId = 102 });
empList.Add(new Employee() { EmpName = "Employee 3", EmpId = 103 });

Student_EmployeeViewModel vm = new Student_EmployeeViewModel();
vm.Students = studentList;
vm.Employees = empList;
return View(vm);

Create an empty view by right clicking on this action and then Add View dialog box as discussed earlier. Write the following code in this view which will have two list as defined in our ViewModel.

@model MvcApplication1.Models.Student_EmployeeViewModel

    ViewBag.Title = "Student_Employee";
    Layout = "~/Views/Shared/_Layout.cshtml";

<h2>Students List</h2>

@foreach (var item in Model.Students)
    <option>@item.Name &nbsp;&nbsp; @item.Age</option>

<h2>Employees List</h2>

@foreach (var item in Model.Employees)
    <option>@item.EmpName &nbsp;&nbsp; @item.EmpId</option>

In the above code, we run two loops for each list of student and employee and display their name and age/id on the page.

Run this project and write the address of this action in the address bar, this will shows all the data of student as well as employees we have added in the action.

How to Use Multiple Models in View using ViewModel: Asp.Net MVC

Subhash Sharma

Some say he’s half man half fish, others say he’s more of a seventy/thirty split. Either way he’s a fishy bastard. Google