Partager des données dans des applications Blazor

Blazor comprend plusieurs façons de partager des informations entre les composants. Vous pouvez utiliser des paramètres de composant ou des paramètres en cascade pour envoyer des valeurs d’un composant parent à un composant enfant. Le modèle AppState est une autre approche que vous pouvez utiliser pour stocker des valeurs et les accéder à partir de n’importe quel composant de l’application.

Supposons que vous travaillez sur le nouveau site web de livraison de pizzas. Plusieurs pizzas doivent être affichées sur la page d’accueil de la même façon. Vous aimeriez présenter les pizzas en affichant un composant enfant pour chaque pizza. Vous souhaitez à présent transmettre un ID à ce composant enfant qui détermine la pizza qu’il affiche. Vous souhaitez également stocker et afficher une valeur sur plusieurs composants qui indiquent le nombre total de pizzas que vous avez vendues aujourd’hui.

Dans cette unité, vous allez apprendre trois techniques différentes que vous pouvez utiliser pour partager des valeurs entre deux composants Blazor ou plus.

Partage d’informations avec d’autres composants à l’aide de paramètres de composant

Dans une application web Blazor, chaque composant affiche une partie du code HTML. Certains composants affichent une page complète, mais d’autres restituent des fragments plus petits de balisage, tels qu’une table, un formulaire ou un seul contrôle. Si votre composant affiche uniquement une section de balisage, vous devez l’utiliser comme composant enfant au sein d’un composant parent. Votre composant enfant peut également être un parent d’autres composants plus petits qui s’affichent dans celui-ci. Les composants enfants sont également appelés des composants imbriqués.

Dans cette hiérarchie de composants parent et enfant, vous pouvez partager des informations entre eux à l’aide de paramètres de composant. Définissez ces paramètres sur les composants enfants, puis définissez leurs valeurs dans le parent. Par exemple, si vous avez un composant enfant qui affiche des photos de pizzas, vous pouvez utiliser un paramètre de composant pour transmettre l’ID de pizza. Le composant enfant recherche la pizza à partir de l’ID et obtient des images et d’autres données. Si vous souhaitez afficher de nombreuses pizzas différentes, vous pouvez utiliser ce composant enfant plusieurs fois sur la même page parente, en passant un ID différent à chaque enfant.

Commencez par définir le paramètre de composant dans le composant enfant. Vous la définissez en tant que propriété publique C# et la décorez avec l’attribut [Parameter] :

<h2>New Pizza: @PizzaName</h2>

<p>@PizzaDescription</p>

@code {
    [Parameter]
    public string PizzaName { get; set; }
    
    [Parameter]
    public string PizzaDescription { get; set; } = "The best pizza you've ever tasted."
}

Étant donné que les paramètres de composant sont membres du composant enfant, vous pouvez les afficher dans votre code HTML à l’aide du symbole réservé @ de Blazor, suivi de leur nom. En outre, le code précédent spécifie une valeur par défaut pour le PizzaDescription paramètre. Cette valeur est rendue si le composant parent ne passe pas de valeur. Sinon, la valeur passée à partir du parent le remplace.

Vous pouvez également utiliser des classes personnalisées dans votre projet en tant que paramètres de composant. Considérez cette classe qui décrit une garniture :

public class PizzaTopping
{
    public string Name { get; set; }
    public string Ingredients { get; set; }
}

Vous pouvez l’utiliser comme paramètre de composant de la même façon qu’une valeur de paramètre pour accéder aux propriétés individuelles de la classe à l’aide de la syntaxe par points :

<h2>New Topping: @Topping.Name</h2>

<p>Ingredients: @Topping.Ingredients</p>

@code {
    [Parameter]
    public PizzaTopping Topping { get; set; }
}

Dans le composant parent, vous définissez des valeurs de paramètre à l’aide d’attributs des balises du composant enfant. Vous définissez directement des composants simples. Avec un paramètre basé sur une classe personnalisée, vous utilisez du code C# inline pour créer une instance de cette classe et définir ses valeurs :

@page "/pizzas-toppings"

