Browse Articles

Intermediate

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

09 Jan 2024
Intermediate
313K Views
5 min read  

RenderBody, RenderSection, and RenderPage:An Overview

What is Layout?

The main focus of the developers will be to maintain a consistent look and feel across the application (ie., 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;
}

RenderBody

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

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.

@RenderPage("~/Views/Shared/_Header.cshtml")

Sections

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. 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 provide the second parameter value as false, which is a Boolean value.

@RenderSection("header",false)

Note

A view can define only those sections that are 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
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 8th time in a row (2016-2023). 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.
Learn to Crack Your Technical Interview

Accept cookies & close this