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

Hi everyone in this blog I’m explaining about layout page, RenderBody, RenderSection and RenderPage in MVC 4.

Layouts:

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:

<!DOCTYPEhtml>
<htmllang="en">
    <head>
        <metacharset="utf-8"/>
        <title>@ViewBag.Title - My ASP.NET MVC Application</title>
        <linkhref="~/favicon.ico"rel="shortcut icon"type="image/x-icon"/>
        <metaname="viewport"content="width=device-width"/>
        @Styles.Render("~/Content/css")
        @Scripts.Render("~/bundles/modernizr")
    </head>
    <body>
        <header>
            <divclass="content-wrapper">
                <divclass="float-left">
                    <pclass="site-title">@Html.ActionLink("your logo here", "Index", "Home")</p>
                </div>
                <divclass="float-right">
                    <sectionid="login">
                        @Html.Partial("_LoginPartial")
                    </section>
                    <nav>
                        <ulid="menu">
                            <li>@Html.ActionLink("Home", "Index", "Home")</li>
                            <li>@Html.ActionLink("About", "About", "Home")</li>
                            <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                        </ul>
                    </nav>
                </div>
            </div>
        </header>
        <divid="body">
            @RenderSection("featured", required: false)
            <sectionclass="content-wrapper main-content clear-fix">
                @RenderBody()
            </section>
        </div>
        <footer>
            <divclass="content-wrapper">
                <divclass="float-left">
                    <p>&copy;@DateTime.Now.Year - My ASP.NET MVC Application</p>
                </div>
            </div>
        </footer>
 
        @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.

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.

publicclassBundleConfig
    {
        publicstaticvoid RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(newScriptBundle("~/bundles/jquery").Include("~/Scripts/jquery-{version}.js"));
 
            bundles.Add(newScriptBundle("~/bundles/jqueryui").Include("~/Scripts/jquery-ui-{version}.js"));
 
            bundles.Add(newScriptBundle("~/bundles/jqueryval").Include("~/Scripts/jquery.unobtrusive*","~/Scripts/jquery.validate*"));
 
            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"));
        }
    }

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.

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

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

Section:

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)

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")

in my next post i'll explain aboutAjax.ActionLink and Html.ActionLink in MVC 4

blog

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

Layouts:

Basic structure of Layout page:

Styles.Render and Scripts.Render:

Section:

RenderBody:

RenderPage:

Anonymous User

Leave Comment

Comments

Liked By