-->

Sunday, April 27, 2014

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

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

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

Read other related articles

Also read other articles

© Copyright 2013 Computer Programming | All Right Reserved