ASP.NET Core-avsnitt Blazor

Den här artikeln beskriver hur du styr innehållet i en Razor komponent från en underordnad Razor komponent.

Blazor sektioner

Om du vill styra innehållet i en Razor komponent från en underordnad Razor komponent, stöder Blazoravsnitt med hjälp av följande inbyggda komponenter:

• SectionOutlet: Renderar innehåll som tillhandahålls av SectionContent komponenter med matchande SectionName eller SectionId argument. Två eller flera SectionOutlet komponenter kan inte ha samma SectionName eller SectionId.

• SectionContent: Tillhandahåller innehåll som en RenderFragment till SectionOutlet-komponenter som matchar SectionName eller SectionId. Om flera SectionContent komponenter har samma SectionName eller SectionIdåterger den matchande SectionOutlet komponenten innehållet i den senast renderade SectionContent.

Avsnitt kan användas i både layouter och över kapslade föräldra-barnkomponenter.

Även om argumentet som skickas till SectionName kan använda alla typer av höljen, antar dokumentationen kebabhölje (till exempel top-bar), vilket är ett vanligt val för HTML-element-ID:er. SectionId tar emot ett statiskt object fält och vi rekommenderar alltid Pascal-hölje för C#-fältnamn (till exempel TopbarSection).

I följande exempel implementerar huvudlayoutkomponenten i appen en inkrementräknarknapp för appens Counter-komponent.

Om namnområdet för avsnitt inte finns i _Imports.razor filen lägger du till det:

@using Microsoft.AspNetCore.Components.Sections

I komponenten MainLayout (MainLayout.razor) placerar du en SectionOutlet komponent och skickar en sträng till parametern SectionName för att ange avsnittets namn. I följande exempel används avsnittsnamnet top-bar:

<SectionOutlet SectionName="top-bar" />

I komponenten Counter (Counter.razor) skapar du en SectionContent komponent och skickar den matchande strängen (top-bar) till dess SectionName parameter:

<SectionContent SectionName="top-bar">
    <button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
</SectionContent>

När komponenten Counter används på /counteråterger komponenten MainLayout knappen för inkrementsantal från Counter komponenten där komponenten SectionOutlet placeras. När någon annan komponent används visas inte inkrementräknarknappen.

I stället för att använda ett namngivet avsnitt kan du skicka en statisk object med parametern SectionId för att identifiera avsnittet. I följande exempel implementeras också en inkrementknapp för appens Counter-komponent i huvudlayouten för appen.

Om du inte vill att andra SectionContent komponenter av misstag ska matcha namnet på en SectionOutletskickar du en objektparameter SectionId för att identifiera avsnittet. Detta kan vara användbart när du utformar ett Razor klassbibliotek (RCL). När en SectionOutlet i RCL använder en objektreferens med SectionId och konsumenten placerar en SectionContent komponent med ett matchande SectionId objekt, är en oavsiktlig matchning efter namn inte möjlig när användare av RCL implementerar andra SectionContent komponenter.

I följande exempel implementeras också en inkrementsräknare för appens Counter komponent i appens huvudlayout, med hjälp av en objektreferens i stället för ett avsnittsnamn.

Lägg till en TopbarSection statisk object i komponenten MainLayout i ett @code block:

@code {
    internal static object TopbarSection = new();
}

I komponentens MainLayoutRazor markup placerar du en SectionOutlet komponent och skicka TopbarSection till parametern SectionId för att ange avsnittet.

<SectionOutlet SectionId="TopbarSection" />

Lägg till en SectionContent komponent i appens Counter komponent som renderar en inkrementsräkningsknapp. Använd komponentens MainLayoutTopbarSection avsnitt statisk object som SectionId (MainLayout.TopbarSection).

I Counter.razor:

<SectionContent SectionId="MainLayout.TopbarSection">
    <button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
</SectionContent>

När komponenten Counter används återger komponenten MainLayout knappen för antal inkrement där komponenten SectionOutlet placeras.

RenderFragment cachelagringsregler och avsnittsrenderingsbeteende

När innehållet SectionContentRenderFragment ändras, vilket är en annan instans än komponenten där det återges, Blazor förstör och återskapar avsnittet helt i stället för att försöka uppdatera avsnittets innehåll. Till skillnad från normal rendering kan avsnittets innehåll komma från olika instanser och det är inte meningsfullt att försöka bearbeta innehåll från två separata komponenter, vilket kan leda till oväntade resultat. En detaljerad förklaring av det här beteendet finns i Inkonsekvent komponentinitiering med Blazor SectionOutlet/SectionContent och CascadingValue (dotnet/aspnetcore #58316).

Avsnittsinteraktion med andra Blazor funktioner

Ett avsnitt interagerar med andra Blazor funktioner på följande sätt:

• Sammanhängande värden flödar in i avsnittsinnehåll där innehållet definieras av komponenten SectionContent .
• Ohanterade undantag hanteras av felgränser som definieras runt en SectionContent komponent.
• En Razor komponent som konfigurerats för strömningsrendering konfigurerar även avsnittsinnehåll som tillhandahålls av en SectionContent komponent för att använda strömningsrendering.
• Ett avsnitt som innehåller interaktiva komponenter återges statiskt (icke-funktionellt) i en layoutkomponent i en Blazor Web App som implementerar återgivning per sida/komponent. Mer information finns i ASP.NET Core Blazor layouter.