Strongly Typed View in ASP.NET Core MVC

Back to: ASP.NET Core Tutorials For Beginners and Professionals

Strongly Typed View in ASP.NET Core MVC Application

In this article, I am going to discuss how to create a Strongly Typed View in ASP.NET Core MVC application with examples. Please read our previous article before proceeding to this article where we discussed ViewBag in ASP.NET Core MVC application. As part of this article, we are going to discuss the following pointers.

Why we need a Strongly Typed View in ASP.NET Core MVC?
How to create a strongly typed view in ASP.NET Core?
What are the advantages of using a strongly typed view?

Why do we need Strongly Typed View in ASP.NET Core MVC?

As we already discussed we can pass the model data to a view using many different ways such as ViewBag, ViewData, strongly typed model object, etc. When we passed the model data to a View using ViewBag or ViewData, then the view becomes a loosely typed view. In a loosely typed view, we will not get any intelligence as well as the compile-time error. With a strongly typed view, we will get both intelligence support as well as the compile-time error.

Implementing Strongly Typed View in ASP.NET Core MVC

In order to create a strongly-typed view, from the action method of the controller, we need to pass the model object as a parameter to the View() extension method. The Controller base class provides us the following two overloaded versions of View() extension method which we can use to pass the model object from the controller action method to a view.

Here we are going to use the overloaded version which takes only the model object as an input parameter. So, modify the Details action method as shown below to pass the student object as a parameter to the View extension method.

using FirstCoreMVCApplication.Models;
using Microsoft.AspNetCore.Mvc;
namespace FirstCoreMVCApplication.Controllers
{
    public class HomeController : Controller
    {
        public ViewResult Details()
        {
            ViewBag.Title = "Student Details Page";
            ViewBag.Header = "Student Details";
            Student student = new Student()
            {
                StudentId = 101,
                Name = "James",
                Branch = "CSE",
                Section = "A",
                Gender = "Male"
            };
            
            return View(student);
        }
    }
}

Changes in Details.cshtml View:

In order to create a strongly-typed view in ASP.NET Core MVC, we need to specify the model type within the view by using the @model directive. As here, the Student class is going to be our model so we need to specify the model as shown below.

@model FirstCoreMVCApplication.Models.Student

The above statement will tell the view that we are going to use FirstCoreMVCApplication.Models.Student as the model for this view. The point that you need to remember is, here in the directive (@model), m is in lowercase and the statement should not be terminated with a semicolon.

Then in order to access the model object properties, you can simply use @Model, here the letter M is in uppercase. So, in our example, we can access the Student object properties such as Name, Gender, Branch, and Section by using @Model.Name, @Model.Gender, @Model.Branch, and @Model.Section respectively.

Modify the Details.cshtml view file as shown below to make the view as strongly typed.

@model FirstCoreMVCApplication.Models.Student

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>@ViewBag.Title</title>
</head>
<body>
    <h1>@ViewBag.Header</h1>
    <div>
        StudentId : @Model.StudentId
    </div>
    <div>
        Name : @Model.Name
    </div>
    <div>
        Branch : @Model.Branch
    </div>
    <div>
        Section : @Model.Section
    </div>
    <div>
        Gender : @Model.Gender
    </div>
</body>
</html>

Now run the application and navigate to the “/Home/Details” URL and you will see the data as expected on the webpage.

Advantages of using Strongly Typed View in ASP.NET Core MVC Application:

We will get the following advantages when we use a strongly typed view in the ASP.NET Core MVC application.

It will provide compile-time error checking, as a result, we will get the intelligence support.
With intelligence support, the chances of mis-spelling the properties and making typographical errors are almost zero.
If we misspell the property name, then it comes to know at compile time rather than at runtime.

The best and preferred approach in ASP.NET Core MVC to pass data from a controller action method to a view is by using a strongly typed model object.

In our example, we are still using ViewBag to pass the Header and Title from the Controller action method to the View. Then definitely the question that comes to your mind is how we will pass the Header and Title to a strongly typed view. Well, in such scenarios we need to use a view specific model which is called View Model.

In our next article, I am going to discuss the View Model in the ASP.NET Core MVC application with an example. Here, in this article, I try to explain the Strongly Typed View in ASP.NET Core MVC application. I hope you enjoy this article.