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 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 define 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,

1. Types of Data
2. Passing the data from the Controller to the 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. In this and the next articles, you will learn how to pass the data from a Controller to a 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.

1. Weakly typed data
2. 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 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.

namespace DataCtoV.Models
{
    public class Employee
    {
        public byte EmployeeId { get; set; }
        public string EmployeeName { get; set; }
        public string Address { get; set; }
        public string Phone { get; set; }
    }
}

Now, we’ll add a Controller from where this data of employees 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 “GetEmployeeData” in which we’ll make an object of the “Employee” model class and populate this object with some data. Then, pass this object to the View. The code of “EmployeeDataController” is given below.

public class EmployeeDataController : Controller
{
    // GET: EmployeeData
    public ActionResult GetEmployeeData()
    {
        List<Employee> emp = new List<Employee>
        {
            new Employee
            {
                EmployeeId = 1,
                EmployeeName = "John",
                Address = "12 Fremont St. Clermont, FL 2813",
                Phone = "[phone]"
            },
            new Employee
            {
                EmployeeId = 2,
                EmployeeName = "Smith",
                Address = "14 Highland Drive Fort Worth, TX 3994",
                Phone = "[phone]"
            },
            new Employee
            {
                EmployeeId = 3,
                EmployeeName = "Marry",
                Address = "23 Fremont Road Milledgeville, GA 6788",
                Phone = "[phone]"
            }
        };

        return View(emp);
    }
}

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

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

@model IEnumerable<DataCtoV.Models.Employee>
@{
    ViewBag.Title = "Employee Data";
}

<h3>Employee Data</h3>

<table class="table table-condensed table-hover">
    <thead>
        <tr>
            <th>@Html.DisplayNameFor(e => e.EmployeeId)</th>
            <th>@Html.DisplayNameFor(e => e.EmployeeName)</th>
            <th>@Html.DisplayNameFor(e => e.Address)</th>
            <th>@Html.DisplayNameFor(e => e.Phone)</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var employee in Model)
        {
            <tr>
                <td>@employee.EmployeeId</td>
                <td>@employee.EmployeeName</td>
                <td>@employee.Address</td>
                <td>@employee.Phone</td>
            </tr>
        }
    </tbody>
</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.

@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 are 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 the EmployeeId and EmployeeName properties, named as Display, and then set its Name property to “Serial No” and “Name” respectively. You can see the changed code of the “Employee” model class below.

[Display(Name = "Serial No")]
public byte EmployeeId { get; set; }

[Display(Name = "Name")]
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, firstly, you should make a model class populate its properties with some data then pass that data to the strongly typed View. A strongly typed View can be made by using the @model declaration in the View file having a .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 queries, please feel free to contact me in the Comments section. Also, do provide feedback whether positive or negative. It will help me to make my articles better and increase my enthusiasm to share my knowledge.