Using Model to pass data to View in ASP.NET MVC

Exploring multiple ways to pass data from Controller to View in an ASP.NET MVC application, so far we have covered following different approaches:

Part 1 – Using ViewData & ViewBag
Part 2 – Using TempData | TempData Vs Session ,
Also you can find more helpful links on ASP.NET MVC, C#, Entity Framework
A Complete Online Shopping Cart Application using ASP.NET MVC, Entity Framework, C#
Build a Full-Stack Web Application with ASP.NET Core, Entity Framework Core and Angular 2 (Angular 4+)

Now in this ASP.NET MVC Tutorial, we are going to implement another approach i.e. using Model for passing data from ASP.NET MVC Controller to View. As we already know that in MVC (Model, View, Controller) pattern, Model represents our domain model corresponding to tables in database. So, we can use this model class to serve the purpose.

::::: Practical Guide to ASP.NET Web API :::::

Consider the following Model class we have already used in our previous implementations:

namespace MyMVCApp.Models
{
       public class Employee
       {
             public string EmpID { get; set; }
             public string EmpFirstName { get; set; }
             public string EmpLastName { get; set; }
       }
}

namespace MyMVCApp.Models

{

public class Employee

{

public string EmpID { get; set; }

public string EmpFirstName { get; set; }

public string EmpLastName { get; set; }

}

Now, we are done with our Model class (i.e. Employee). For the purpose of this implementation, we are loading data directly to our Model in EmployeeController. In a real implementation, we must be fetching this data from a data source e.g. a database. So, the Controller has following code:

public class EmployeeController : Controller
{
        public ActionResult Index()
        {
             List<Employee> employees = new List<Employee>()
             {
                 new Employee{EmpID = "1", EmpFirstName = "Imran", EmpLastName = "Ghani"},
                 new Employee{EmpID = "2", EmpFirstName = "Rizwan", EmpLastName = "Mukhtar"},
                 new Employee{EmpID = "3", EmpFirstName = "Rehan", EmpLastName = "Ahmad"},
                 new Employee{EmpID = "4", EmpFirstName = "Zeeshan", EmpLastName = "Khalid"},
                 new Employee{EmpID = "5", EmpFirstName = "Sajid", EmpLastName = "Majeed"}
             };
             return View(employees);
        }
}

public class EmployeeController : Controller

{

public ActionResult Index()

{

List<Employee> employees = new List<Employee>()

{

new Employee{EmpID = "1", EmpFirstName = "Imran", EmpLastName = "Ghani"},

new Employee{EmpID = "2", EmpFirstName = "Rizwan", EmpLastName = "Mukhtar"},

new Employee{EmpID = "3", EmpFirstName = "Rehan", EmpLastName = "Ahmad"},

new Employee{EmpID = "4", EmpFirstName = "Zeeshan", EmpLastName = "Khalid"},

new Employee{EmpID = "5", EmpFirstName = "Sajid", EmpLastName = "Majeed"}

};

return View(employees);

}

In above code example, you can see that as opposite to ViewData and ViewBag approach in other ASP.NET MVC Tutorial, we are passing data (i.e. employees) as parameter to View instead of placing in another store and calling as View().
Finally, updating our View to get and display data passed from Controller as:

@model IEnumerable<MyMVCApp.Models.Employee> 
<html>
  <head>
            <meta name="viewport" content="width=device-width" />
            <title>Employee Index Page</title>
  </head>
  <body>
     <div>
         <h1>Employee (Using Model)</h1>
         <div>
           @foreach(var employee in Model){
                   <p>@employee.EmpID  @employee.EmpFirstName  @employee.EmpLastName</p>
           }
         </div>
     </div>
  </body>
  </html>

@model IEnumerable<MyMVCApp.Models.Employee>

<html>

<head>

<title>Employee Index Page</title>

</head>

<body>

<div>

<h1>Employee (Using Model)</h1>

<div>

@foreach(var employee in Model){

<p>@employee.EmpID @employee.EmpFirstName @employee.EmpLastName</p>

}

</div>

</body>

</html>

At the top of our View (i.e. Index.cshtml), we have referred to our Model class (i.e. Employee) using IEnumerable. Further in View, we are using foreach to access and display data as needed. When we run this application, our View will display the Model data from Controller as follows:

Using Model to pass data to View in ASP.NET is pretty simple as well as more appropriate because we are fetching data from permanent store and loading in our Model classes in most of the cases. Also, we use it to perform all CRUD (Create, Retrieve, Update, Delete) operations. Hopefully, this ASP.NET MVC Tutorial will help in understanding the mentioned approach in a more effective way.
Previous: ViewBag and ViewData in ASP.NET MVC

Other ASP.NET MVC5 Tutorial and more related articles:

Most popular ASP.NET MVC and related Online Courses

The Complete ASP.NET MVC 5 Course

Build a Real-World App with ASP.NET Core and Angular 2 (4+)

Entity Framework in Depth: The Complete Guide

More University Training, Degree and Specialization Courses

Top 10 Interview Questions and Answers Series: