Blazor Sections

Index html

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

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

builder.RootComponents.Add<App>("#app");

HeadOutlet

This lives in the html head

But in wasm it is dynamically created in program.cs

builder.RootComponents.Add<HeadOutlet>("head::after");

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.

Layouts

@inherits LayoutComponentBase
Have a RenderFragment named @Body
Normally applied in App.razor/Routes.razor with <RouteView RouteData="@routeData" DefaultLayout="@typeof(Layout.MainLayout)"
Can be nested :
@inherits LayoutComponentBase
@layout MainLayout
<marquee>
@Body
</marquee>

Sections

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">
    <header>
        <SectionOutlet SectionId="Header"></SectionOutlet>
    </header>
    <aside>
        <SectionOutlet SectionId="Sidebar"></SectionOutlet>
    </aside>
    <main>
        @Body
    </main>
    <footer>
        <SectionOutlet SectionId="Footer"></SectionOutlet>
    </footer>
</div>

@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>
<SectionContent SectionId="BasketLayout.Sidebar">
<button @onclick="Checkout">Go to Checkout</button>
</SectionContent>

static void

Blazor Sections

Index html

HeadOutlet

Layouts

Sections