Navratri Sale: Get Upto 30% OFF on Live Training! Offer Ending in
D
H
M
S
Get Now
Layouts, RenderBody, RenderSection and RenderPage in ASP.NET MVC

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

27 Mar 2024
Intermediate
321K Views
9 min read

RenderBody, RenderSection, and RenderPage: An Overview

In this MVC tutorial, we will discuss how rendering works in ASP.NET MVC applications, how to use RenderBody, RenderSection, and RenderPage methods to design the webpage, setting different layouts for different pages, etc.

Read More: MVC Interview Questions and Answers

What is Layout?

The main focus of the developers will be to maintain a consistent look and feel across the application (i.e., all the pages within our website/application). To get this, Razor View Engine supports a concept with a feature called “layouts”. This allows us to define a common template, and then we can able to inherit its look and feel across all the views/pages on our Application to make a consistent look and feel.

Layouts are used to maintain a consistent look and feel across multiple views within the 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. Now let's see the basic structure of the layout page.

The Basic Structure of the Layout Page

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width" />
 <title>@ViewBag.Title</title>
 @Styles.Render("~/Content/css")
 @Scripts.Render("~/bundles/modernizr")
</head>
<body>
 @RenderBody()

 @Scripts.Render("~/bundles/jquery")
 @RenderSection("scripts", required: false)
</body>
</html>

In Asp.Net MVC, at the application level, we have a _ViewStart file within the Views folder for defining the default Layout page for your ASP.NET MVC application. For rendering layout pages, refer to this article Different ways of rendering layouts in Asp.Net MVC.

Styles.Render and Scripts.Render

Style.Render is used to render a bundle of CSS files defined within BundleConfig.cs files. Styles. Render creates 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/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.button.css",
 "~/Content/themes/base/jquery.ui.dialog.css",
 "~/Content/themes/base/jquery.ui.theme.css"));
 }
} 

Note

  1. Styles.Render and Scripts.Render generates 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 generates 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 the EnableOptimizations property of the BundleTable class to true or false within Global.asax.cs file as shown below.

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

1. RenderBody

The layout view contains HTML Doctype, head, and body elements like other views/pages. The main difference is the call to RenderBody() and RenderSection() methods in the layout. RenderBody acts like a placeholder for other views. For example, Index.cshtml is a view that renders a layout view, where the RenderBody() method is being called.

Syntax


 @RenderBody()

Example of RenderBody


_Layout.cshtml

@RenderBody() …Index.cshtml

@{ Layout=~/Views/Shared/_Layout.cshtml}

We can render the layout in our view by calling “Layout=~/Views/Shared/_Layout.cshtml”.The below content will be rendered inside the @RenderBody section in the layout.

This content will be placed in the @RenderBody() section

2. RenderPage

The renderPage method also exists in the Layout page to render other pages that exist in your application. A layout page can have multiple RenderPage methods.

Syntax


 @RenderPage(“~/Views/Shared/_LoginPartial.cshtml”,model)

This method takes either one or two parameters. The first parameter refers to the file's physical location and the second is an optional array of objects/models that can be passed into the view.

Where to Use?

If we want to keep the footer and header in separate view. In this scenario, we need to call two separate views into the layout using the RenderPage method.

Example

Create two view partial views under the shared folder to make it as shared.

  1. view 1: _Header.cshtml
  2. view 2: _Footer.cshtml

_Layout.cshtml


<!DOCTYPE html>
<html>
<head><title>….</title></head><body>
<div class=”header-content”>@RenderPage(“~/shared/_Header.cshtml”)</div>
<div class=”body-content”>@RenderBody()</div>
<div class=”header-content”>@RenderPage(“~/shared/_Footer.cshtml”)
</div>
</body>
</html>

3. RenderSection

A section allows 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.

Syntax


@RenderSection(“section name”, Boolean value)

A layout page section can be defined using the following code.


@section header{
<h1>Header Content</h1>
}

You can render the above-defined section header on the content page as given below:


@RenderSection("header")

By default, sections are mandatory. To make sections optional, provide the second parameter value as false, which is a Boolean value.


@RenderSection("header",false)

Note

A view can define only those sections referred to in the layout page otherwise an exception will be thrown.

Summary

I hope you will enjoy the Layouts, RenderBody, RenderSection, and RenderPage while working with ASP.NET MVC. I would like to have feedback from my blog readers. Your valuable feedback, questions, or comments about this article are always welcome. Enjoy Coding...!

Unlock the Next Level of MVC:

FAQs

Q1. What is the difference between RenderBody and RenderSection in MVC?

The RenderBody is required, as it's what renders each view. The RenderSection has an optional parameter that lets you mark the section as not required.

Q2. What is RenderPage in MVC?

It renders the content of one page a static page within another page
Share Article

Live Classes Schedule

Our learn-by-building-project method enables you to build practical/coding experience that sticks. 95% of our learners say they have confidence and remember more when they learn by building real world projects.
ASP.NET Core ProjectOct 19SAT, SUN
Filling Fast
10:00AM to 12:00PM (IST)
Get Details
.NET Solution Architect Certification TrainingOct 20SAT, SUN
Filling Fast
05:30PM to 07:30PM (IST)
Get Details
Advanced Full-Stack .NET Developer Certification TrainingOct 20SAT, SUN
Filling Fast
09:30AM to 11:30AM (IST)
Get Details
ASP.NET Core Certification TrainingOct 20SAT, SUN
Filling Fast
09:30AM to 11:30AM (IST)
Get Details

Can't find convenient schedule? Let us know

About Author
Shailendra Chauhan (Microsoft MVP, Founder & CEO at Scholarhat by DotNetTricks)

Shailendra Chauhan is the Founder and CEO at ScholarHat by DotNetTricks which is a brand when it comes to e-Learning. He provides training and consultation over an array of technologies like Cloud, .NET, Angular, React, Node, Microservices, Containers and Mobile Apps development. He has been awarded Microsoft MVP 9th time in a row (2016-2024). He has changed many lives with his writings and unique training programs. He has a number of most sought-after books to his name which has helped job aspirants in cracking tough interviews with ease.
Accept cookies & close this