Exercice - Partager des données dans des applications Blazor

6 minutes

Maintenant que votre application est connectée à une base de données, il est temps d’ajouter la possibilité aux clients de configurer et de commander une pizza.

Blazing Pizza veut que vous construisiez la capacité des clients à modifier la taille de leurs pizzas spéciales. Vous devez stocker la commande, et vous voulez choisi de stocker l’état de l’application dans un service conteneur.

Dans cet exercice, vous transmettez des données à un nouveau composant de configuration de commande et découvrez comment stocker l’état de l’application dans un service délimité OrderState.

Boîte de dialogue Ajouter une nouvelle configuration de commande

Arrêtez l’application si elle est toujours en cours d’exécution.
Dans Visual Studio Code, cliquez avec le bouton droit sur le dossier partagé et sélectionnez Nouveau fichier.
Entrez ConfigurePizzaDialog.razor comme nom de fichier.

Entrez ce code pour l'interface utilisateur du nouveau composant de commande :

@inject HttpClient HttpClient

<div class="dialog-container">
    <div class="dialog">
        <div class="dialog-title">
            <h2>@Pizza.Special.Name</h2>
            @Pizza.Special.Description
        </div>
        <form class="dialog-body">
            <div>
                <label>Size:</label>
                <input type="range" min="@Pizza.MinimumSize" max="@Pizza.MaximumSize" step="1" />
                <span class="size-label">
                    @(Pizza.Size)" (£@(Pizza.GetFormattedTotalPrice()))
                </span>
            </div>
        </form>

        <div class="dialog-buttons">
            <button class="btn btn-secondary mr-auto" >Cancel</button>
            <span class="mr-center">
                Price: <span class="price">@(Pizza.GetFormattedTotalPrice())</span>
            </span>
            <button class="btn btn-success ml-auto" >Order ></button>
        </div>
    </div>
</div>

Ce composant est une boîte de dialogue qui montre la pizza spéciale sélectionnée et permet au client de sélectionner la taille de la pizza.

Le composant a besoin d’une pizza spéciale du composant de page d’index pour accéder aux valeurs de membre d’une pizza.

Ajoutez le bloc Blazor @code pour permettre le passage des paramètres dans le composant.
```
@code {
    [Parameter] public Pizza Pizza { get; set; }
}
```

Commander une pizza

Lorsqu’un client sélectionne une pizza, la boîte de dialogue doit lui permettre de modifier la taille de sa pizza. Nous allons améliorer le contrôle index.razor pour ajouter cette interactivité.

Dans l’Explorateur de fichiers, développez Pages, puis sélectionnez Index.razor.
Ajoutez ce code dans le @code bloc sous la List<PizzaSpecial> variable :
```
Pizza configuringPizza;
bool showingConfigureDialog;
```

Ajoutez ce code pour créer une pizza sous la OnInitializedAsync() méthode :

void ShowConfigurePizzaDialog(PizzaSpecial special)
{
    configuringPizza = new Pizza()
    {
        Special = special,
        SpecialId = special.Id,
        Size = Pizza.DefaultSize
    };

    showingConfigureDialog = true;
}

Autorisez la page web à appeler la méthode ShowConfigurePizzaDialog côté serveur en permettant aux clients de sélectionner une balise <li> de pizzas. Remplacez la ligne <li> par le code suivant :
```
<li @onclick="@(() => ShowConfigurePizzaDialog(special))" style="background-image: url('@special.ImageUrl')">
```
Lorsqu’un client sélectionne une pizza, le serveur exécute la méthode ShowConfigurePizzaDialog qui crée une pizza avec les données spéciales de pizza et assigne la variable showingConfigureDialog à true.

La page a besoin d’un moyen d’afficher le nouveau ConfigurePizzaDialog composant. Ajoutez ce code au-dessus du @code bloc :

@if (showingConfigureDialog)
{
    <ConfigurePizzaDialog Pizza="configuringPizza" />
}

