WebTrainingRoom Online Courses
Online Training for Asp.net MVC Web Designing Development, MS SQL, Digital Marketing

RenderBody, RenderSection and RenderPage in Razor

How does Layouts RenderBody, RenderSection, RenderPage, Html.Partial work in ASP.NET MVC, Layouts are used to maintain a consistent look and feel across multiple views, Layouts is like master page.

Let’s see how the rendering life cycle works, we learn each function and its use.

Basic Layout Page structure
<!DOCTYPE html> <html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title< /title>
@RenderSection("metatags", required: false)
@Styles.Render("~/Content/css")
@ Scripts.Render("~/bundles/modernizr")
</head>
<body>
@Html.Partial("HeaderBar")
@RenderBody()
@Html.Partial("bottomBar")
@Scripts.Render("~/bundles/jquery")
@RenderSection("scripts", required: false)
</body>
</html>
@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.

@RenderSection("metatags", required: false)

We can have any number of @RenderSection("metatags") in a Layout, but key (ex. "metatags") has to be unique. "required: false" is means this section is optional for the view, that will consume this masterpage, Otherwise this section must be specified in the view.

Section implementation
@section metatags
{
<meta name="description" content="How Layouts, RenderBody, RenderSection, RenderPage, Html.Partial works" />
}
Scripts.Render & Styles.Render

Scripts.Render is used to render a bundle of Script files by rendering script tag(s) for the Script bundle in BundleConfig

Style.Render is used to render a bundle of CSS files defined in BundleConfig.cs files.

let's look at code

public class BundleConfig            
{
    public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
        "~/Scripts/jquery.unobtrusive*",
        "~/Scripts/jquery.validate*"));            
        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.theme.css"));
    }
}

Scripts.Render & Styles.Render generate multiple script & style tags for each item in the Script bundle and CSS bundle when optimizations are disabled.

But, When optimizations are enabled, they generate a single style and script tag to a version-stamped URL which represents the entire bundle for Scripts & CSS

@Html.Partial("bottomBar")

Html.Partial("") is just like calling user control (partial view) in main page

@RenderPage("bottomBar.cshtml")

RenderPage("") is just like calling another page into main page, note: while calling you have to specify ".cshtml"

Comment
Name Email Website
Subscribe
 
RenderBody, RenderSection, RenderPage in ASP.NET MVC

Consulting