4 Basic ways to pass data from Controller to View in ASP.NET MVC

If you develop web applications in ASP.NET MVC, you should definitely learn how to pass your “Model” data to the “View” using the “Controllers”. This post will show you 4 different ways to accomplish that. Start by opening Visual Studio 2012 and creating an ASP.NET MVC web application. You can do that, selecting :

File -> New Project -> ASP.NET MVC 4 Web Application

Click OK and then, choose the Basic template and Razor as the view engine as follows.

Click OK and finish the “Create Project..” Wizard. Create a Model class named “Product” in the Models folder of your solution. This class will be used as a Model class for passing data to Views. Right click the Models folder and choose Add.. -> Class. Name the new class “Product” and make sure you make it public. Then add a few properties such as Id, Name or Description.

Right click the Controllers folder and select “Add -> Controller”. Name the controller “ProductsController” and choose “Empty MVC Controller” for template. Click OK.

Before running the application for the first time, you need to tell MVC Framework which is the default controller and action that will be used when the application is deployed. Open the “RouteConfig.cs” file that relies under the App.Start folder and change the default Controller from “Home” to “Products”.

This is not an MVC Routing tutorial but all you need to know for now, is that when you run your application the Index action of your ProductsController controller will be invoked. Build and run your solution. You will get the following error:

This error occurs because despite the fact that the Index action of your ProductsController class was invoked, yet there isn’t an Index View. To create that View, simply right click inside the Index action and select “Add view..”. Leave the default values and press Add. A View named “Index” was added in a folder “Products” under the “Views” folder of your solution. Build and run your solution. Now you should see the default contents of you Index View.

It is time to test the different ways we can use to pass data from controller to the View. In the Index action of your controller create a Product object and assign it to a ViewData dictionary object as follows.

In the Index View we added a using statement inside a Razor block (@ symbol) because we needed to cast the ViewData[“MyProduct”] object to a Product Model class object. The ViewData dictionary is one way to pass data from controller to View. Though you noticed that you need to cast this object to the Model class in order to use the respective properties. You can solve this, by using another object shared between Controllers and Views, the ViewBag. Simply change the statement

var prod = (Product)ViewData["MyProduct"];

to

var prod = ViewBag.MyProduct;

Your application will run in the same way without needed to cast the shared object.

The third and more appropriate way to pass data from Controller to View, is to pass the Model class object to the View. To demonstrate how this works, change the Index action contents as follows:

The last way to pass data is the TempData object. This object is used to pass data from one request to the next and only. For example, when you successfully add a new product you want to display a message “A new product was added!”. To demonstrate this, add a new action named “TestTempData” in your ProductsController.

public ActionResult TestTempData()
{
TempData["data"] = "This wont be displayed in the next request! Test it by refreshing the page!";
return RedirectToAction("Index");
}

The above code, assigns a string to the TempData[“data”] object and then invokes the Index action of the same controller. This will result the Index View to be displayed again. Before running the application, add the following line at the end of the Index View.

<h2>@TempData["data"]</h2>

Build the solution and navigate to

http://localhost:"your_port"/Products/TestTempData

You should see the message we added in the TestTempData action.

Try to refresh the page. You will get a System.NullReferenceException. On purpose, I didn’t check if the TempData[“data”] object is null in the Index page (something you should always do) just to show you that this kind of data is accessible only between two requests!

These are the most usual ways to pass data from a Controller to a View in ASP.NET MVC. If you aren’t familiar with the MVC Routing or the Razor syntax, that’s ok, we ‘ll take a look at those in other posts. You can download the project we built from here.

The purpose of this blog is to broaden my education, promote experimentation and enhance my professional development. Albert Einstein once said that “If you can’t explain it simply, you don’t understand it well enough” and I strongly believe him!