ASP.NET Core-secties Blazor

In dit artikel wordt uitgelegd hoe u de inhoud in een Razor onderdeel kunt beheren vanuit een onderliggend Razor onderdeel.

Blazor Secties

Als u de inhoud in een Razor onderdeel van een onderliggend Razor onderdeel wilt beheren, Blazor ondersteunt u secties met behulp van de volgende ingebouwde onderdelen:

• SectionOutlet: Geeft inhoud weer die wordt geleverd door SectionContent onderdelen met overeenkomende SectionName argumenten of SectionId argumenten. Twee of meer SectionOutlet componenten kunnen niet dezelfde SectionName of SectionId hebben.

• SectionContent: Biedt inhoud als een RenderFragment aan SectionOutlet onderdelen met een overeenkomende SectionName of SectionId. Als verschillende SectionContent onderdelen hetzelfde SectionName of SectionId hebben, dan geeft het overeenkomende SectionOutlet onderdeel de inhoud weer van de laatst gerenderde SectionContent.

Secties kunnen worden gebruikt in zowel layouts als in geneste componenten.

Hoewel het argument dat aan SectionName wordt doorgegeven elk type lettertype kan gebruiken, hanteert de documentatie kebab casing (bijvoorbeeld top-bar), wat een veelvoorkomende keuze is voor HTML-element-id's. SectionId ontvangt een statisch object veld, en we raden altijd aan om Pascal casing te gebruiken voor C#-veldnamen (bijvoorbeeld TopbarSection).

In het volgende voorbeeld implementeert het hoofdindelingsonderdeel van de app een knop om de teller te verhogen voor het Counter-onderdeel van de app.

Als de naamruimte voor secties zich niet in het _Imports.razor bestand bevindt, voegt u deze toe:

@using Microsoft.AspNetCore.Components.Sections

Plaats een MainLayout onderdeel in het MainLayout.razor onderdeel (SectionOutlet) en geef een tekenreeks door aan de parameter om de SectionName naam van de sectie aan te geven. In het volgende voorbeeld wordt de sectienaam top-bargebruikt:

<SectionOutlet SectionName="top-bar" />

Maak in de Counter-component (Counter.razor) een SectionContent-component en geef de overeenkomende tekenreeks (top-bar) door aan zijn SectionName-parameter.

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

Wanneer het Counter onderdeel wordt geopend op /counter, geeft het MainLayout onderdeel de knop Increment Count weer van het Counter onderdeel waarin het SectionOutlet onderdeel wordt geplaatst. Wanneer een ander onderdeel wordt geopend, wordt de knop aantal stappen niet weergegeven.

In plaats van een benoemde sectie te gebruiken, kunt u een statische object parameter SectionId doorgeven om de sectie te identificeren. In het volgende voorbeeld wordt ook een verhoogtellerknop geïmplementeerd voor het Counter-onderdeel in de hoofdindeling van de app.

Als u niet wilt dat andere SectionContent onderdelen per ongeluk overeenkomen met de naam van een SectionOutlet, geeft u een objectparameter SectionId door om de sectie te identificeren. Dit kan handig zijn bij het ontwerpen van een Razor klassebibliotheek (RCL). Wanneer een SectionOutlet in de RCL gebruikmaakt van een objectverwijzing met SectionId en de consument een SectionContent onderdeel met een overeenkomend SectionId object plaatst, is een onbedoelde overeenkomst op naam niet mogelijk wanneer consumenten van de RCL andere SectionContent onderdelen implementeren.

In het volgende voorbeeld wordt ook een incrementele tellerknop geïmplementeerd voor het onderdeel van Counter de app in de hoofdindeling van de app, met behulp van een objectverwijzing in plaats van een sectienaam.

Voeg een TopbarSection statisch object element toe aan het MainLayout onderdeel in een @code blok:

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

Plaats een MainLayout component in de markup van de Razor component SectionOutlet en geef TopbarSection door aan de parameter SectionId om de sectie aan te geven.

<SectionOutlet SectionId="TopbarSection" />

Voeg een SectionContent component toe aan de Counter component van de app die een knop voor het verhogen van de telling weergeeft. Gebruik de sectie statisch van het MainLayout onderdeel TopbarSection als de object (SectionId).MainLayout.TopbarSection

In Counter.razor:

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

Wanneer het Counter component wordt benaderd, toont het MainLayout component de knop om het aantal te verhogen op de plaats waar het SectionOutlet component is geplaatst.

RenderFragment cacheregels en gedrag voor het weergeven van secties

Wanneer de inhoud van SectionContent verandert en zich in een andere instantie bevindt dan de component waarin het is weergegeven, volledig vernietigt en hercreëert Blazor de sectie in plaats van te proberen de inhoud van de sectie bij te werken. In tegenstelling tot normale rendering kan de inhoud van de sectie afkomstig zijn van verschillende exemplaren en is het niet zinvol om inhoud van twee afzonderlijke onderdelen te verwerken, wat kan leiden tot onverwachte resultaten. Zie Inconsistente component initialisatie met Blazor SectionOutlet/SectionContent en CascadingValue (dotnet/aspnetcore #58316) voor een gedetailleerde uitleg over dit gedrag.

Sectie-interactie met andere Blazor functies

Een sectie communiceert op de volgende manieren met andere Blazor functies:

• Trapsgewijze waarden stromen naar sectie-inhoud van waaruit de inhoud wordt gedefinieerd door het SectionContent onderdeel.
• Niet-verwerkte uitzonderingen worden verwerkt door foutgrenzen die zijn gedefinieerd rond een SectionContent onderdeel.
• Een Razor onderdeel dat is geconfigureerd voor streaming-rendering , configureert ook sectie-inhoud die door een SectionContent onderdeel wordt geleverd om streamingrendering te gebruiken.
• Een sectie met interactieve onderdelen wordt statisch weergegeven (niet-functioneel) in een indelingsonderdeel in een Blazor Web App indelingsonderdeel dat gebruikmaakt van rendering per pagina/onderdeel. Zie ASP.NET Core Blazor indelingenvoor meer informatie.