Please enable Javascript to correctly display the contents on Dot Net Tricks!

Layouts, RenderBody, RenderSection and RenderPage in ASP.NET MVC

 Print 
  Author : Shailendra Chauhan
Posted On : 29 Mar 2014
Total Views : 221,499   
Updated On : 26 Sep 2016
 

Layouts are used to maintain a consistent look and feel across multiple views within ASP.NET MVC application. As compared to Web Forms, layouts serve the same purpose as master pages, but offer a simple syntax and greater flexibility.

Basic structure of Layout Page

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width" />
 <title>@ViewBag.Title</title>
 @Styles.Render("~/Content/css")
 @Scripts.Render("~/bundles/modernizr")
</head>
<body>
 @RenderBody()

 @Scripts.Render("~/bundles/jquery")
 @RenderSection("scripts", required: false)
</body>
</html>

In Asp.Net MVC, at application level we have _ViewStart file with in Views folder for defining the default Layout page for your ASP.NET MVC application. For rendering layout page refer this article Different ways of rendering layouts in Asp.Net MVC.

Styles.Render and Scripts.Render

Style.Render is used to render a bundle of CSS files defined within BundleConfig.cs files. Styles.Render create style tag(s) for the CSS bundle. Like Style.Render, Scripts.Render is also used to render a bundle of Script files by rendering script tag(s) for the Script bundle.

public class BundleConfig
{
 public static void RegisterBundles(BundleCollection bundles)
 {
 bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
 "~/Scripts/jquery.unobtrusive*",
 "~/Scripts/jquery.validate*"));
 
 bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
 "~/Content/themes/base/jquery.ui.core.css",
 "~/Content/themes/base/jquery.ui.resizable.css",
 "~/Content/themes/base/jquery.ui.selectable.css",
 "~/Content/themes/base/jquery.ui.button.css",
 "~/Content/themes/base/jquery.ui.dialog.css",
 "~/Content/themes/base/jquery.ui.theme.css"));
 }
} 

Note

  1. Styles.Render and Scripts.Render generate multiple style and script tags for each item in the CSS bundle and Script bundle when optimizations are disabled.

  2. When optimizations are enabled, Styles.Render and Scripts.Render generate a single style and script tag to a version-stamped URL which represents the entire bundle for CSS and Scripts.

You can enable and disable optimizations by setting EnableOptimizations property of BundleTable class to true or false with in Global.asax.cs file as shown below.

protected void Application_Start()
{
 //Other code has been removed for clarity
 System.Web.Optimization.BundleTable.EnableOptimizations = false;
}

Sections

A section allow you to specify a region of content within a layout. It expects one parameter which is the name of the section. If you don’t provide that, an exception will be thrown. A section in a layout page can be defined by using the following code.

@section header{
<h1>Header Content</h1>
}

You can render above defined section header on the content page as given below:

@RenderSection("header")

By default, sections are mandatory. To make sections optional, just provides the second parameter value as false, which is a Boolean value.

@RenderSection("header",false)

Note

A view can define only those sections that are referred to in the layout page otherwise an exception will be thrown.

RenderBody

RenderBody method exists in the Layout page to render child page/view. It is just like the ContentPlaceHolder in master page. A layout page can have only one RenderBody method.

 @RenderBody()

RenderPage

RenderPage method also exists in the Layout page to render other page exists in your application. A layout page can have multiple RenderPage method.

@RenderPage("~/Views/Shared/_Header.cshtml")
What do you think?

I hope you will enjoy the Layouts, RenderBody, RenderSection and RenderPage while working with ASP.NET MVC. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome.



Free Interview Books
 
COMMENTS
Manav Pandya Reply 275 days 21 hours 4 mins ago

I am using scaffold template , and it shows every time an error in "Script.Render()" and "Style.Render()" , how to resolve it

24 SEP
Angular2 and Angular4 (Classroom)
08:30 AM-11:30 AM IST
23 SEP
MEAN Stack (Classroom)
8:30 Am To 11:30 Am
23 SEP
Microsoft Azure Infrastructure Solutions (Online)
08:00 PM-11:00 PM IST / 9:30 AM-12:30 PM CST
20 SEP
MEAN Stack (Online)
07:00 AM-09:00 AM IST
20 SEP
ASP.NET MVC with Angular4 (Online)
9:00PM- 11:00PM IST(+5:30GMT)
16 SEP
Angular2 and Angular4 (Online)
08:00 AM-10:00 AM IST(+5.30 GMT)
7 SEP
ASP.NET MVC with Angular4 (Online)
09:00 PM to 11:00 PM IST (+5:30 GMT)
22 AUG
ASP.NET Core with Angular4 (Online)
07:00 AM - 9:00 AM IST(+5:30 GMT)
19 AUG
MEAN Stack 2 (Online)
5:30 Pm - 7:00 PM IST (+5:30 GMT)
19 AUG
ASP.NET MVC with Angular4 (Online)
10:30 Am to 12:30 PM IST (+ 5:30 GMT)
19 AUG
NodeJS with Angular4 (Classroom)
04:00 PM to 07:00 PM IST (+5:30 GMT)
12 AUG
ASP.NET MVC with Angular4 (Classroom)
11:30 AM - 1:30 PM IST (+5:30GMT)
15 JUL
ASP.NET MVC with Angular4 (Online)
03:30 PM - 05:30 PM IST(+5.30 GMT)
LIKE US ON FACEBOOK
 
+