One 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.
1 2 3 4 5 6 7 8 9 10 11 12 13 | <meta charset="utf-8">
<title>@ViewBag.Title - My ASP.NET MVC Application</title>
<meta name="viewport" content="width=device-width">
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
@RenderBody()
@Scripts.Render("~/bundles/jquery")
@RenderSection("scripts", required: false)
|
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.
Styles.Render and Scripts.Render in ASP.NET MVC
@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 30 31 32 33 | public class BundleConfig
{
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include( "~/Scripts/jquery-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include("~/Scripts/jquery-ui-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include("~/Scripts/jquery.unobtrusive*",
"~/Scripts/jquery.validate*"));
bundles.Add(new ScriptBundle("~/bundles/modernizr").Include("~/Scripts/modernizr-*"));
bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));
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.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.
1 2 3 4 5 | protected void Application_Start()
{
System.Web.Optimization.BundleTable.EnableOptimizations = false;
}
|
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.
1 2 3 | @section header{
<h1>Header Content</h1>
}
|
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:
1 | @RenderSection("header", false)
|
RenderBody in ASP.NET MVC
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.
1 | @RenderPage("~/Views/Shared/_LoginPartial.cshtml")
|
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.