What is View in ASP.NET MVC

83
what is view in mvc

View in ASP.NET MVC

In this article, we will learn about the View in MVC framework with an example.

what is view in mvc

The view is a user interface. The view displays data from the model to the user and also enables them to modify the data.

ASP.NET MVC views are stored in the Views folder. Different action methods of a single controller class can render different views, so the Views folder contains a separate folder for each controller with the same name as controller, in order to accommodate multiple views.

For example, views, which will be rendered from any of the action methods of HomeController, resides in Views > Home folder. In the same way, views which will be rendered from StudentController will reside in Views > Student folder as shown below.

view-folder-for-controllers

Note: Shared folder contains views, layouts or partial views which will be shared among multiple views.

Razor View Engine in MVC

Microsoft introduced the Razor view engine and packaged with MVC 3. You can write a mix of HTML tags and server-side code in razor view. Razor uses @ character for server-side code instead of traditional <% %>.

You can use C# or Visual Basic syntax to write server-side code inside razor view. Razor view engine maximizes the speed of writing code by minimizing the number of characters and keystrokes required when writing a view. Razor views files have .cshtml or .vbhtml extension.

ASP.NET MVC supports the following types of view files:

View file extension Description
.cshtml C# Razor view. Supports C# with HTML tags.
.vbhtml Visual Basic Razor view. Supports Visual Basic with HTML tags.
.aspx ASP.NET web form
.ascx ASP.NET web control

MVC Create View from Controller

Let’s see how to create a new view using Visual Studio 2013 for Web with MVC 5.

We have already created StudentController and Student Model in the previous articles. Now, let’s create a Student view and understand how to use model into view.

We will create a view, which will be rendered from the Index method of StudentContoller. So, open a StudentController class -> right click inside Index method -> click Add View..

add-view-1

In the Add View dialogue box, keep the view name as Index. It’s good practice to keep the view name the same as the action method name so that you don’t have to specify the view name explicitly in the action method while returning the view.

Select the scaffolding template. Template dropdown will show default templates available for Create, Delete, Details, Edit, List or Empty view. Select “List” template because we want to show a list of students in the view.

addview2

Now, select Student from the Model class dropdown. Model class dropdown automatically displays the name of all the classes in the Model folder. We have already created a Student Model class in the previous article, so it would be included in the dropdown.

addview3

Check “Use a layout page” checkbox and select _Layout.cshtml page for this view and then click Add button.

This will create Index view under View -> Student folder as shown below:

addview4

The following code snippet shows an Index.cshtml created above.

Views\Student\Index.cshtml

As you can see in the above Index view, it contains both Html and razor codes. Inline razor expression starts with @ symbol. @Html is a helper class to generate HTML controls. You will learn razor syntax and HTML helpers in the coming sections.

razor-view

The above Index view would look like below.

 index-view

Note: Every view in the ASP.NET MVC is derived from WebViewPage class included in System.Web.Mvc namespace. For more refer to MSDN

Conclusion

I hope you liked this article about what is a View in MVC. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome.

LEAVE A REPLY

Please enter your comment!
Please enter your name here