In der Regel möchte man immer wieder vorkommenden HTML Code nicht in jeder Seite einfügen. Klassischer Anwendungsfall ist das Menü oder die Referenzen auf eine Library wie Bootstrap. Schon zu Urzeiten des Webs war dieses Problem gelöst mit Server Side Includes (SSI). Der ASP.NET Webforms Entwickler wird die Master Page und die Content Page kennen und nutzen. Allen gemein ist, das ein Template mit Platzhalter arbeitet, das vom Webserver beim Abruf irgendwie zusammen gefügt wird.
Die Masterpage heißt bei Razor Layout Page und beginnt mit einem Unterstrich, damit man sie nicht direkt aufrufen kann. Speicherort ist normal ein _Shared Verzeichnis. Geht aber auch anders.
Eine minimale Razor Layout Seite definiert das HTML Gerüst einer üblichen Seite. Der Inhalt wird in Zeile 10 mit RenderBody gesetzt, wenn Benutzer die eigentliche Seite im Browser aufruft. Um die Problematik mit JavaScript sauber zu lösen kommt RenderSection zur Anwendung. Damit kann man ein Script aus der Inhaltsseite in der Layoutseite rendern. Der Scriptname ist in dem Beispiel Seitenscript
1: @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
2: <html>
3: <head>
4: <meta name="viewport" content="width=device-width" />
5: <title>@ViewBag.Title</title>
6: </head>
7: <body>
8: <h1>ppedv Layout</h1>
9: <div>
10: @RenderBody()
11: </div>
12: <script src="~/lib/jquery/dist/jquery.js"></script>
13: @RenderSection("SeitenScript", required: false)
14: </body>
15: </html>
Aus dem Dialog von vorhin wird auch eine Razor Seite (cshtml) im Verzeichnis Pages erzeugt. Diese ist um den HTML Rahmen entkernt. Wenn man Zeile 4 weglassen würde, sucht ASP.NET nach_layout.cshtml. Ab Zeile 6 wird ein JavaScript Block eingefügt. Dieser steht aber vor dem eigentlich manipulierten HTM Element Div1 und würde so einen Fehler verursachen, wenn das Div noch nicht im HTML DOM existiert. Genau diese Problem löst die @Section in Kombination mit Rendersection.
1: @page
2: @model CoreBill.Pages.ppedvview1Model
3: @{
4: Layout = "_ppedvLayout";
5: }
6: @section SeitenScript{
7: <script>
8: $('#div1').html( new Date());
9: </script>
10: }
11: @{
12:
13: }
14: <p>content Page Haölo</p>
15: <div id="div1"></div>
RenderBody lässt sich auch verschachtelt nutzen über kaskadierende Layouts. Rendersection ist auch mehrfach zulässig mit unterschiedlichen Namen für den ScriptBlock.