Passing Data From Controller To View - Part One

This article will tell you almost everything about passing the data from Controller to View in ASP.NET MVC.
I am writing this article to tell you the basic to advanced foremost concepts about ways to pass the data from Controller to View. This article is the first one in the series named  “Passing Data from Controller to View”. You’ll learn all the ways in each separate article. Stay tuned!
I would strongly recommend reading my previous articles, which will be defining the basic concepts of ASP.NET MVC.

• Action Selectors In ASP.NET MVC
• Filters In ASP.NET MVC
• Action Result In ASP.NET MVC
• MVC Architecture And Its Pipeline
• Convention Routing VS Attribute Routing

Read this article, check the code after downloading, and then feel free to give your feedback.
The topics to be covered are,

• Types of Data
• Passing the data from Controller to View

Introduction and Background
As we know Controller is the class whose responsibility is to handle all the HTTP requests and then execute an appropriate View. A View gives us the HTML markup that we display to the user. And for displaying anything on the View, there should be some data that is passed from Controller to View. And in this and next articles, you will learn how to pass the data from a Controller to View.
There are a number of ways to pass the data from Controller to View and also, the types of data that exist. Let’s move towards its types and then see the practical way to pass the data from Controller to View.
Types of Data
There can be two types of data to be passed from Controller to View.

• Weakly typed data
• Strongly typed data

In this article, you’ll learn how to pass strongly typed data from Controller to View. And you’ll see the passing of weakly typed data in coming articles. So, stay tuned!
Passing the strongly typed data from Controller to View
To pass the strongly typed data from Controller to View, we have to make a model class then populate its properties with some data and then pass that data to the strongly typed view. Let’s create a project to take a look at this example.
Go to File >> New and select the “Project” option.

Then, create the ASP.NET web application project as depicted below.

Then, select “Empty” and tick “MVC” followed by a click on OK.

The project is created successfully.
Now, create a class named “Employee” in the Models folder, as shown below.

Now, add some properties into this class as in the code given below.

1. namespace DataCtoV.Models  
2. {  
3.     public class Employee  
4.     {  
5.         public byte EmployeeId { get; set; }  
6.         public string EmployeeName { get; set; }  
7.         public string Address { get; set; }  
8.         public string Phone { get; set; }  
9.     }  
10. }  

Now, we’ll add a Controller from where this data of employee will pass. Let’s create a Controller as shown below.

Then, select “MVC 5 Controller– Empty” and click Add.

Give the name to the Controller and click "Add".

The Controller is created successfully. In this Controller, we’ll make an action method with the name of “GetEmployeeData” in which we’ll make an object of “Employee” model class and populate this object with some data. Then, pass this object to the View. The code of “EmployeeDataController” is given below.

1. public class EmployeeDataController : Controller  
2.     {  
3.         // GET: EmployeeData  
4.         public ActionResult GetEmployeeData()  
5.         {  
6.             List<Employee> emp = new List<Employee>  
7.             {  
8.                 new Employee  
9.                 {  
10.                     EmployeeId = 1,  
11.                     EmployeeName = "John",  
12.                     Address = "12 Fremont St. Clermont, FL 2813",  
13.                     Phone = "+1-234-2838421"  
14.                 },  
15.                 new Employee  
16.                 {  
17.                     EmployeeId = 2,  
18.                     EmployeeName = "Smith",  
19.                     Address = "14 Highland Drive Fort Worth, TX 3994",  
20.                     Phone = "+1-234-2244521"  
21.                 },  
22.                 new Employee  
23.                 {  
24.                     EmployeeId = 3,  
25.                     EmployeeName = "Marry",  
26.                     Address = "23 Fremont Road Milledgeville, GA 6788",  
27.                     Phone = "+1-234-46568421"  
28.                 }  
29.             };  
30.    
31.             return View(emp);  
32.         }  
33.     }  

Because we don’t have any View named as “GetEmployeeData” in the Views folder, let’s create it. For creating a View, right click on the “GetEmployeeData” method and select “Add View…” option. The following dialogue box will open, click on “Add”.

The View is created successfully. Let’s write the code for it.

1. @model IEnumerable<DataCtoV.Models.Employee>  
2. @{  
3.     ViewBag.Title = "Employee Data";  
4. }  
5.    
6. <h3>Employee Data</h3>  
7.    
8. <table class="table table-condensed table-hover">  
9.     <thead>  
10.         <tr>  
11.             <th>@Html.DisplayNameFor(e => e.EmployeeId)</th>  
12.             <th>@Html.DisplayNameFor(e => e.EmployeeName)</th>  
13.             <th>@Html.DisplayNameFor(e => e.Address)</th>  
14.             <th>@Html.DisplayNameFor(e => e.Phone)</th>  
15.         </tr>  
16.     </thead>  
17.     <tbody>  
18.         @foreach (var employee in Model)  
19.         {  
20.             <tr>  
21.                 <td>@employee.EmployeeId</td>  
22.                 <td>@employee.EmployeeName</td>  
23.                 <td>@employee.Address</td>  
24.                 <td>@employee.Phone</td>  
25.             </tr>  
26.         }  
27.     </tbody>  
28. </table>  

You can see in the code that we have made a table to represent the strongly typed data of the Employee model class. We have used a foreach loop to iterate the data of each employee passed from the Controller.
Because we are passing the strongly typed data from Controller to View, we have to create a strongly typed View by using the following line of code.

1. @model IEnumerable<DataCtoV.Models.Employee>  

If you are passing a list of data (list of employees’ data), then you have to use the IEnumerable interface. Its purpose is to iterate through the collection.
Now, let’s build and run the application. You should see the following output.

Now, you can see the highlighted heading, i.e., EmployeeId and EmployeeName. These headings do not look good and user-friendly. It is the same as the property name so it is not good for the user. So, let’s change it.
To change this name, we have to apply a data annotation to EmployeeId and EmployeeName property, named as Display and then set its Name property to “Serial No” and “Name” respectively. You can see the changed code of “Employee” model class below.

1. [Display(Name = "Serial No")]
2. public byte EmployeeId { get; set; }  
3. 
   
4. [Display(Name = "Name")]
5. public string EmployeeName { get; set; }  

Now, simply build and run the application. Then, you’ll see the following output.

Summary
In this article, you have learned how to pass strongly typed data from Controller to View, in which firstly, you should make a model class then populate its properties with some data then pass that data to the strongly typed View. And a strongly typed View can be made by using @model declaration in the View file having .cshtml extension. You have learned it with the help of an example.
Conclusion
I hope this article has helped you in understanding the concepts about passing strongly typed data from Controller to View in ASP.NET MVC. Stay tuned for my next articles because this article is the number one in the series of “Passing data from Controller to View” and you’ll learn more about passing the data in coming articles. If you have any query, please feel free to contact me in the Comments section. Also, do provide the feedback whether positive or negative. It will help me to make my articles better and increase my enthusiasm to share my knowledge.