In this article, I will discuss ASP.NET MVC Views with Examples. Please review our previous article, where we covered ASP.NET MVC Controllers, before continuing with this one. In this article, we will cover the following topics related to MVC Views:

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

What are ASP.NET MVC Views?

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 is sent to the client.

Where ASP.NET MVC View Files are Stored?

In ASP.NET MVC, the views have 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 saved. The controller-specific folders are created within the Views folder. The most important point to remember is that the view file name should match the controller action name.

Example to Understand ASP.NET MVC Views:

Suppose we have created an ASP.NET MVC application with two controllers: StudentController and HomeController. The HomeController contains the following three action methods:

• AboutUs()
• ContactUs()
• Index()

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

• Index()
• Details()
• Edit()
• Delete()

The views corresponding to these actions will be created and saved in the following order:

Since we have two controllers in our application, two folders are created within the Views folder, one for each controller. The Home folder will contain all the view files (i.e., .cshtml files) specific to the HomeController. Similarly, the Student folder will contain all the .cshtml files specific to the StudentController. This is 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 ASP.NET MVC with Examples:

To understand the views in an ASP.NET MVC application, let's 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 will return a view. To return a view from an action method in an ASP.NET MVC application, we use the View() extension method, which is provided by the System.Web.Mvc.Controller base class.

Now, run the application and navigate to the /Home/Index URL. You will encounter the following error.

Let us understand why we got the above error.

As we are returning a view from the Index action method of the HomeController, by default, the MVC framework will look for a file with the name Index.aspx or Index.ascx within the Home and Shared folders of the application if the view engine is ASPX. 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 folders 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 Application

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, and uncheck the checkboxes for “create as a partial view” and “use a layout page” options. Finally, click on the Add button as shown below.

Once the Index view is created, then copy and paste the following into 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 navigate to the "/Home/Index" URL, and you will see the expected output. If you check the definition of the Controller base class, you will discover that there are eight overloaded versions of the View method, each designed to return a view in different ways, as shown below.

We will discuss each of these overloaded versions in detail as we progress through this course.

Advantages of Using Views in ASP.NET MVC Application:

The views in an ASP.NET MVC application provide a clear separation of concerns, meaning that they separate the user interface from the rest of the application, including the business and data access layers. ASP.NET MVC views use the powerful Razor syntax, which allows seamless integration between HTML and C# code. This makes it easier to manage dynamic content and rendering. Common or repetitive sections of web pages can be reused through layout and partial views, which we will explore in more detail in our upcoming articles.

In the next article, I will discuss ASP.NET MVC Models with examples. In this article, I have explained ASP.NET MVC Views with examples. I hope this article helps you understand how views work in ASP.NET MVC and supports your learning.