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 SectionContent componenti con argomenti o SectionId corrispondentiSectionName. Due o più SectionOutlet componenti non possono avere lo stesso SectionName o SectionId.

• SectionContent: fornisce il contenuto come oggetto RenderFragment ai SectionOutlet componenti con una corrispondenza SectionName o SectionId. 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.

Anche se l'argomento passato a SectionName può usare qualsiasi tipo di maiuscole e minuscole, la documentazione adotta maiuscole e minuscole kebab ( ad esempio top-bar), che rappresenta una scelta di maiuscole e minuscole comune per gli ID elemento HTML. SectionId riceve un campo statico object ed è sempre consigliabile usare maiuscole e minuscole Pascal per i nomi di campo C#, TopbarSectionad esempio .

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

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

@using Microsoft.AspNetCore.Components.Sections

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

<SectionOutlet SectionName="top-bar" />

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

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

Quando si accede al Counter componente in /counter, il MainLayout componente esegue il rendering del Counter pulsante di conteggio degli incrementi dal componente in cui è posizionato il SectionOutlet componente. Quando si accede a qualsiasi altro componente, il rendering del pulsante di conteggio degli incrementi non viene eseguito.

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 del contatore di incrementi per il componente dell'app Counter 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 SectionOutlet oggetto nell'RCL usa un riferimento a un oggetto con SectionId e il consumer inserisce un SectionContent componente con un oggetto corrispondente SectionId , una corrispondenza accidentale per nome non è possibile quando i consumer dell'RCL implementano altri SectionContent componenti.

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

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

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

MainLayout Nel markup del Razor componente posizionare un SectionOutlet componente e passare TopbarSection al SectionId parametro per indicare la sezione:

<SectionOutlet SectionId="TopbarSection" />

Aggiungere un SectionContent componente al componente dell'app che esegue il rendering di Counter un pulsante di conteggio incrementi. Usare la MainLayout sezione del TopbarSection componente statica object come (SectionIdMainLayout.TopbarSection).

In Counter.razor:

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

Quando si accede al Counter componente, il MainLayout componente esegue il rendering del pulsante di conteggio degli incrementi in cui viene posizionato il SectionOutlet componente.

Interazione di sezione con altre Blazor funzionalità

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

• I valori a cascata passano al contenuto della sezione da cui il contenuto è definito dal SectionContent componente.
• Le eccezioni non gestite vengono gestite dai limiti di errore definiti intorno a un SectionContent componente.
• Un Razor componente configurato per il rendering in streaming configura anche il contenuto della sezione fornito da un SectionContent componente per l'uso del rendering in streaming.