Dot Net Stuff

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


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.

 


    
        
        @ViewBag.Title - My ASP.NET MVC Application
        
        @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.

 
 public class BundleConfig
    {
        // For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725
        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*"));

            // Use the development version of Modernizr to develop with and learn from. Then, when you're
            // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
            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.

 
protected void Application_Start()
{
 //Other Logic
 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.

@section header{

Header Content

}

We can render above defined section header on the content page, following code sample shows how it can be done.

@RenderSection("header")

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:

@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.

@RenderBody() 

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.

@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.


Keen to hear 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.

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...!!!

blog comments powered by Disqus