<h1>Our Latest Pizzas and Topping</h1>

<Pizza PizzaName="Hawaiian" PizzaDescription="The one with pineapple" />

<PizzaTopping Topping="@(new PizzaTopping() { Name = "Chilli Sauce", Ingredients = "Three kinds of chilli." })" />

Partager des informations à l’aide de paramètres en cascade

Les paramètres de composant fonctionnent correctement lorsque vous souhaitez transmettre une valeur à l’enfant immédiat d’un composant. Les tâches deviennent plus complexes lorsque vous avez une hiérarchie profonde avec des enfants d’enfants, et ainsi de suite. Les paramètres de composant ne sont pas transmis automatiquement aux composants petits-enfants des composants ancêtres ou plus loin dans la hiérarchie. Pour gérer ce problème avec élégance, Blazor inclut des paramètres en cascade. Lorsque vous définissez la valeur d’un paramètre en cascade dans un composant, sa valeur est automatiquement disponible pour tous les composants descendants à n’importe quelle profondeur.

Dans le composant parent, l’utilisation de la <CascadingValue> balise spécifie les informations qui seront en cascade pour tous les descendants. Cette balise est implémentée en tant que composant Blazor intégré. Tout composant rendu dans cette balise est en mesure d’accéder à la valeur.

@page "/specialoffers"

<h1>Special Offers</h1>

<CascadingValue Name="DealName" Value="Throwback Thursday">
    <!-- Any descendant component rendered here will be able to access the cascading value. -->
</CascadingValue>

Dans les composants descendants, vous pouvez accéder à la valeur en cascade en utilisant des membres de composant et en les enrichissant avec l'attribut [CascadingParameter].

<h2>Deal: @DealName</h2>

@code {
    [CascadingParameter(Name="DealName")]
    private string DealName { get; set; }
}

Ainsi, dans cet exemple, la <h2> balise a le contenu Deal: Throwback Thursday , car un composant ancêtre définit cette valeur en cascade.

Dans l’exemple précédent, l’attribut Name dans le parent identifie la valeur en cascade, qui est mise en correspondance avec la Name valeur de l’attribut [CascadingParameter] . Vous pouvez éventuellement omettre ces noms, auquel cas les attributs sont mis en correspondance par type. L’omission du nom fonctionne bien lorsque vous n’avez qu’un seul paramètre de ce type. Si vous souhaitez cascader deux valeurs de chaîne différentes, vous devez utiliser des noms de paramètres pour éviter toute ambiguïté.

Partager des informations à l’aide d’AppState

Une autre approche pour partager des informations entre différents composants consiste à utiliser le modèle AppState. Vous créez une classe qui définit les propriétés que vous souhaitez stocker et enregistrez-la en tant que service étendu. Dans n’importe quel composant dans lequel vous souhaitez définir ou utiliser les valeurs AppState, vous injectez le service, puis vous pouvez accéder à ses propriétés. Contrairement aux paramètres de composant et aux paramètres en cascade, les valeurs dans AppState sont disponibles pour tous les composants de l’application, même les composants qui ne sont pas enfants du composant qui a stocké la valeur.

Par exemple, considérez cette classe qui stocke une valeur sur les ventes :

public class PizzaSalesState
{
    public int PizzasSoldToday { get; set; }
}

Vous devez ajouter la classe en tant que service délimité dans le fichier Program.cs :

...
// Add services to the container
builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();

// Add the AppState class
builder.Services.AddScoped<PizzaSalesState>();
...

À présent, dans n’importe quel composant dans lequel vous souhaitez définir ou récupérer des valeurs AppState, vous pouvez injecter la classe, puis accéder aux propriétés :

@page "/"
@inject PizzaSalesState SalesState

<h1>Welcome to Blazing Pizzas</h1>

<p>Today, we've sold this many pizzas: @SalesState.PizzasSoldToday</p>

<button @onclick="IncrementSales">Buy a Pizza</button>

@code {
    private void IncrementSales()
    {
        SalesState.PizzasSoldToday++;
    }
}

Dans l’unité suivante, vous allez l’essayer vous-même !