stronglyTyped in ASP.NET MVC

« Previous Next »

Strongly Typed Views in ASP.NET MVC

Strongly Typed Views in ASP.NET MVC Application

In this article, we will explore Strongly Typed Views in an ASP.NET MVC application, along with practical examples. Before continuing with this article, make sure to check out our previous one, where we discussed ViewBag in ASP.NET MVC. By the end of this article, you will have a clear understanding of what a Strongly Typed View is in ASP.NET MVC, as well as when and how to use it effectively in your MVC application.

In ASP.NET MVC, there are several ways to pass data from a controller action method to a view, such as using ViewBag, ViewData, TempData, or a strongly typed model object. When data is passed to a view using ViewBag, TempData, or ViewData, the view becomes loosely typed. In this article, we will focus on how to create a strongly typed view in an ASP.NET MVC application.

Creating Strongly Typed View in MVC

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

We will use the overloaded version of the View() extension method that accepts only the model object as an input parameter. Since the input parameter is of the object type, we can pass any data. 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:

To create a strongly typed view in an ASP.NET MVC application, we must define the model type within the view using the @model directive. In this case, since the Employee class will serve as the model, we need to include the model directive as shown below.

@model FirstMVCDemo.Models.Employee

The above statement indicates that we are using FirstMVCDemo.Models.Employee as the model for this view. Note that in the @model directive, the letter "m" is lowercase, and the statement should not be followed by a semicolon.

Once the model is specified, we can access its properties by using @Model, where the letter "M" is uppercase. In this example, we can access the properties of the Employee object, such as Name, Gender, City, and Salary, 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 all! Now, run the application and go to the “/Home/Index” URL. You should see the employee data displayed correctly on the webpage as expected.

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

Using strongly typed views in an ASP.NET MVC application provides the following benefits:

A strongly typed view in ASP.NET MVC offers compile-time error checking and provides intelligence support.
If a property name is misspelled, the error is detected at compile time instead of at runtime.

In our example, we are still using ViewBag to pass the Header from the Controller to the View. Then the question that should come 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 the ASP.NET MVC application.

In the upcoming article, I will be discussing View Models in the ASP.NET MVC application, along with an example. In this article, I have explained the concept of Strongly Typed Views in ASP.NET MVC. I hope this article on Strongly Typed Views has been helpful for your needs. I would appreciate your feedback. Feel free to share your questions, comments, or suggestions about this article.

« Previous Next »