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

7/16/2014 Exploring Layouts, RenderBody, RenderSection and RenderPage in .NET MVC
http://www.dotnet-stuff.com/tutorials/aspnet-mvc/exploring-layouts-renderbody-rendersection-and-renderpage-in-asp-net-mvc 1/5
O
Exploring Layouts, RenderBody, RenderSection and RenderPage in ASP.NET
MVC
Posted Date: 17. June 2014 Posted By: Anil Sharma
Categories: ASP.NET MVC
Keywords: Exploring Layouts, RenderBody in MVC, RenderSection in MVC, RenderPage in ASP.NET MVC, Styles.Render
and Scripts.Render in ASP.NET MVC
ne of the major requirements for our web application is to maintain a consistent look and feel across all of the
pages within your web-site/application. ASP.NET 2.0 introduced the concept of “Master Pages” which helps
enable this when using .aspx based pages or templates. To achieve this concept in ASP.NET MVC application,
Razor View Engine supports this concept with a feature called “layouts”- which allow us to define a common site
template, and then inherit its look and feel across all the views/pages on our site. Following code sample show the
basic structure of Layout.cshtml file.
This Layout.cshtml file is used to maintain a consistent look and feel in out Asp.Net MVC application, 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 in ASP.NET MVC
 


1
2
3
4
5
6
7
8
9
10
11
12
13
<metacharset="utf-8">
<title>@ViewBag.Title-MyASP.NETMVCApplication</title>
<metaname="viewport"content="width=device-width">
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
@RenderBody()
@Scripts.Render("~/bundles/jquery")
@RenderSection("scripts",required:false)

@Style.Render is used to render a bundle of CSS files defined within BundleConfig.cs files. It(Style.Render) is
responsible to create style tag(s) for the CSS bundle. Style.Render generate multiple style tags for each items in the
CSS bundles we have when the optimizations are disabled. By enabling optimization Styles.Render generate a
single style tag to a version-stamped URL which represents the entire bundle for CSS.
@Scripts.Render is used to render a bundle of Script files. It(Scripts.Render) is responsible for rendering script
tag(s) for the Script bundle. Scripts.Render generate multiple script tags for each items in the Scripts bundles we
have when the optimizations are disabled. By enabling optimization Scripts.Render generate a single scripts tag to a
version-stamped URL which represents the entire bundle for Scripts. Following is the sample BundleConfig.cs file's
code.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
publicclassBundleConfig
{
//FormoreinformationonBundling,visithttp://go.microsoft.com/fwlink/?LinkId=254725
publicstaticvoidRegisterBundles(BundleCollectionbundles)
{
bundles.Add(newScriptBundle("~/bundles/jquery").Include("~/Scripts/jquery-{version}.js"
bundles.Add(newScriptBundle("~/bundles/jqueryui").Include("~/Scripts/jquery-ui-{version}
bundles.Add(newScriptBundle("~/bundles/jqueryval").Include("~/Scripts/jquery.unobtrusive
"~/Scripts/jquery.validate*"));
//UsethedevelopmentversionofModernizrtodevelopwithandlearnfrom.Then,whenyo
//readyforproduction,usethebuildtoolathttp://modernizr.comtopickonlythetest
bundles.Add(newScriptBundle("~/bundles/modernizr").Include("~/Scripts/modernizr-*"));
bundles.Add(newStyleBundle("~/Content/css").Include("~/Content/site.css"));
bundles.Add(newStyleBundle("~/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.accordion.css",
"~/Content/themes/base/jquery.ui.autocomplete.css",
"~/Content/themes/base/jquery.ui.button.css",
"~/Content/themes/base/jquery.ui.dialog.css",
"~/Content/themes/base/jquery.ui.slider.css",
"~/Content/themes/base/jquery.ui.tabs.css",
"~/Content/themes/base/jquery.ui.datepicker.css",
"~/Content/themes/base/jquery.ui.progressbar.css",
"~/Content/themes/base/jquery.ui.theme.css"));
}

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.
RenderSection in ASP.NET MVC
Layout pages also have the concept of sections. A layout page can only contain one RenderBody method, but can
have multiple sections. To create a section you use the RenderSection method. The difference between
RenderSection and RenderPage is RenderPage reads the content from a file; whereas RenderSection runs code
blocks you define in your content pages. The following code sample shows how to use RenderSection in ASP.NET
MVC. A view can define only those sections that are referred to in the layout page otherwise an exception will be
thrown.
We can render above defined section header on the content page, following code sample shows how it can be
done.
In ASP.NET MVC by default, sections are mandatory. To make sections optional, just add the second parameter,
which is a Boolean value. Following code block shows that:
RenderBody in ASP.NET MVC
30
31
32
33
}
1
2
3
4
5
protectedvoidApplication_Start()
{
//OtherLogic
System.Web.Optimization.BundleTable.EnableOptimizations=false;
}
1
2
3
@sectionheader{
<h1>HeaderContent</h1>
}
1 @RenderSection("header")
1 @RenderSection("header",false)

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 only be one RenderBody method per layout page. The RenderBody method
indicates where view templates that are based on this master layout file should “fill in” the body content. Following
code block shows how to use RenderBody in ASP.NET MVC.
RenderPage in ASP.NET MVC
RenderPage method also exists in the Layout page to render other page exists in your application. A layout page
can have multiple RenderPage method. This is achieved by using the RenderPage method. This method takes
either one or two parameters. The first is the physical location of the file, the second is an optional array of objects
that can be passed into the page.
Summary:This article covers the Layouts, RenderBody, RenderSection and RenderPage in ASP.NET MVC. I hope
this will be useful for you. I will suggest you to go through another article to understand different ways of rendering
layouts in Asp.Net MVC.
Keen to here from you...!
If you have any questions related to what's mentioned in the article or need help with any issue, ask it, I would love to
here from you. Please MakeUseOf Contact and i will be more than happy to help.
1 @RenderBody()
1 @RenderPage("~/Views/Shared/_LoginPartial.cshtml")

About the author
Anil Sharma is Chief Editor of dotnet-stuff.com. He's a software professional
and loves to work with Microsoft .Net. He's usually writes articles about .Net
related technologies and here to shares his experiences, personal notes,
Tutorials, Examples, Problems & Solutions, Code Snippets, Reference
Manual and Resources with C#, Asp.Net, Linq , Ajax, MVC, Entity
Framework, WCF, SQL Server, jQuery, Visual Studio and much more...!!!
Connect with the author: • Google + • Linkedin

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

Recommended

Recommended

More Related Content

Recently uploaded

Recently uploaded (20)

Featured

Featured (20)

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