Passing Data From Controller To View With ViewData - Part Two

About Article

This article will tell you almost everything about passing data from Controller to View in ASP.NET MVC using ViewData. I am writing this article to tell you the basic to advanced concepts about ways to pass data from Controller to View. This article is the second one in the series named as “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. The articles are listed below.

• Passing Data From Controller To View - Part One
• 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

Especially, read my consecutive previous article in which I have taught the way of passing the data from Controller to View. In the previous article, we passed the Model to the View by passing an argument to a View method. This is the link to the previous article.

Read this article, check the code after downloading, and then feel free to give your feedback.

The topics to be covered are.

1. What is ViewData?
2. Passing the data from Controller to View using ViewData

Introduction and Background

As we know Controller is the class whose responsibility is to handle all the HTTP requests and then execute appropriate View. And 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 data from Controller to View.

In this article, you’ll learn how to pass strongly typed data from Controller to View using ViewData. And you’ll see other ways to pass data, in coming articles. So stay tuned.

What is ViewData?

ViewData is a dictionary for the view data having the type of ViewDataDictionary. It is one of the properties of the ControllerBase class so when we create a Controller, then that Controller will automatically inherit the Controller class and this Controller class inherits ControllerBase class. That’s why we can be able to access this ViewData property in each Controller. You can see in the image below the Controller class which inherits the ControllerBase class.

And in the ControllerBase class, the ViewData property is defined, see below its syntax.

namespace System.Web.Mvc
{
    /// <summary>Represents the base class for all MVC controllers.</summary>
    public abstract class ControllerBase : IController
    {
        //Other code is removed for clarity.
        /// <summary>Gets or sets the dictionary for view data.</summary>
        /// <returns>The dictionary for the view data.</returns>
        public ViewDataDictionary ViewData { get; set; }
    }
}

As you can see, ViewData is of type ViewDataDictionary that contains the Key-Value pair where the key must be a string. ViewData is used to pass the data from the Controller to the corresponding View. Importantly, this data can only be passed from the Controller to its corresponding View, not in the backward direction. You may say it is “short-life” which means when redirection occurs (from View to Controller) then the value of the dictionary becomes null. So it is only valid in the current request. Another important point for ViewData is, that it is necessary to do typecasting for complex and strongly typed data it always checks null values to avoid errors. Now let’s move towards its example to see its use practically.

Passing the strongly typed data from Controller to View using ViewData

To pass the strongly-typed data from Controller to View using ViewData, we have to make a model class populate its properties with some data, and then pass that data to the ViewData dictionary as Value, and selecting Key’s name is the programmer’s choice. Then in the View, we can access the data of the model class by using the ViewData dictionary with the pre-defined keys. Let’s create a project to take a look at an example.

Go to File then New and select the “Project” option.

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

Then select “Empty” and tick “MVC” then click OK.

The project is created successfully.

Now, create a class named as “Employee” in the Models folder, shown below.

Now, add some properties to this class as the code is 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 employee will pass. Let’s create a Controller as shown below.

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

Then, give the name of the Controller and click on 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 the “Employee” model class and populate this object with some data. Then, pass this object to the ViewData dictionary as Value and give a Key named as “EmployeeData”. 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]"
            }
        };

        ViewData["EmployeeData"] = emp;

        return View();
    }
}

Because we don’t have any View named “GetEmployeeData” in the Views folder, so 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.

@using DataCtoV.Models
@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 (IEnumerable<Employee>)ViewData["EmployeeData"])
        {
            <tr>
                <td>@employee.EmployeeName</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.

To iterate the data, here, we have used the ViewData dictionary which is calling the data from the Controller with the help of a Key named as “EmployeeData”. And you can also see that we have cast the ViewData to Employee.

Note. We must have to cast the ViewData before using it.

Why casting?

As we know, ViewData has the type ViewDataDictionary and this Dictionary has the type “object”, and each loop cannot accept variables having the type “object”. In the object type, the GetEnumerator method is not defined that’s why we can’t iterate the data of Employee’s collection.

To iterate the data of Employee’s collection properly, we have to cast it to IEnumerable because a list/collection of Employees is coming and only in IEnumerable, the GetEnumerator is defined for iterating it properly. Hence we must cast it in the foreach loop. See the Error below without casting.

Ways of Casting ViewData

One way of casting the ViewData is described above, which is at a time casting of ViewData in the foreach loop. The code is given below.

Another way of casting the ViewData is, to cast the ViewData in the Multi-Statement Razor Code block for C#, and then use the variable in the for each loop. You can see the code below.

Casting in the code block.

@{
    ViewBag.Title = "Employee Data";
    var employeeData = (IEnumerable<Employee>)ViewData["EmployeeData"];
}

Then use the “employee data” variable in for each loop, as shown below.

@foreach (var employee in employeeData)
{
    <tr>
        <td>@employee.EmployeeName</td>
        <td>@employee.EmployeeName</td>
        <td>@employee.Address</td>
        <td>@employee.Phone</td>
    </tr>
}

All the code of the “GetEmployeeData” view is given below for your convenience.

GetEmployeeData.cshtml

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

@{
    ViewBag.Title = "Employee Data";
    var employeeData = (IEnumerable<Employee>)ViewData["EmployeeData"];
}
<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 employeeData)
        {
            <tr>
                <td>@employee.EmployeeId</td>
                <td>@employee.EmployeeName</td>
                <td>@employee.Address</td>
                <td>@employee.Phone</td>
            </tr>
        }
    </tbody>
</table>

You have seen the reason of casting and ways to do casting. Now simply 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 using ViewData dictionary, in which firstly, you should make a model class populate its properties with some data then pass that object to the ViewData dictionary as Value and pass Key as a string. You have learned it with the help of an example.

Conclusion

I hope this article has helped you understand the concepts about passing strongly typed data from Controller to View using ViewData in ASP.NET MVC. Stay tuned for my next articles because this article is the second one in the series of “Passing data from Controller to View” and you’ll learn more about passing data in coming articles. If you have any query, 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.