static void

Blazor Sections

Index html

In net8+, the App.razor contains the index html (routes used to be there, now in a separate Routes.razor)

    <HeadOutlet />
    <Routes />
    <script src="_framework/blazor.webassembly.js"></script>

Up to net7, index.html was in wwwroot, and had a div with id=app

<div id="app">Loading...</div>
<script src="_framework/blazor.webassembly.js"></script>

In Program.cs you could redefine the div hook



This lives in the html head

    <HeadOutlet />

But in wasm it is dynamically created in program.cs


It is filled from pages with HeadContent

@page "/mypage" <PageTitle>My Page</PageTitle> <HeadContent>     <meta name="color-scheme" content="dark light" /> </HeadContent>

<PageTitle> is setting document.title.



Sections are introduced in net8. A layout or component can contain a <SectionOutlet (with a SectionId or SectionName). SectionId requires a field (which can be just an object) which sub-components can use.

NB: some templates may not include the namespace in _imports.razor so add @using Microsoft.AspNetCore.Components.Sections

@inherits LayoutComponentBase
@layout MainLayout

<div class="page">
        <SectionOutlet SectionId="Header"></SectionOutlet>
        <SectionOutlet SectionId="Sidebar"></SectionOutlet>
        <SectionOutlet SectionId="Footer"></SectionOutlet>

@code {
    //SectionIds need a static field
    public static object Header = new();
    public static object Sidebar = new();
    public static object Footer = new();

In your nested component, you use <SectionContent> with the same SectionId (hence the public field) or SectionName.

<button @onclick="AddToBasket">Add to basket</button>

<SectionContent SectionId="BasketLayout.Header">
    <p>Basket: @Basket items</p>
<SectionContent SectionId="BasketLayout.Sidebar">
    <button @onclick="Checkout">Go to Checkout</button>