sezioni principali Blazor di ASP.NET

Questo articolo illustra come controllare il contenuto di un Razor componente da un componente figlio Razor .

Blazor Sezioni

Per controllare il contenuto di un Razor componente da un componente figlio Razor , Blazor supporta le sezioni che usano i componenti predefiniti seguenti:

• SectionOutlet: esegue il rendering del contenuto fornito dai componenti SectionContent con argomenti SectionName o SectionId corrispondenti. Due o più SectionOutlet componenti non possono avere lo stesso SectionName o SectionId.

• SectionContent: Fornisce contenuto come RenderFragment ai componenti SectionOutlet con SectionName o SectionId corrispondente. Se più SectionContent componenti hanno lo stesso SectionName o SectionId, il componente corrispondente SectionOutlet esegue il rendering del contenuto dell'ultimo rendering di SectionContent.

Le sezioni possono essere usate sia in layout che in componenti padre-figlio annidati.

Sebbene l'argomento passato a SectionName possa usare qualsiasi convenzione di maiuscole/minuscole, la documentazione adotta il formato kebab-case (ad esempio, top-bar), che è una convenzione comune per gli ID degli elementi HTML. SectionId ha un campo statico object e si consiglia sempre di usare la convenzione PascalCase per i nomi dei campi C# (ad esempio, TopbarSection).

Nell'esempio seguente, il componente di layout principale dell'app implementa un pulsante di incremento del contatore per il componente Counter dell'app.

Se lo spazio dei nomi per le sezioni non è presente nel file imports (_Imports.razor), aggiungerlo:

@using Microsoft.AspNetCore.Components.Sections

Nel componente MainLayout (MainLayout.razor), inserire un componente SectionOutlet e passare una stringa al parametro SectionName per indicare il nome della sezione. Nell'esempio seguente viene usato il nome top-bardella sezione :

<SectionOutlet SectionName="top-bar" />

Nel componente Counter (Counter.razor), creare un componente SectionContent e passare la stringa corrispondente (top-bar) al relativo parametro SectionName:

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

Quando si accede al componente Counter in /counter, il componente MainLayout esegue il rendering del pulsante per incrementare il conteggio dal componente Counter nel componente in cui è posizionato il componente SectionOutlet. Quando si accede a qualsiasi altro componente, il pulsante per incrementare il conteggio non viene visualizzato.

Anziché usare una sezione denominata, è possibile passare un oggetto statico object con il SectionId parametro per identificare la sezione. L'esempio seguente implementa anche un pulsante per incrementare il contatore per il componente Counter dell'app nel layout principale dell'app.

Se non si vuole che altri SectionContent componenti corrispondano accidentalmente al nome di un SectionOutletoggetto , passare un parametro oggetto SectionId per identificare la sezione. Ciò può essere utile quando si progetta una Razor libreria di classi (RCL). Quando un oggetto SectionOutlet nell'RCL usa un riferimento a un oggetto con SectionId e il consumer inserisce un componente SectionContent con un oggetto SectionId corrispondente, non è possibile una corrispondenza accidentale per nome quando i consumer dell'RCL implementano altri componenti SectionContent.

L'esempio seguente implementa anche un pulsante del contatore incrementale per il componente Counter dell'app nel layout principale dell'app, utilizzando un riferimento a un oggetto anziché un nome di sezione.

Aggiungere un elemento TopbarSection statico object al componente MainLayout in un blocco @code:

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

Nel markup del componente MainLayoutRazor, inserisci un componente SectionOutlet e passa TopbarSection al parametro SectionId per indicare la sezione:

<SectionOutlet SectionId="TopbarSection" />

Aggiungi un componente SectionContent al componente Counter dell'app che visualizza un pulsante per incrementare il conteggio. Usare la sezione TopbarSection del componente MainLayout statica object come SectionId (MainLayout.TopbarSection).

In Counter.razor:

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

Quando si accede al componente Counter, il componente MainLayout visualizza il pulsante per incrementare il conteggio nel punto in cui è posizionato SectionOutlet.

RenderFragment regole di memorizzazione nella cache e comportamento di rendering delle sezioni

Quando il contenuto di un SectionContentRenderFragment cambia, che è un'istanza diversa rispetto al componente in cui viene effettuato il rendering, Blazor elimina e ricrea completamente la sezione invece di provare ad aggiornare il contenuto della sezione. A differenza del rendering normale, il contenuto della sezione potrebbe provenire da istanze diverse e non ha senso tentare di elaborare il contenuto da due componenti separati, causando risultati imprevisti. Per una spiegazione dettagliata su questo comportamento, vedere Inizializzazione di componenti incoerenti con Blazor SectionOutlet/SectionContent e CascadingValue (dotnet/aspnetcore #58316)..

Interazione di sezione con altre Blazor funzionalità

Una sezione interagisce con altre Blazor funzionalità nei modi seguenti:

• I valori in cascata fluiscono nel contenuto della sezione, che è definito dal componente SectionContent.
• Le eccezioni non gestite vengono gestite dai limiti di errore definiti intorno a un SectionContent componente.
• Un componente Razor configurato per il rendering in streaming configura anche il contenuto della sezione fornito da un componente SectionContent per utilizzare il rendering in streaming.
• Una sezione che contiene componenti interattivi è resa staticamente (non funzionale) in un componente di layout di Blazor Web App che adotta il rendering per pagina/componente. Per altre informazioni, vedere layout ASP.NET CoreBlazor.