Strongly Typed View in ASP.NET MVC

Strongly Typed View in ASP.NET MVC Application

In this article, I am going to discuss Strongly Typed View in ASP.NET MVC application with examples. Please read our previous article before proceeding to this article where we discussed ViewBag in ASP.NET MVC application.

In ASP.NET MVC, we can pass the data from the controller action method to a view in many different ways like ViewBag, ViewData, TempData and strongly typed model object. If we pass the data to a View using ViewBag, TempData or ViewData, then that view becomes a loosely typed view. Here we will discuss how to create a strongly typed view in ASP.NET MVC application.

Creating Strongly Typed View in ASP.NET MVC

In order to create a strongly typed view in ASP.NET MVC application, we need to pass the model object as a parameter to the View() extension method. The Controller base class provide us the following four overloaded versions of View() extension method which we can use to pass the model data from the controller action method to a view.

Strongly Typed View in ASP.NET MVC Application

We are going to use the overloaded version which takes only the model object as input parameter. So modify the Index action method of the Home Controller as shown below to pass the Employee object as a parameter to the View extension method.

using FirstMVCDemo.Models;
using System.Web.Mvc;
namespace FirstMVCDemo.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            EmployeeBusinessLayer employeeBL = new EmployeeBusinessLayer();
            Employee employee = employeeBL.GetEmployeeDetails(101);
            ViewBag.Header = "Employee Details";
            
            return View(employee);
        }
    }
}
Changes in Index.cshtml View:

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

@model FirstMVCDemo.Models.Employee

The above statement will tell that we are going to use FirstMVCDemo.Models.Employee as the model for this view. Here in the directive (@model), the letter is in lowercase and the statement should not be terminated with the semicolon.

Then we can access the model properties simply by using @Model, here the letter M is in uppercase. So, in our example, we can access the Employee object properties such as Name, Gender, City, Salary, etc. by using @Model.Name, @Model.Gender, @Model.City, and @Model.Salary respectively.

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

@model FirstMVCDemo.Models.Employee
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Page Title</title>  
</head>
<body>
    <h2>@ViewBag.Header</h2>
    <table style="font-family:Arial">
        <tr>
            <td>Employee ID:</td>
            <td>@Model.EmployeeId </td>
        </tr>
        <tr>
            <td>Name:</td>
            <td>@Model.Name</td>
        </tr>
        <tr>
            <td>Gender:</td>
            <td>@Model.Gender</td>
        </tr>
        <tr>
            <td>City:</td>
            <td>@Model.City</td>
        </tr>
        <tr>
            <td>Salary:</td>
            <td>@Model.Salary</td>
        </tr>
        <tr>
            <td>Address:</td>
            <td>@Model.Address</td>
        </tr>
    </table>
</body>
</html>

That’s it. Now run the application and navigate to the “/Home/Index” URL and you will see the employee data as expected in the webpage.

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

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

  1. Strongly Typed View in ASP.NET MVC provides compile-time error checking as well as intelligence support.
  2. 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 from Controller to the View. Then the question that comes to your mind is how we will pass the Header to a strongly typed view without using ViewBag. Well, we can do this by using the View Model in ASP.NET MVC application.

In our next article, I am going to discuss the View Model in ASP.NET \ MVC application with an example.

SUMMARY

In this article, I try to explain Strongly Typed View in ASP.NET MVC application. I hope this article will help you with your need. I would like to have your feedback. Please post your feedback, question, or comments about this article.

3 thoughts on “Strongly Typed View in ASP.NET MVC”

Leave a Reply

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