Passing data from Controller to View in ASP.NET Core MVC

In this tutorial, we are going to learn how to pass data from Controller to View. We should create View Models with all of the needed data and pass it from the controller to the View. The View Models can be passed to the View by creating a dynamic property in ViewBag. It can be passed using the Model Property of the ViewData. The Model property allows us to create the strongly typed Views using the @model directive. We will look at all these in this tutorial.

Passing ViewModel from Controller to View

The View Model refers to the objects which hold the data that needs to be shown to the user.  It can contain data from more than one entities of the database.  The View Model should contain all the data that needs to be shown to the user.

The ViewModel is passed from the Controller to the View either using the ViewBag or ViewData.

The ViewData returns a ViewDataDictionary, While ViewBag is just wrapper around ViewData, which provides the dynamic properties. We already have a tutorial on Viewdata & ViewBag.

The ViewDataDictionary contains a generic dictionary object and contains a special property called Model.

The Model property allows us to pass a ViewModel to the view. This Model Property allows us to create the strongly typed views.

Example Project

Open the ASP.NET Core app created in the Tutorial building ASP.NET Core application. You can download the source code from the GitHub. The initial code is in the folder start and the final code is available under the folder Passing data to View.

Creating a Customer ViewModel

Now, let us add a View to display a Customer object. To do that first, we need to create a Customer View model

Creating a View Model

Select and right-click on models folder and select add -> class. Name the class as Customer.cs. Add the following Properties

Using ViewBag to Pass ViewModel to View

Goto the Index Action method in the HomeController.

Create a dynamic property Customer in the ViewBag and assign the instance of the Customer class as shown below

You can refer to the customer object using the ViewBag.Customer property. Since we are using the ViewBag we do not need to cast it to the desired type.

The Drawback of using the above method is that it does not offer any compile-time type checking. For Instance, if you use ViewBag.Customers the code compiles and will result in a runtime error.

Using the Model property to pass the ViewModel

As mentioned above, ViewDataDictionary has a special property called Model, which can be accessed using the ViewData. We can pass our Customer ViewModel to the View using the Model Property as shown below

You can access the Model in the View either using ViewData.Model or Model (which returns the ViewData.Model) as shown below.

This method also has the same drawback as the previous method.

But using the predefined dynamic property Model gives us the option to create the Strongly Typed View.

What is Strongly Typed View

The view which binds to a specific type of ViewModel instead of dynamic Property is called as strongly typed view.

In the above example, we are binding Customer ViewModel to the View either using ViewBag.Customer or ViewData.Model. The Compiler does not know anything about the type of model.

In the strongly typed View, we let the View know the type of ViewModel being passed to it.

@model directive

The strongly typed Views are created using the @model directive

The @model directive is placed at the top of the view file specifying the type of the ViewModel that is being passed

And then you can refer to the model in the View directly

With Strongly typed view you will get Intellisense help and compile time error checking.

Since there is only one Model Property, you can have only one ViewModel per View.

Strongly Typed View in ASP.NET Core

Model vs model

It is easy to mix up with the Model and model.

The model is directive that is used to declare the type of the ViewModel

The Model is a variable used to access the ViewModel. The type of Model is declared by the keyword @model.

In Reality, all the data is passed to the View via ViewBag. When you use model directive, the razor engine generates a property named Model.  The Model property then returns the type declared. 

For example, the directive

is translated into

The correct way to Pass ViewModel to the View

The recommended way to pass the ViewModel to the View is to make use of the View method. The View method takes the model as one of the argument, which internally sets it to the ViewData.Model Property.

Summary

In this tutorial, we looked at how to pass data from the Controller to View using ViewModel. You can use the dynamic property of the ViewBag or use the Special Property Model provided by the ViewData. If you use the Model property, then you can make use of the @model directive to declare the strongly typed View.

Leave a Comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top