Menu
A layout page can only contain one RenderBody method, but can have multiple sections. To create a section you use the RenderSection method. The difference between RenderSection and RenderPage is RenderPage reads the content from a file, whereas RenderSection runs code blocks you define in your content pages.
RenderBody is used for rendering the content of the child view. In layout pages, it renders the portion of a content page. It takes the content of the child page and merges into the layout.
RenderBody() is called to render the content of a child view. Any content on said view that is not in a @section declaration will be rendered by RenderBody() . Using the Layout view above, that means that all content in a child view will be rendered inside the <div class="container body-content"> .
On your layout page, if required is set to false : @RenderSection("scripts", required: false) , when the page renders and the user is on the about page, contacts. js won't render. If required is set to true : @RenderSection("scripts", required: true) , When page renders and user is on the About page, contacts.
If you have a _Layout.cshtml view like this
<html>
<body>
@RenderBody()
@RenderSection("scripts", required: false)
</body>
</html>
then you can have an index.cshtml content view like this
@section scripts {
<script type="text/javascript">alert('hello');</script>
}
the required indicates whether or not the view using the layout page must have a scripts section
If
(1) you have a _Layout.cshtml view like this
<html>
<body>
@RenderBody()
</body>
<script type="text/javascript" src="~/lib/layout.js"></script>
@RenderSection("scripts", required: false)
</html>
(2) you have Contacts.cshtml
@section Scripts{
<script type="text/javascript" src="~/lib/contacts.js"></script>
}
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h2> Contacts</h2>
</div>
</div>
(3) you have About.cshtml
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h2> Contacts</h2>
</div>
</div>
On you layout page, if required is set to false "@RenderSection("scripts", required: false)", When page renders and user is on about page, the contacts.js doesn't render.
<html>
<body><div>About<div>
</body>
<script type="text/javascript" src="~/lib/layout.js"></script>
</html>
if required is set to true "@RenderSection("scripts", required: true)", When page renders and user is on ABOUT page, the contacts.js STILL gets rendered.
<html>
<body><div>About<div>
</body>
<script type="text/javascript" src="~/lib/layout.js"></script>
<script type="text/javascript" src="~/lib/contacts.js"></script>
</html>
IN SHORT, when set to true, whether you need it or not on other pages, it will get rendered anyhow. If set to false, it will render only when the child page is rendered.
Suppose if I have GetAllEmployees.cshtml
<h2>GetAllEmployees</h2>
<p>
<a asp-action="Create">Create New</a>
</p>
<table class="table">
<thead>
// do something ...
</thead>
<tbody>
// do something ...
</tbody>
</table>
//Added my custom scripts in the scripts sections
@section Scripts
{
<script src="~/js/customScripts.js"></script>
}
And another view "GetEmployeeDetails.cshtml" with no scripts
<h2>GetEmployeeByDetails</h2>
@Model.PageTitle
<p>
<a asp-action="Create">Create New</a>
</p>
<table class="table">
<thead>
// do something ...
</thead>
<tbody>
// do something ...
</tbody>
</table>
And my layout page "_layout.cshtml"
@RenderSection("Scripts", required: true)
So, when I navigate to GetEmployeeDetails.cshtml. I get the error that there is no section scripts to be rendered in GetEmployeeDetails.cshtml.
If I change the flag in @RenderSection() from required : true to ``required : false`. It means render the scripts defined in the @section scripts of the views if present.Else, do nothing.
And the refined approach would be in _layout.cshtml
@if (IsSectionDefined("Scripts"))
{
@RenderSection("Scripts", required: true)
}
Here the defination of Rendersection from MSDN
In layout pages, renders the content of a named section.MSDN
In _layout.cs page put
@RenderSection("Bottom",false)
Here render the content of bootom section and specifies false boolean property to specify whether the section is required or not.
@section Bottom{
This message form bottom.
}
That meaning if you want to bottom section in all pages, then you must use false as the second parameter at Rendersection method.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With