Sections ASP.NET Core Blazor

Remarque

Ceci n’est pas la dernière version de cet article. Pour la version actuelle, consultez la version .NET 10 de cet article.

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 :

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 TopbarSection statique object au composant MainLayout dans un bloc @code :

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

Dans le balise MainLayout du composant Razor, 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 MainLayout de section TopbarSection du composant object 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é.

Remarque

Les composants SectionOutlet et SectionContent ne peuvent définir que SectionId ou SectionName, et non les deux.

RenderFragment Règles de mise en cache et comportement de rendu de section

Lorsqu’un SectionContentRenderFragment contenu change, qui est une instance différente du composant où il est rendu, Blazor détruit complètement et recrée la section au lieu de tenter de mettre à jour le contenu de la section. Contrairement au rendu normal, le contenu de la section peut provenir de différentes instances, et il n’est pas judicieux de tenter de traiter du contenu à partir de deux composants distincts, ce qui peut entraîner des résultats inattendus. Pour obtenir une explication détaillée sur ce comportement, consultez l’initialisation des composants incohérents avec Blazor SectionOutlet/SectionContent et CascadingValue (dotnet/aspnetcore #58316).

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.
  • Une section qui contient des composants interactifs est rendue statiquement (non fonctionnelle) dans un composant de disposition dans un Blazor Web App composant de disposition qui adopte le rendu par page/composant. Pour plus d’informations, consultez layouts ASP.NET Core Blazor.
  • Last updated on