Strongly Typed View in ASP.NET Core MVC

Introduction

In this article we’ll discuss strongly-typed view in asp.net core MVC there are three ways to pass data from a controller to a view in MVC. Please, read our previous article before proceeding to this article where we learn Passing Data To View In ASP.Net Core MVC.

We can use Viewdata, ViewBag or a Strongly typed view we discussed using viewdata and view bag. in our previous article, we have already discussed using a strongly typed view to pass data from a controller to a view. at the moment we are using a view bag to pass the employee model object from this details action method of our home controller to the details view.

Now, we don’t want to use ViewBag anymore to pass the employee model object. so, we’re going to get rid of that line and we want to pass this employee model object to the view by passing it to these few methods. notices from the IntelliSense one of the overloaded versions of this view method takes the model object as a parameter.

dependency injection in asp.net core
dependency injection in asp.net core

So, using this overloaded version let’s pass this model object to the view. In the details view to access this employee model object.

ViewResult in asp.net core mvc

RazorView

we use at a model property we know the employee object has Name, Email and Department properties.

@model EmployeeManagement.Models.Employee

<html>
<head>
    <title></title>
</head>
<body>
    <h3>@ViewBag.PageTitle</h3>

    <div>
        Name : @Model.Name
    </div>
    <div>
        Email : @Model.Email
    </div>
    <div>
        Department : @Model.Department
    </div>
</body>
</html>

But, when we type dot on this earth model property those properties don’t show up in the intelligence that’s because at the moment this detail view is not a strong type of view.

we see the employee details as expected although this works at the moment our details. the view is not as strongly typed to you notice when we hover the mouse over the department property. it shows up as dynamic property and when we type dot on this @Model property we do not get intelligence.

Since we don’t have intelligence we can very easily misspell these properties and introduce typographical errors and since these are dynamic properties they are only resolved at runtime.

So, at the compile-time will not come to know about the typographical errors. we made with a strongly typed view we don’t have all these problems now to make this view a strongly-typed view we use @Model directive.

At the top of this view file, we use a model directive with a lowercase M and specify the model for the view. we know the model class for this view is our employee class

@model EmployeeManagement.Models.Employee

Now, a strongly-typed view notice from the intelligence. when we have the mouse over model directive it knows it is working with the employee model object.

Model object in asp.net core mvc

when we type dot on the @Model property in the intelligence we see all the employee object properties

model property in razorview in asp.net core

If we misspell a property name we get a red underline right away indicating that we have made an error with the name property. So the best part of a strongly typed view is we get in the listens and compile-time error checking

So, to create a strongly-typed view we use the @model directive to specify the model type. the view we’ll be working with to access the model object properties we use at the model property. the important difference to keep in mind is with the directive we use a lowercase M and that the property.

we use an uppercase M it is usually better to avoid using ViewBag and viewdata. the problem with the ViewBag and viewdata is that they do not provide compile-time type checking and IntelliSense.

So, without intelligence support, we are developers that cannot be very productive and the chances of misspelling and making typographical errors are very high will only come to know about these errors at runtime. So for these reasons, we usually do not use viewdata and ViewBag.

the preferred approach is to use a strongly-typed view unlike view data and view bag a strongly typed view provides a compile-time type checking and intelligence.

But, if we look at our application we are still using ViewBag to pass page title from a home controller to the details view.

public ViewResult Details()
{
    Employee model = _employeeRepository.GetEmployee(1);

    ViewBag.PageTitle = "Employee Details";

    return View(model);
}

So, the question that comes to our mind at this point is how can we use a strongly typed view and pass both the employee details and page title from our home controller to the details view.

well, this is one use case where we can use a view specific model called view model.

Thank you for reading this article, I hope you will understand the Strongly Typed View in ASP.NET Core MVC.

Leave a Reply

Your email address will not be published. Required fields are marked *