Getting Started With ASP.NET MVC - Part Five

In this article, you will learn about Layouts in MVC, RenderBody in MVC, Layout page location in the folder structure of MVC, and View Start for Layout.

Introduction

 
This article explains the basics of ASP.NET MVC and explains about Layout in MVC, RenderBody in MVC, Layout page location in the folder structure of MVC, View Start for Layout, View Start for Layout. Read the previous part of the articles before reading this article.

Layout in MVC

 
Layout is the common design view in MVC. We can use the layout of all the pages. For example, header, footer, and menu bar are common for all the pages so we no need to write the same coding again and again in all the pages. Or, we can create one layout page and call the layout page to all views.
 
Layout in MVC 
Layout in MVC

RenderBody

 
RenderBody is used for rendering the content of the child view. In layout pages, it renders the portion of a content page. It takes the content of the child page and merges into the layout. The above diagram explains the layout and help of RenderBody in the layout. It is a method of WebPageBase abstract class and its return type is HelperResult class.
  1. namespace System.Web.WebPages  
  2. {  
  3.     //  
  4.     // Summary:  
  5.     //     Serves as the base class for classes that represent an ASP.NET Razor page.  
  6.     public abstract class WebPageBase : WebPageRenderingBase  
  7.     {  
  8.   
  9.         public HelperResult RenderBody();  
  10.         public override HelperResult RenderPage(string path, params object[] data);  
  11.         public HelperResult RenderSection(string name, bool required);  
  12.         public HelperResult RenderSection(string name);  
  13.         public override void Write(object value);  
  14.     }  
  15. }  

Layout Page Location

 
We can use the layout anywhere in the MVC application because the layout page is often located inside the Shared folder under View folder. A shared folder has full access permission to render any view. We can see in the below screenshot for the location of layout in the MVC folder structure.
 
Layout Page Location
 
Go to the shared folder and double click the “_Layout.cshtml” page. We can see the sample code of layout. This layout page added itself when we created the MVC application, if we select an empty template, it will not come by design.
 
Layout Page Location
 
We can use single RenderBody in layout page, we will be getting an error if try to use more than one RenderBody. We can find the error looks like the below screenshot.
 
Layout Page Location
 

Add New Layout Page

 
We can add more than one layout page in MVC, add new layout page using the following steps.
 
Step 1
 
Go to View folder, right-click on the Shared folder and click “Add” then click the “New Item”.
 
Add New Layout Page
 
Step 2
 
“Add New Item” window will be open after click New Item. Go to “Razor” under web, select “Layout Page (Razor v3)” and give the layout name, finally click Add.
 
Add New Layout Page
 
Step 3
 
We can see the new layout in the shared folder and we have to mention underscore (_) prefix of the layout page like “_Layout1.cshtml”.
 
Add New Layout Page
 

View Start for Layout

 
ViewStart.cshtml is the main part of the layout, here mention which layout should load to all the pages. It is the beginning stage for rendering the view. Go to Views folder and double click the VewStart.cshtml and we can see the looks like below screenshot.
 
View Start for Layout
 
View Start for Layout
 
Run the application and render the default layout with a child page view. Here we have mentioned the “_Layout.cshtml” so our application page design looks like the below screenshot.
 
View Start for Layout
 
The marked part is the layout view in the above screenshot and other is the child view content. We have added a new layout page using the above steps. Newly added layout code looks like below.
 
View Start for Layout
 
We are changing the new layout page (“Layout1.cshtml”) in ViewStart.cshtml. We will be getting a different page design view after changing the layout.
 
View Start for Layout
 
View Start for Layout
 
We have two layout pages, so we need to add the default layout to all views but we can make the newly added layout to render a particular one view. Go to that particular view and add the layout. The code for this looks like below.
 
View Start for Layout
 
Default Layout does not render the “Index.cshtml” view, here default layout replacing using “Layout = "~/Views/Shared/_Layout1.cshtml";” in particular view. We will be getting different view design in Index.cshtml and other views.
 
View Start for Layout
 

Conclusion

 
This article explained about layout in MVC, RenderBody in MVC, layout page location in the folder structure of MVC, and view start for layout. I hope this is very useful for new learners and freshers.