Asp.net MVC RenderBody, RenderSection

In this tutorial you will learn how rendering works in asp.net mvc application, how to use RenderBody, RenderSection and RenderPage methods to design your webpage, setting different layout for different pages, also will learn how to set render script and css files section.

Asp.net MVC Layout

What is Layout in Asp.net MVC?
Layout is basically a default master page, when we create any asp.net MVC project using Visual Studio, asp.net mvc default layout template is created in shared folder, the file name is "_layout.chtml".

When we add any new view, that default master pages (layout) is automatically applied (You may not see any additional code added in your view).

In case you want to add a new view, but don’t want to set any default layout, you can set the layout property null in your view

This is how you can make asp.net mvc disable layout, just by setting layout null.

@{
     Layout = null;
}

You also can add asp.net mvc different layout for any view in your project, add a custom layout.

@{
     Layout = "~/Views/shared/_LayoutCustom.cshtml";
}

ASP.NET MVC Layout Render Methods

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.

Asp.net mvc default layout 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>

Layout @RenderBody() Method

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.

Layout @RenderSection() Method

This is how you can define a RenderSection method in your asp.net mvc layout page.

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

Here is an example of how you can add section in your view.

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

Asp.net MVC 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

Asp.net MVC @Html.Partial() Method

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

            @Html.Partial("bottomBar")

@RenderPage("bottomBar.cshtml")

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

.Net MVC Tutorial | Asp.net MVC Course | MVC interview questions

ASP.NET MVC RenderBody, RenderSection, RenderPage

Aspnet MVC Training

Asp.net MVC tutorials, learn model view controllers with c#, develop database driven web application using Asp.net MVC framework.

Hire .Net Developer

Free Tutorials

Asp.net Core Tutorial

Learn .Net C# Programming

SQL Programming Tutorial

Asp.net Core interview question

Asp.Net MVC C# Examples | Join Asp.Net MVC Course | Asp.net Core Tutorial