Le fichier entier index.razor doit maintenant ressembler à cet exemple :

@page "/"
@inject HttpClient HttpClient
@inject NavigationManager NavigationManager

<div class="main">
    <h1>Blazing Pizzas</h1>
    <ul class="pizza-cards">
    @if (specials != null)
    {
        @foreach (var special in specials)
        {
          <li @onclick="@(() => ShowConfigurePizzaDialog(special))" style="background-image: url('@special.ImageUrl')">
            <div class="pizza-info">
            <span class="title">@special.Name</span>
            @special.Description
            <span class="price">@special.GetFormattedBasePrice()</span>
            </div>
          </li>
        }
    }
    </ul>
</div>

@if (showingConfigureDialog)
{
    <ConfigurePizzaDialog Pizza="configuringPizza" />
}

@code {
    List<PizzaSpecial> specials = new();
    Pizza configuringPizza;
    bool showingConfigureDialog;

    protected override async Task OnInitializedAsync()
    {
        specials = await HttpClient.GetFromJsonAsync<List<PizzaSpecial>>(NavigationManager.BaseUri + "specials");
    }

    void ShowConfigurePizzaDialog(PizzaSpecial special)
    {
        configuringPizza = new Pizza()
        {
            Special = special,
            SpecialId = special.Id,
            Size = Pizza.DefaultSize
        };

        showingConfigureDialog = true;
    }
}

Appuyez sur F5 ou sélectionnez Exécuter. Sélectionnez ensuite Démarrer le débogage.
Sélectionnez une pizza et regardez la nouvelle boîte de dialogue s’afficher.

Gérer l’état d’une commande

À l’heure actuelle, l’application affiche la boîte de dialogue de configuration, mais ne vous permet pas d’annuler ou de passer à la commande de la pizza. Pour gérer l’état de la commande, vous allez ajouter un nouveau service conteneur d’état de la commande.

Arrêtez l’application si elle est toujours en cours d’exécution.
Créez un dossier dans le dossier BlazingPizza . Nommez-le Services.
Créez un fichier dans le dossier Services . Nommez-le OrderState.cs.

Entrez ce code pour la classe :

namespace BlazingPizza.Services;

public class OrderState
{
    public bool ShowingConfigureDialog { get; private set; }
    public Pizza ConfiguringPizza { get; private set; }
    public Order Order { get; private set; } = new Order();

    public void ShowConfigurePizzaDialog(PizzaSpecial special)
    {
        ConfiguringPizza = new Pizza()
        {
            Special = special,
            SpecialId = special.Id,
            Size = Pizza.DefaultSize,
            Toppings = new List<PizzaTopping>(),
        };

        ShowingConfigureDialog = true;
    }

    public void CancelConfigurePizzaDialog()
    {
        ConfiguringPizza = null;

        ShowingConfigureDialog = false;
    }

    public void ConfirmConfigurePizzaDialog()
    {
        Order.Pizzas.Add(ConfiguringPizza);
        ConfiguringPizza = null;

        ShowingConfigureDialog = false;
    }
}

Vous remarquez qu’il existe actuellement du code dans le composant index.razor que nous pouvons déplacer dans la nouvelle classe. L’étape suivante consiste à rendre ce service disponible dans l’application.

Dans l’Explorateur de fichiers, sélectionnez Program.cs.
Dans la partie du fichier avec les lignes qui commencent par builder.Services., ajoutez cette ligne :
```
builder.Services.AddScoped<OrderState>();
```
À partir de l’exercice précédent, nous avons ajouté notre contexte de base de données ici. Ce code ajoute le nouveau OrderState service. Avec ce code en place, nous pouvons maintenant l’utiliser dans le index.razor composant.
Ajoutez la directive suivante using en haut du fichier. Cette directive résout toutes les références à la OrderState classe :
```
using BlazingPizza.Services;
```
Dans l’Explorateur de fichiers, développez Pages, puis sélectionnez Index.razor.
En haut du fichier, sous @inject NavigationManager NavigationManager, ajoutez ce code :
```
@using BlazingPizza.Services
@inject OrderState OrderState
```

