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.
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.
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.
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.
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.
Summary:
I hope this post will be helpful to understand the concept of Strongly Typed View in ASP.NET Core MVC
Please share this post with your friends and colleagues.
For any queries please post a comment below.
Happy Coding 😉
- 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?
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.
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.
Summary:
I hope this post will be helpful to understand the concept of Strongly Typed View in ASP.NET Core MVC
Please share this post with your friends and colleagues.
For any queries please post a comment below.
Happy Coding 😉
0 comments:
Post a Comment
If you like this website, please share with your friends on Facebook, Twitter, LinkedIn.