What is @RenderSection in asp.net MVC

Question

What is the purpose of @RenderSection and how does it function? I understand what bundles do, but I have yet to figure out what this does and it's probably important.

@RenderSection("scripts", required: false)

Perhaps a small example on how to use it?

score 353 · Accepted Answer · answered Apr 27 '14 at 19:03

353

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

answered Apr 27 '14 at 19:03

cgijbels

5,994
1
17
21

5

This doesn't answer the questions "what is the purpose?" and "how does it function?". – Matthew Nov 08 '20 at 04:51
@Mathhew Agreed it does not answer the question. The purpose is to allow the web page to load in the proper order. Assume your using a template for menus etc. The loading page loads _layout.cshtml and then once all its elements have been loaded _layout.cshtml calls the section of the loading page using RenderBody to make sure its elements goes in the correct place. Once all the elements are loaded the page specific scripts need loaded and RenderSection loads the scripts. In a nut shell it is so things can be loaded in the proper order – BrownPony Jul 04 '21 at 11:55
Technically it "functions" by conditionally parsing the contents of a `section` block named scripts into a Token which contains an `HtmlString`, converts the result into a `TextWriter`, and writes the subsequent output to the `HttpResponse` as a handler in the ASP.NET Response Pipeline. – Shawn J. Molloy Aug 26 '23 at 21:51

score 25 · Answer 2 · edited May 30 '22 at 23:15

Supposing that:

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 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.

    <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 the About page, 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.

Is it just me or ... is this just wrong? https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.mvc.razor.razorpage.rendersection?view=aspnetcore-7.0 — Yoeri, Oct 24 '22 at 16:41

score 8 · Answer 3 · answered Dec 15 '19 at 03:27

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)
    }

score 4 · Answer 4 · answered May 03 '18 at 07:17

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.

What is @RenderSection in asp.net MVC

4 Answers4

Linked