Post
Ask Question

Layout View, View, And Partial View In ASP.NET

Let me explain the following terms:

  1. Layout View: Master Page type of functionalities.
  2. View: Content Page.
  3. Partial View: User Control. 

Layout View
It is used for the display of some part of the web page constant, such as header and footer, and sometimes, the left side bar or the right side bar. It has a common UI component which is shareable on all the pages.

Layout view is a parent container in which view and partial view renders on the client side.

In Inside Layout view, you will find @RenderBody(). This function will render view.

View

This is similar in type to the content page. We can display the content with or without Layout view(Master page). Sometimes, we are required to use the Layout view and sometimes it is not required.

In the view file, which uses layout view, there is no basic <HTML> , <HEAD> and <BODY> tags because it uses LayoutView tag.

If you are creating VIEW without Layout view, then the view file is created with full HTML tags like <HTML> , <HEAD> and <BODY> , because this is an individual view file.

Partial View

The Partial view is similar to the User control of Webform terminology.


Example

We want to display the current balance of the user and the number of days left for the events on the page.

Example

As you can see in the image above:

  • Indigo(Blue) line is a Layout view.
  • Yellow line is a view.
  • Purple line is a Partial view.
In the course of this article, you will learn how:
  • To create a Layout view.
  • To create a View under Layout view.
  • To create a Partial view

Steps to create Layout, View, and Partial View

To learn about views, I created an empty MVC4 project.

  1. Create ASP.NET MVC4 Web Application named: LayoutViewPartialView,

    Web Application

  2. Select Empty, as shown below:

    Empty

Now, we will create the following things:

  • A Layout view.
  • Aview under Layout view
  • APartial view

Layout View Example

  • Right click on the View Folder.
    View

  • Select View

    After selecting view, you will get the following screenshot:

    screen

Create  Layout View contents:

  1. @{  
  2. Layout = null;  
  3. }  
  4.   
  5.   
  6. <!DOCTYPE html>  
  7. <html>  
  8.     <head>  
  9.         <meta name="viewport" content="width=device-width" />  
  10.         <title>MyLayoutView</title>  
  11.     </head>  
  12.     <body>  
  13.         <div></div>  
  14.     </body>  
  15. </html>  
We editedthe default layout view.
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta name="viewport" content="width=device-width" />  
  5.         <title>MyLayoutView</title>  
  6.     </head>  
  7.     <body>  
  8.         <div>  
  9. @RenderBody()  
  10. </div>  
  11.     </body>  
  12. </html>  
I removed these lines,
  1. @ {  
  2.     Layout = null;  
  3. }  
I removed it because we do not want nested Layout view.

I put @RenderBody, because VIEW (content pages) will render there.

@RenderBody()
View Example

Now, we are going to create View, which is under LayoutView.

View Example

By default, LayoutView.cshtml will display as shown below:
  1. @{  
  2.     ViewBag.Title = "ViewUnderLayoutView";  
  3.     Layout = "~/Views/MyLayoutView.cshtml";  
  4. }  
  5.   
  6. <h2>ViewUnderLayoutView</h2>  
Partial View Example

Now, we are going to create Partial view, which is under Layout View / View.

Partial View Example

There is no predefined text that will come in MyPartialView.cshtml file.

 


Similar Articles