Articles → ASP .NET MVC → Create Your First View In Asp.Net MVC

Create Your First View In Asp.Net MVC

In this article, I will explain how to create your first view (user interface) in asp.net MVC application.

View Folder

If you see the folder structure of asp.net MVC application then you observe that there is a folder called ‘View’. View folder contains user interface files and each view is placed in a specified sub folder as shown in the following figure

Picture showing the Views folder in the asp.net mvc project

Click to Enlarge

You can add a new view either in existing sub folder or create a new one.

Add A View

Here I will add a new view in the existing folder and show you how to browse that view. For adding a new view

Right click on the sub folder inside the ‘View’ folder and click on Add → View..

Picture showing the Add - View menu for adding the new view

Click to Enlarge

In the preceding figure, I have right clicked on ‘Home’ sub folder.

A pop up appears as shown in the following figure.

Click to Enlarge

Enter the name of the view and click on ‘Add’.

A new view is added in ‘Home’ folder. See the following image.

Picture showing the new view file added in the Home folder

Click to Enlarge

Add Action Method In Controller

Once the view is added, it is required to add a method (named as action method) in the respective controller.

For Home, the name of the controller will be ‘HomeController’ inside the ‘Controller’ folder. Add following code in controller folder.

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

In the preceding code name of the method will be same as the view name.

Browse View

A view can be browsed using the following syntax

Base_URL/Sub_Folder_Name/View_Name_Without_Extension

Click to Enlarge

Posted By -	Karan Gupta

Posted On -	Sunday, October 4, 2015

Query/Feedback

Your Email Id		**

Subject		*

Query/Feedback	Characters remaining 250	**