Views in ASP.NET MVC

Views in ASP.NET MVC Application

In this article, I am going to discuss Views in ASP.NET MVC application with examples. Please read our previous article before proceeding to this article where we discussed Controllers in ASP.NET MVC application. As part of this article, we are going to discuss the following pointers.

  1. What are the Views in ASP.NET MVC?
  2. Where ASP.NET MVC View Files are Stored?
  3. How to create Views in ASP.NET MVC Application?
  4. Understanding Views in MVC with Multiple Examples.
  5. Advantages of Using Views in MVC
What are the Views in ASP.NET MVC?

In the MVC pattern, the view component contains the logic to represent the model data as a user interface with which the end user can interact. Typically, it creates the user interface with the data from the model which provided to it by the controller in an MVC application. So you can consider the Views in ASP.NET MVC as HTML templates embedded with Razor syntax which generate HTML content that sends to the client.

Where ASP.NET MVC View Files are Stored?

In ASP.NET MVC, the views are having “.cshtml” extension when we use C# as the programming language with Razor syntax. Usually, each controller will have its own folder in which the controller-specific .cshtml files (views) are going to be saved. The controller-specific folders are going to be created within the Views folder. The most point that you need to keep in mind is the view file name and the controller action name are going to be the same.

Example:

Let’s say, we created an ASP.NET MVC application with two controllers i.e. StudentController and HomeController. The HomeController that we created is having the following three action methods.

  1. AboutUs()
  2. ContactUs()
  3. Index()

Similarly, the StudentController is created with the following four action methods.

  1. Index()
  2. Details()
  3. Edit()
  4. Delete()

The views are going to created and saved in the following order.

Views in ASP.NET MVC

As we have two controllers in our application, so there are two folders created with the Views folder one per each Controller. The Home  Folder is going to contain all the view files (i.e. cshtml files) which are specific to HomeController. Similarly, the Student Folder is going to contain all the .cshtml file which are specific to Student Controller. This is the reason why, the Home folder contains the Index, AboutUs and ContactUs cshtml files. Similarly, the Student folder contains the Index, Details, Edit and Delete view files. 

Understanding Views in MVC with Examples:

To understand the views in ASP.NET MVC application, let us first modify the HomeController as shown below.

using System.Web.Mvc;
namespace FirstMVCDemo.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }
    }
}

In the above HomeController, we created an Action method which is going to return a view. In order to return a view from an action method in MVC, we need to use the View() extension method which is provided by System.Web.Mvc.Controller Base class.

Now run the application and navigate to the “/Home/Index” URL and you will get the following error.

Views in ASP.NET MVC

Let us understand why we got the above error.

As we are returning a view from the Index action method of Home Controller, by default the MVC Framework will look for a file with the name Index.aspx or Index.ascx within the Home and Shared folder of the application if the view engine is APSX. If it is not found there then it will search for a view file with the name Index.cshtml or Index.vbhtml within the Home and Shared folder of the application.

If the requested view file is found in any of the above locations, then the View generates the necessary HTML and send the generated HTML back to the client who initially made the request. On the other hand, if the requested view file is not found in any of the above locations, then we will get the above error.

Adding Views in ASP.NET MVC

In order to add the Index view, Right-click anywhere with the Index() function and then click on the “Add View” option which will open the Add View dialog window. From the Add View window, provide the name for the view as Index, select Template as Empty, uncheck the checkboxes for “create as a partial view” and “use a layout page” option. Finally, click on the Add button as shown below.

Adding Views in ASP.NET MVC

Once the Index view is created, then copy and paste the following in it.

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <div> 
        <h1>Index View Coming From Views/Home Folder</h1>
    </div>
</body>
</html>

That’s it. Now run the application and navigates to the “/Home/Index” URL and you will see the output as expected. If you go to the definition of Controller base class, then you will find there eight overload versions of the View method which return a view as shown below.

Overloaded Versions of View in MVC

Each of the above-overloaded versions we will discuss as we progress through this course.

Advantages of Using Views in ASP.NET MVC:

The Views in ASP.NET MVC application provides the separation of concerns (codes). It means, it separates the user interface from the rest of the application such as business layer and data access layer. The ASP.NET MVC views use the advanced Razor syntax which makes it easy to switch between the HTML and C# code. The common or repetitive sections of the webpages can be easily reused between by using layout and partial views.

In the next article, I am going to discuss the Models in ASP.NET MVC application. Here, in this article, I try to explain the Views in ASP.NET MVC application with examples. I hope this article will help you with your need.

Leave a Reply

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