What is Views in ASP.NET Core MVC?. The Complete ASP.NET Core Developer Course 2023 [Videos].

A view is used to display data using the model class object. The Views folder contains all the view files in the ASP.NET MVC application. A controller can have one or more action methods, and each action method can return a different view. In short, a controller can render one or more views.

Views in ASP.NET Core MVC Application

In this Video, I am going to discuss Views in the ASP.NET Core MVC application. Please read our previous Video before proceeding to this Video where we discussed  application. As part of this Video, we are going to discuss the following concepts related to Views in ASP.NET Core MVC Application.

1. What are Views in ASP.NET Core MVC Application?
2. Roles of View.
3. Where View Files are Stored in ASP.NET Core MVC Application?
4. How to create View in ASP.NET Core?
5. How to return views from action methods?
6. What are the difference between View() and View(object model) Extension Methods?
7. How to specify the Absolute view file path?
8. What are the Advantages of Using Views in ASP.NET Core MVC Application?

What is a View in ASP.NET Core MVC Application?

In the Model-View-Controller (MVC) pattern, the View is the component that contains logic to represent the model data (the model data provided to it by a controller) as a user interface with which the end-user can interact. The Views in MVC are HTML templates with embedded Razor mark-up which generate content that sends to the client. In our upcoming Videos, we will discuss the Razor syntax in detail.

