Views In ASP.NET MVC

Introduction

 

This article will explain the concept of Views in ASP.NET MVC application with an example.

• ASP.NET MVC Folder And File Structure
• Models In ASP.NET MVC Application

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

 

Where are ASP.NET MVC View Files 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 main point that you need to keep in mind is the view file name and the controller action name are going to be the same.

 

Step 1

 

Open Visual Studio 2015 or a version of your choice and create a new project.

 

Step 2

 

Choose the web application project and give an appropriate name for your project.

 

 

Step 3

 

Select MVC template below and click OK.

 

 

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

1. About()
2. Contact()
3. Index()

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

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

Step 4

 

Right-click on Controllers folder and add a controller.

 

 

A window will appear. Choose MVC5 Controller-Empty and click "Add".

 

 

After clicking on "Add", another window will appear with DefaultController. Change the name to HomeController and click "Add". The HomeController will be added under the Controllers folder. Don’t change the Controller suffix for all controllers, change only the highlight, and instead of Default, just change Home,

 

 

Similarly, add "EmployeeController".

 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MvcViews_Demo.Controllers
{
    public class HomeController : Controller
    {
        // GET: Home
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult About()
        {
            return View();
        }

        public ActionResult Contact()
        {
            return View();
        }
    }
}

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MvcViews_Demo.Controllers
{
    public class EmployeeController : Controller
    {
        // GET: Employee
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult Details()
        {
            return View();
        }

        public ActionResult Create()
        {
            return View();
        }

        public ActionResult Edit()
        {
            return View();
        }

        public ActionResult Delete()
        {
            return View();
        }
    }
}

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 Employee Folder is going to contain all the .cshtml files which are specific to Employee Controller. This is the reason why the Home folder contains the Index, “About” and “Contact” cshtml files. Similarly, the Employee folder contains the Index, Details, Create, Edit, and Delete view files.

 

Understanding Views in MVC with Examples

 

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

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MvcViews_Demo.Controllers
{
    public class HomeController : Controller
    {
        // GET: Home
        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.

 

 

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

 

Step 5

 

Right-click on Index method in HomeController the "Add View" window will appear with the default index name checked (use a Layout page), and click on "Add.

 

 

Code for Index View

@{
    ViewBag.Title = "Index";
}

<h2>Hello World, Welcome to MVC(Model View Controller)</h2>

Advantages of Using Views

 

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.