Views in ASP.NET MVC

Back to: ASP.NET MVC Tutorial For Beginners and Professionals

Views in ASP.NET MVC Application

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

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 provided to it by the controller. So you can consider the Views in ASP.NET MVC as HTML templates embedded with Razor syntax which generates HTML content that sends to the client.

Where ASP.NET MVC View Files are Stored?

In ASP.NET MVC, the views are having a “.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 important 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 be created and saved in the following order.

As we have two controllers in our application, so there are two folders created with the Views folder one per 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 files 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 the 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 that is going to return a view. In order to return a view from an action method in ASP.NET MVC Application, 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.

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 your application.

If the requested view file is found in any of the above locations, then the View generates the necessary HTML and sends 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 following 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.

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.

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

Advantages of Using Views in MVC Application:

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 the 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 web pages can be easily reused by using layout and partial views which we will discuss in our upcoming articles.

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