Exercice - Partager des données dans des applications Blazor - Training

6 minutes

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

Grâce à Blazing Pizza, les clients ont la possibilité de changer la taille de leurs pizzas spéciales. Vous devez stocker la commande, et vous avez choisi de stocker l’état de l’application dans un service conteneur.

Dans cet exercice, vous allez transmettre des données à un nouveau composant de configuration de commande et vous verrez comment stocker l’état de l’application dans un service étendu 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é, puis 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 affiche 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 @code Blazor pour autoriser la transmission des paramètres au 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 bloc @code, sous la variable List<PizzaSpecial> :
```
    Pizza configuringPizza;
    bool showingConfigureDialog;
```

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

    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 de pizza spéciale et définit la variable showingConfigureDialog sur true.

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

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

L’ensemble du fichier index.razor doit maintenant se présenter comme 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 observez la nouvelle boîte de dialogue qui s’affiche.

Gérer l’état d’une commande

Pour le moment, l’application affiche la boîte de dialogue de configuration, mais elle 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 verrez qu’il y a 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>();
```
Dans l’exercice précédent, nous avons ajouté notre contexte de base de données ici. Ce code ajoute le nouveau service OrderState. Ce code étant déjà en place, nous pouvons maintenant l’utiliser dans le composant index.razor.
Ajoutez la directive using suivante en début de fichier pour résoudre la classe OrderState :
```
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 le code suivant :
```
@using BlazingPizza.Services
@inject OrderState OrderState
```

Supprimez configuringPizza, showingConfigureDialog et ShowConfigurePizzaDialog()dans le bloc @code. 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");
    }
}

Des erreurs existent désormais, dans lesquelles tout le code fait référence à ce qui a été supprimé.

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

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

Définissez la référence sur la valeur booléenne 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 verrez aucune différence. La boîte de dialogue s’affiche comme auparavant.

Annuler et créer des commandes de pizzas

Vous avez peut-être remarqué dans la classe OrderState deux méthodes que nous n’avons pas encore utilisées. Les méthodes CancelConfigurePizzaDialog et ConfirmConfigurePizzaDialog ferment la boîte de dialogue et ajoutent la pizza à un objet Order si le client confirme la commande. Nous allons connecter ces méthodes aux boutons de la 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 ensuite ConfigurePizzaDialog.razor.

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

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

Des directives @onclick peuvent maintenant être ajoutées aux boutons. Remplacez le code actuel des boutons de la boîte de dialogue par le balisage suivant :

  <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 changée. Nous allons ajouter ces fonctionnalités dans l’exercice suivant.

Continuer

Exercice - Partager des données dans des applications Blazor

Boîte de dialogue Ajouter une nouvelle configuration de commande

Commander une pizza

Gérer l’état d’une commande

Annuler et créer des commandes de pizzas

Commentaires