In ASP.NET Core MVC Application, a view is a file with “.cshtml” (for C# language) extension. The meaning of cshtml = cs (c sharp) + html. That means the view is the combination of programming language (ex C#) and HTML (Hypertext Mark-up Language).

The Views in ASP.NET Core MVC Application are generally returned from the Controller Action Method. We use the ViewResult return type to return a view from an action method.

Role of View in ASP.NET Core MVC Application?

A view in ASP.NET Core MVC Application is responsible for UI i.e. application data presentation. That means we display information about the website on the browser using the views only. A user generally performs all the actions on a view such as a button click, form, list, and other UI elements.

Where are views placed in ASP.NET Core MVC Application?

By default, Views are available inside the Views folder at the root. Usually, views are grouped into folder names with applications controller. Generally, views are grouped based on features.

Usually, each controller will have its own folder in which the controller-specific view files are going to be stored. The controller-specific folders are going to be created within the Views folder only. The point that you need to remember is the view file name is the same as the action method name of a controller with the “.cshtml” extension.

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

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

On the other hand, the StudentController is created with the following four action methods.

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

Then following is the folder and file structure of the Views

As you can see in the above image, a separate folder is created for each controller within the Views Folder. The Home Controller is represented by a Home folder and the Student Controller is represented by the Student folder inside the Views folder.

The Home folder contains the views for Index, AboutUs, and ContactUs webpages. So, whenever a user requests for any of these webpages then the Home Controller action method determines which of the above three views to use to build the webpage and return to the user.

Similarly, the Student folder contains the views for the Index, Details, Edit, and Delete webpages. So, whenever a user requests for any of these webpages then the Student Controller action method determines which of the above views to use in order to build the webpage and return to the user.

Note: In addition to action-specific views, we also have provided with partial views, layouts, and view components that can also be used to reduce the repetition and allow for reuse within the application’s views. We will discuss each of these in our upcoming Videos.

Understanding Views with an Example in ASP.NET Core MVC Application:

As we are discussing everything from scratch, so let us first create an ASP.NET Core Web Application with the Empty Project template. By default, the Empty Project does not include Controllers and Views.

Step1: Setting MVC Service and MVC Middleware

In order to make your ASP.NET Core Web Application as an MVC application, we need to to the request processing pipeline. And this can be done within the ConfigureServices and Configure method of the Startup class which is present inside the Startup.cs class file.

So, open the Startup.cs file and then copy and paste the below code in it which will add the required MVC services to the built-in dependency injection container as well as will add the MVC middleware to the request processing pipeline.

Step2: Creating Controllers

First, create a folder at the root level of the project with the name Controllers and then add two controllers within this folder with the name HomeController and StudentController. If you are new to Controllers then please read our previous Video where we discussed Controllers in detail as well as we also discuss how to create a controller in ASP.NET Core MVC Application. Here, while creating the Controllers you need to select the MVC Controller – Empty template.

At this time your project folder structure should be looks like below.

Open HomeController and then copy and paste the below code in it.

As you can see in the above HomeController code, we have only one action method i.e. Index. As the return type of the Index() action method is ViewResult, so this action method is going to return a view. In order to return a view, here we are using the View() extension method which is provided by Microsoft.AspNetCore.Mvc.Controller Base class.

Now run the application and navigate to the “/Home/Index” URL or to the default URL and you will see 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 ASP.NET Core MVC Framework will look for a file with the name Index.cshtml in the following three locations.

1. First, it will look for the “Index.cshtml” file within the “/Views/Home” folder as the action method belongs to Home Controller.
2. Then it will look in the “/Views/Shared/” folder
3. Finally, it will try to find out the “Index.cshtml” file in the “/Pages/Shared/” folder.

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

Step3: Creating Index View

As we already discussed views are going to be created in a special folder called Views. So, let us first add a folder to the project root level with the name Views. To do so, right-click on the Project and then select Add => New Folder from the context menu which will add a new folder and then rename the folder as Views.

As we already discussed the Action Views are going to be created inside the folder whose name is the same as the Controller name. We want to create a view for the Index action method of Home Controller. So, let us first add the Home folder inside the View folder. To do so, right-click on the Views folder and then select the Add => New Folder option which will add a new folder and then simply rename the folder as Home.

Once you created the Home folder, then we need to create a view within this Home folder. In ASP.NET Core MVC, we can add views in many different ways and we will discuss this one by one.

Right-click on the Home folder and then select Add => View option which will open the Add View window as shown in the below image. Here, you need to select the Razor View item and then click on the Add button.

Once you click on the Add button, then it will open the Add Razor View window. Here, you need to give the View name as Index, Select the Empty (without model) template, uncheck the create a partial view and use a layout page checkbox and then click on the Add button as shown in the below image.

Once you click on the Add button then it should create the Index.cshtml view within the Home folder as shown in the below image.

Now open Index.cshtml file and then copy and paste the following code in it.

With the above changes in place, now run the application and you should get the output as expected as shown in the below image.

Understanding View() Method in ASP.NET Core MVC Application:

If you go to the definition of the Controller base class, then you will find there four overload versions of the View method as shown in the below image.

Let us understand the use and significance of each of the above-overloaded versions of the View Extension method.

View() vs View(object model) Extension Methods:

If you are using the View() or View(object model) extension method to return a view, then it will look for the view file with the same name as the action method name. If you want to pass some model data then you need to use the overloaded version which takes object model as input parameter else you can simply use the View() extension method which does not take any parameter.

For example, in the below code we are using the View() extension method which does not take any parameter to return a view from the Index action method of Home Controller. So, in this case, by default, the ASP.NET Core MVC framework will look for a view with the name Index.cshtml within the “Views/Home” folder.

View(string viewName) vs  View(string viewName, object model) Extension Methods:

If you want to return a view from an action method which is name is different than the action method name then you need to use either View(string viewName) or View(string viewName, object model) Extension Methods. If you want to pass model data to the view then you need to use View(string viewName, object model) method else you can simply use the View(string viewName) method which takes the view name as a parameter,

To understand this concept, let’s create a view with the name Test.cshtml within the Home folder. Please follow the same step as we follow to create the index.cshtml view. Once you created the Test.cshtml view, then open the Test.cshtml file and copy-paste the below code in it.

Now modify the Index action method of HomeController class as shown below to use the View extension method which takes the view name as a parameter.

Now run the application and navigate to the “/Home/Index” URL and you will see that the response is coming from the Test view as shown in the below image.

Note: You need to specify the view name without extension. Using this overloaded version, it is also possible to specify the file path. You can specify either the absolute path or relative path.

How to specify the Absolute view file path?

Let us modify the Index action method of the Home controller as shown below to specify the Absolute path of the view file. So here, the ASP.NET Core MVC framework will look for a view file with the name “Test.cshtml” within the “Views/Home” folder.

Note: When you are using the absolute path, then it is mandatory to use the .cshtml extension.

When you are using an absolute path, in order to get to the project’s root directory, you can use / or ~/. So. you can use any one of the following and all are going to do the same thing.

Another way of Creating Views:

Let us add a new action to the HomeController with the name About. So, please modify the HomeController as shown below.

Now, right-click anywhere within the About action method and then click on the Add View from the context menu as shown in the below image.

Once you click on the Add View then it will open Add New Scaffolded Item window as shown below where you need to select the Razor view and click on the Add button.

Once you click on the Add button, then it will open the Add Razor View window and by default, it will give the View name as About (action method name) and finally click on the Add button as shown in the below image.

Once you click on the Add button, then it will add the About.cshtml file within the View/Home folder as shown in the below image.

What are the Advantages of Using Views in ASP.NET Core MVC Application?

The Views in MVC application provides the separation of concerns (codes). It separates the user interface from the business logic or you can say from the rest of the application. The ASP.NET Core MVC views use the Razor syntax which makes it easy to switch between the HTML markup and C# code. The Common or repetitive aspects of the application’s user interface can be easily reused between views using layout and shared directives or partial views.