C# Razor Page - Include @section Scripts inside _Layout (Dot net core)

Question

Assume the following @section code for a dynamic script received from Controller/Model: (dotnet core v3)

        string scriptHtml = ViewData["scriptData"];
        @section Scripts {
            @if(! string.IsNullOrEmpty(scriptHtml)){
                <script type='text/javascript'>
                    @Html.Raw(scriptHtml)
                </script>
                <script type='text/javascript' src='~/js/appcore/site.reuse.js'></script>
            }
        }

I want to use this inside _Layout.cshtml, in other words: I want to be able to include a Scripts section inside _Layout.cshtml, that will be consistent across all pages that include it.

So basically, _Layout.cshtml should look like this (Only the Javascript section showed):


@section Scripts {
    @if(! string.IsNullOrEmpty(scriptHtml)){
         <script type='text/javascript'>
              @Html.Raw(scriptHtml)
          </script>
          <script type='text/javascript' src='~/js/appcore/site.reuse.js'></script>
     }
}
    <footer class="border-top footer text-muted">
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
    @RenderSection("Scripts", required: false)  <!-- not rendered because it is not in the parent 'ie. Index.cshtml' page....

When this @section is not inside _Layout.cshtml but moved to the parent razor page (for instance Index.cshtml) calling _Layout.cshtml it will be included correctly. This however means I will have to @section this script for every razor page.

What can I do to include a 'dynamic' Javascript script and make it reusable across all pages that use _Layout.cshtml?

Mike Brind Mike Brind · Accepted Answer · 2020-11-09T14:32:18

@Section blocks are not intended to be used in a layout page, unless it is a child layout to another layout page. Sections are only used (collected) in the View page. Any @Script sections in _Layout will be ignored.

Because this is to be shared (reused) by several pages, just include it like a normal embedded script. The condition will make sure it is included.

So just include the conditional block in the _Layout.cshtml (or layout file), remove the @Section tag and move it closer towards the other scripts.

Updated _Layout page:

    <footer class="border-top footer text-muted"></footer>

    @if(!string.IsNullOrEmpty(scriptHtml)){
         // This condition will ensure to correctly include when not empty
         <script type='text/javascript'>
              @Html.Raw(scriptHtml)
          </script>
          <script type='text/javascript' src='~/js/appcore/site.reuse.js'></script>
     }

    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>

    @RenderSection("Scripts", required: false)

Note: This @RenderSection will only include scripts that are in the View.

C# Razor Page - Include @section Scripts inside _Layout (Dot net core)

1 Answers