Home > DeveloperSection > Blogs > Layouts, RenderBody, RenderSection and RenderPage in ASP.NET MVC 4

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


ASP.Net ASP.NET MVC  Mvc4 
Ratings:
0 Comment(s)
 5643  View(s)
Rate this:

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:

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="utf-8" />

        <title>@ViewBag.Title - My ASP.NET MVC Application</title>

        <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />

        <meta name="viewport" content="width=device-width" />

        @Styles.Render("~/Content/css")

        @Scripts.Render("~/bundles/modernizr")

    </head>

    <body>

        <header>

            <div class="content-wrapper">

                <div class="float-left">

                    <p class="site-title">@Html.ActionLink("your logo here", "Index", "Home")</p>

                </div>

                <div class="float-right">

                    <section id="login">

                        @Html.Partial("_LoginPartial")

                    </section>

                    <nav>

                        <ul id="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>

        <div id="body">

            @RenderSection("featured", required: false)

            <section class="content-wrapper main-content clear-fix">

                @RenderBody()

            </section>

        </div>

        <footer>

            <div class="content-wrapper">

                <div class="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.

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

        }

    }

 

 

  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;

}

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 about Ajax.ActionLink and Html.ActionLink in MVC 4


Don't want to miss updates? Please click the below button!

Follow MindStick