Condividi tramite

sezioni principali Blazor di ASP.NET

Nota

Questa non è la versione più recente di questo articolo. Per la versione corrente, vedere la versione .NET 10 di questo articolo.

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:

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.

Nota

SectionOutlet e SectionContent i componenti possono impostare SectionId solo o SectionName, non entrambi.

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 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.
  • 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.
  • Last updated on