Partager des données dans des applications Blazor

• 7 minutes

Blazor comprend plusieurs méthodes de partage d’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 y accéder à partir de n’importe quel composant de l’application.

Supposons que vous travailliez sur le nouveau site web de l’entreprise de livraison de pizza. Plusieurs pizzas doivent être affichées de la même manière sur la page d’accueil. 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 affichera. Vous souhaitez également stocker et afficher une valeur sur plusieurs composants qui indique le nombre total de pizzas que vous avez vendues aujourd’hui.

Dans cette leçon, vous allez découvrir 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 de code HTML. Certains composants affichent une page complète, mais d’autres affichent des fragments de balisage plus petits, comme une table, un formulaire ou un contrôle unique. Si votre composant n’affiche qu’une section de balisage, vous devez l’utiliser comme composant enfant dans un composant parent. Votre composant enfant peut également être 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 un grand nombre de pizzas différentes, vous pouvez utiliser ce composant enfant plusieurs fois sur la même page parente, en transmettant un ID différent à chaque enfant.

Vous commencez par définir le paramètre de composant dans le composant enfant. Il est défini en tant que propriété publique C# et décoré 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 des membres du composant enfant, vous pouvez les afficher dans votre code HTML à l’aide du symbole @ réservé de Blazor, suivi de leur nom. Le code précédent spécifie également une valeur par défaut pour le paramètre PizzaDescription. Cette valeur est affichée si le composant parent ne transmet pas de valeur. Sinon, elle sera remplacée par la valeur transmise par le parent.

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

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

Vous pouvez l’utiliser en tant que paramètre de composant de la même manière qu’une valeur de paramètre, en accédant aux propriétés individuelles de la classe à l’aide de la syntaxe à point :

<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 les valeurs de paramètre à l’aide d’attributs des étiquettes du composant enfant. Vous définissez des composants simples directement. Avec un paramètre basé sur une classe personnalisée, vous utilisez le code C# inlined 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 bien 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 par des composants ancêtres ou encore plus loin dans la hiérarchie. Pour gérer ce problème de manière élégante, Blazor comprend 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, quelle que soit leur profondeur.

Dans le composant parent, l’étiquette <CascadingValue> permet de spécifier les informations mises en cascade sur tous les descendants. Cette balise est implémentée en tant que composant Blazor intégré. Tout composant affiché dans cette étiquette pourra 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, la balise <h2> aura le contenu Deal: Throwback Thursday, car la valeur en cascade était définie par un composant ancêtre.

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

Partager des informations à l’aide d’AppState

Une autre approche de partage d’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, puis l’enregistrez en tant que service étendu. Dans tous les composants où vous souhaitez définir ou utiliser les valeurs AppState, vous injectez le service. Vous pouvez alors 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, y compris les composants qui ne sont pas des enfants du composant qui a stocké la valeur.

À titre d’exemple, examinez cette classe qui stocke une valeur sur les ventes :

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

Ajoutez la classe en tant que service étendu dans le fichier Program.cs :

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

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

Ensuite, dans tous les composants où vous souhaitez définir ou récupérer les 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 la leçon suivante, vous allez essayer vous-même.

Vérifiez vos connaissances

1.

Les composants Blazor peuvent recevoir des entrées à l’aide de deux types de paramètres. Quelles sont-elles ?

Paramètre et DescendingParameter

Paramètre et RequiredParameter

Paramètre et CascadingParameter

2.

AppState peut être inscrit auprès du localisateur de service à l’aide de laquelle de ces instructions ?

builder.Services.AddAppState()

builder.Services.AddServerSideBlazor()

builder.Services.AddScoped<PizzaSalesState>()

Vous devez répondre à toutes les questions avant de vérifier votre travail.