30
MarLayouts, RenderBody, RenderSection and RenderPage in ASP.NET MVC
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
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;
}
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...!