ASP.NET CORE Mvc – View Model

As of now we have discussed different data passing techniques between controllers to view that is  ViewData, ViewBag and Strongly typed model In this tutorial will discuss about the ViewModel.

Viewmodel

Viewmodel is a class which works similar to the Strongly Typed Model.

A ViewModel in ASP.NET CORE MVC application is a model which has more than one model data required for a particular view and this is called a ViewModel in  MVC.

Let’s take an example, as of now we have displayed the student information and in our application and now we want to display the address details of the particular. In this case we require the Student model and Address Model where the student model stores the student data and address model holds the address information of the student.

lets add StudentAddress model as below into the models folder.

    public class StudentAddress
    {
        public int ID { get; set; }
        public int StudentID { get; set; }
        public string Address { get; set; }
        public string City { get; set; }
        public string PinCode { get; set; }
    }

lets add another method into IStudentRepository interface to get student address details and provide implementation into StudentRepository class

    public interface IStudentRespository
    {
        Student GetStudent(int id);
        List GetAllStudent();
        StudentAddress GetStudentAddress(int studentId);
    }

StudentRepository

  public class StudentRespository : IStudentRespository
    {
        private List _students;
        private List studentAddresses;
        public StudentRespository()
        {
            _students = new List()
            {
                new Student() { Id = 1, Name = "Johnny", Age = 15, Class = "A", School = "Gtechfluent" },
                new Student() { Id = 2, Name = "Mary", Age = 20 , Class = "B", School = "Gtechfluent"  },
                new Student() { Id = 3, Name = "Bob", Age = 17, Class = "C", School = "Gtechfluent" },
            };

            studentAddresses = new List()
            {
                 new StudentAddress() { ID = 1, StudentID = 1, Address = "Address 1", City = "Pune", PinCode = "43320" },
                 new StudentAddress() { ID = 2,StudentID = 2, Address = "Address 2", City = "Mumbai", PinCode = "43320" },
                 new StudentAddress() { ID = 3, StudentID = 3, Address = "Address 3", City = "Delhi", PinCode = "43320" },
            };
        }

        public List GetAllStudent()
        {
            return _students;
        }

        public Student GetStudent(int id)
        {
            return _students.FirstOrDefault(s => s.Id == id);
        }

        public StudentAddress GetStudentAddress(int studentId)
        {
            return studentAddresses.FirstOrDefault(s => s.StudentID == studentId);
        }
    }

We need to create StudentViewModel which contains Student and StudentAddress class object. We should store all view model classes under the ViewModel folder but it’s mandatory. Let’s create a folder and ViewModel. Add StudentViewModel inside the ViewModel folder

    public class StudentViewModel
    {
        public Student Student { get; set; }
        public StudentAddress StudentAddress { get; set; }
    }

In the StudentController of Details action method we need pass StudentViewModel to View instead of Student Model.

    public ViewResult Details(int id)
    {
       StudentViewModel studentViewModel = new StudentViewModel();
       studentViewModel.Student = _studentRespository.GetStudent(id);
       studentViewModel.StudentAddress = _studentRespository.GetStudentAddress(id);
       return View(studentViewModel);
    }

On the details view need to use StudentViewModel instead on Student class.

@model SampleProjectCore.StudentViewModel

After this change lets access propeties as below.