Sections ASP.NET Core Blazor

Cet article explique comment contrôler le contenu d’un composant Razor à partir d’un composant Razor enfant.

Blazor sections

Pour contrôler le contenu d’un composant Razor à partir d’un composant Razor enfant, Blazor prend en charge les sections à l’aide des composants intégrés suivants :

• SectionOutlet : affiche le contenu fourni par les composants SectionContent avec des arguments SectionName ou SectionId correspondants. Deux composants SectionOutlet ou plus ne peuvent pas avoir le même SectionName ou SectionId.

• SectionContent : fournit le contenu en tant que RenderFragment aux composants SectionOutlet avec un argument SectionName ou SectionId correspondant. Si plusieurs composants SectionContent ont le même argument SectionName ou SectionId, le composant SectionOutlet correspondant affiche le contenu du dernier composant SectionContent rendu.

Les sections peuvent être utilisées dans les dispositions et entre les composants parent-enfant imbriqués.

Bien que l’argument transmis à SectionName puisse utiliser n’importe quel type de casse, la documentation adopte la casse kebab (par exemple, top-bar), qui est un choix de casse courant pour les ID d’élément HTML. SectionId reçoit un champ object statique et nous recommandons toujours la casse Pascal pour les noms de champs C# (par exemple, TopbarSection).

Dans l’exemple suivant, le composant de disposition principale de l’application implémente un bouton de compteur d’incréments pour le composant Counter de l’application.

Si l’espace de noms des sections n’est pas dans le fichier _Imports.razor, ajoutez-le :

@using Microsoft.AspNetCore.Components.Sections

Dans le composant MainLayout (MainLayout.razor), placez un composant SectionOutlet et transmettez une chaîne au paramètre SectionName pour indiquer le nom de la section. L’exemple suivant utilise le nom de section top-bar :

<SectionOutlet SectionName="top-bar" />

Dans le composant Counter (Counter.razor), créez un composant SectionContent et transmettez la chaîne correspondante (top-bar) à son paramètre SectionName :

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

Quand le composant Counter est accessible à /counter, le composant MainLayout affiche le bouton de nombre d’incréments à partir du composant Counter où le composant SectionOutlet est placé. Quand un autre composant est accessible, le bouton de nombre d’incréments n’est pas affiché.

Au lieu d’utiliser une section nommée, vous pouvez transmettre un champg object statique avec le paramètre SectionId pour identifier la section. L’exemple suivant implémente également un bouton de compteur d’incréments pour le composant Counter de l’application dans la disposition principale de l’application.

Si vous ne souhaitez pas que d’autres composants SectionContent correspondent accidentellement au nom d’un composant SectionOutlet, transmettez un paramètre d’objet SectionId pour identifier la section. Cela peut être utile lors de la conception d’une bibliothèque de classes Razor (RCL). Quand un composant SectionOutlet dans la bibliothèque RCL utilise une référence d’objet avec SectionId et que le consommateur place un composant SectionContent avec un objet SectionId correspondant, une correspondance accidentelle par nom n’est pas possible quand les consommateurs de la bibliothèque RCL implémentent d’autres composants SectionContent.

L’exemple suivant implémente également un bouton de compteur d’incréments pour le composant Counter de l’application dans la disposition principale de l’application à l’aide d’une référence d’objet au lieu d’un nom de section.

Ajoutez un champ object statique TopbarSection au composant MainLayout dans un bloc @code :

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

Dans le balise Razor du composant MainLayout, placez un composant SectionOutlet et transmettez TopbarSection au paramètre SectionId pour indiquer la section :

<SectionOutlet SectionId="TopbarSection" />

Ajoutez un composant SectionContent au composant Counter de l’application qui affiche un bouton de nombre d’incréments. Utilisez le champ statique object de section TopbarSection du composant MainLayout comme SectionId (MainLayout.TopbarSection).

Dans Counter.razor:

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

Quand le composant Counter est accessible, le composant MainLayout, affiche le bouton de nombre d’incréments où le composant SectionOutlet est placé.

Interaction de section avec d’autres fonctionnalités Blazor

Une section interagit avec d’autres fonctionnalités Blazor des manières suivantes :

• Les valeurs en cascade arrivent dans le contenu de section à partir duquel le contenu est défini par le composant SectionContent.
• Les exceptions non prises en charge sont gérées par des limites d’erreur définies pour un composant SectionContent.
• Un composant Razor configuré pour le rendu en streaming configure également le contenu de section fourni par un composant SectionContent pour utiliser le rendu en streaming.