Loading

ASP.NET MVC

How to Create Views in ASP.NET MVC Application?. The Complete ASP.NET MVC Developer Course 2022 [Videos].

In this Video, I am going to discuss Views in an ASP.NET MVC Application with examples. Please watch our previous Video before proceeding to this Video where we discussed Controllers in the ASP.NET MVC application. As part of this Video, 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:

Lets 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.

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

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

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>
<h2>Index View Coming From Views/Home Folder</h2>
</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 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 Videos.


See All

Comments (265 Comments)

Submit Your Comment

See All Posts

Related Posts

ASP.NET MVC / Youtube

What is MVC?

MVC is an architectural software design pattern that is used for developing interactive applications where their user interaction is involved and based on the user interaction some event handling has occurred. It is not only used for web-based applications but it can also be used for Desktop or mobile-based applications where there are user interactions involved.
28-jan-2022 /28 /265

ASP.NET MVC / Youtube

How to Creat First ASP.NET MVC Application using Visual Studio?

In this article, I am going to discuss how to create the first ASP.NET MVC Application step by step from scratch using Visual Studio 2015. You can use any version as per your choice but the step will remain the same. Please read our previous article before proceeding to this article where we gave a brief introduction to ASP.NET MVC Framework.
28-jan-2022 /28 /265

ASP.NET MVC / Youtube

What is ASP.NET MVC File and Folder Structure?

In this article, I am going to discuss the auto-generated ASP.NET MVC File and File Structure when we create a new ASP.NET MVC application. Please read our previous article before proceeding to this article where we discussed how to create ASP.NET MVC 5 application step by step from scratch.
28-jan-2022 /28 /265