Previous Tutorial
21
NovLayouts, RenderBody, RenderSection and RenderPage in ASP.NET MVC
27 Mar 2024
Intermediate
322K 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
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.
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.
- view 1: _Header.cshtml
- 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
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.
It renders the content of one page a static page within another page