Supprimez configuringPizza, showingConfigureDialoget ShowConfigurePizzaDialog() du @code bloc. Elle doit maintenant ressembler à ceci :

@code {
    List<PizzaSpecial> specials = new List<PizzaSpecial>();

    protected override async Task OnInitializedAsync()
    {
        specials = await HttpClient.GetFromJsonAsync<List<PizzaSpecial>>(NavigationManager.BaseUri + "specials");
    }
}

Il existe désormais des erreurs partout où le code fait référence aux éléments que vous avez supprimés.

Modifiez l'appel à ShowConfigurePizzaDialog(special)) pour utiliser la version OrderState :

<li @onclick="@(() => OrderState.ShowConfigurePizzaDialog(special))" style="background-image: url('@special.ImageUrl')">

Modifiez la référence au booléen showingConfigureDialog:
```
@if (OrderState.ShowingConfigureDialog)
```

Modifiez le paramètre à l’aide de configuringPizza :

<ConfigurePizzaDialog Pizza="OrderState.ConfiguringPizza" />

Appuyez sur F5 ou sélectionnez Exécuter. Sélectionnez ensuite Démarrer le débogage.

Si tout est correct, vous ne devriez pas voir de différence. La boîte de dialogue s’affiche comme avant.

Annuler et passer des commandes de pizza

Vous remarquerez peut-être qu’il existe deux méthodes dans la classe OrderState qui ne sont pas encore utilisées. Les méthodes CancelConfigurePizzaDialog et ConfirmConfigurePizzaDialog ferment la boîte de dialogue et ajoutent la pizza à un objet Order une fois que le client confirme la commande. Connectons ces méthodes aux boutons de boîte de dialogue de configuration.

Arrêtez l’application si elle est toujours en cours d’exécution.
Dans l’Explorateur de fichiers, développez Partagé. Sélectionnez ConfigurePizzaDialog.razor.

Dans le @code bloc, ajoutez deux nouveaux paramètres :

@code {
   [Parameter] public Pizza Pizza { get; set; }
   [Parameter] public EventCallback OnCancel { get; set; }
   [Parameter] public EventCallback OnConfirm { get; set; }
}
`` `

Les boutons peuvent maintenant avoir des directives @onclick ajoutées. Remplacez le code actuel des boutons de boîte de dialogue par ce balisage :

<div class="dialog-buttons">
    <button class="btn btn-secondary mr-auto" @onclick="OnCancel">Cancel</button>
    <span class="mr-center">
        Price: <span class="price">@(Pizza.GetFormattedTotalPrice())</span>
    </span>
    <button class="btn btn-success ml-auto" @onclick="OnConfirm">Order ></button>
</div>

La dernière étape consiste à transmettre les méthodes OrderState pour annuler et confirmer les commandes. Dans l’Explorateur de fichiers, développez Pages. Sélectionnez Ensuite Index.razor.

Modifiez le code de l’appel au composant ConfigurePizzaDialog :

<ConfigurePizzaDialog
    Pizza="OrderState.ConfiguringPizza"
    OnCancel="OrderState.CancelConfigurePizzaDialog"
    OnConfirm="OrderState.ConfirmConfigurePizzaDialog" />

Appuyez sur F5 ou sélectionnez Exécuter. Sélectionnez ensuite Démarrer le débogage.

L’application doit maintenant permettre aux clients d’annuler ou d’ajouter une pizza configurée à une commande. Nous n’avons aucun moyen d’afficher la commande actuelle ou de mettre à jour les prix lorsque la taille de la pizza est modifiée. Nous allons ajouter ces fonctionnalités dans l’exercice suivant.

Rétroaction

Cette page vous a-t-elle été utile ?