Exercice - Lier des contrôles aux données dans les applications Blazor

L’application Blazing Pizza doit mettre à jour l’interface lorsque les clients modifient les pizzas et les ajoutent à leurs commandes. Blazor vous permet de lier des contrôles HTML aux propriétés C# à mettre à jour lorsque leurs valeurs changent.

Les clients doivent voir quelles pizzas ils commandent et comment la taille qu’ils choisissent affecte le prix.

Dans cet exercice, vous obtenez l’application Blazing Pizza dans une position où les commandes peuvent être mises à jour et modifiées. Vous voyez comment lier des contrôles aux propriétés d’une pizza et recalculer les prix sur ces modifications.

Afficher la commande de pizza d’un client

Vous allez ajouter une barre latérale qui affiche toutes les pizzas qu’un client ajoute à sa commande.

1. Arrêtez l’application si elle est toujours en cours d’exécution.

2. Dans Visual Studio Code, dans l’Explorateur de fichiers, développez Pages , puis sélectionnez Index.razor.

3. Entre les blocs @if et @code, ajoutez ce code :

   <div class="sidebar">
       @if (order.Pizzas.Any())
       {
           <div class="order-contents">
               <h2>Your order</h2>
   
               @foreach (var configuredPizza in order.Pizzas)
               {
                 <div class="cart-item">
                     <div class="title">@(configuredPizza.Size)" @configuredPizza.Special.Name</div>
                     <div class="item-price">
                         @configuredPizza.GetFormattedTotalPrice()
                     </div>
                 </div>
               }
           </div>
       }
       else
       {
           <div class="empty-cart">Choose a pizza<br>to get started</div>
       }
   
       <div class="order-total @(order.Pizzas.Any() ? "" : "hidden")">
           Total:
           <span class="total-price">@order.GetFormattedTotalPrice()</span>
           <a href="checkout" class="@(OrderState.Order.Pizzas.Count == 0 ? "btn btn-warning disabled" : "btn btn-warning")">
               Order >
           </a>
       </div>
   </div>
   

   Ce code HTML ajoute une barre latérale à la page. S’il y a des pizzas dans OrderState.Order, il les affiche. S’il n’y a aucune commande, les clients sont invités à en ajouter.

   Il existe des erreurs, car le composant ne sait pas quelles sont les commandes.

4. Dans le @code bloc sous List<PizzaSpecial> specials = new();, ajoutez ce code :

   Order order => OrderState.Order;
   

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

   

   Essayez de commander des pizzas et d'en annuler certaines. Notez qu'ils sont ajoutés au panier et que le total de la commande est mis à jour.

6. Appuyez sur Maj+F5 ou sélectionnez Arrêter le débogage.

Supprimer une pizza de la commande d’un client

Vous remarquerez peut-être qu’il n’existe aucun moyen de supprimer une pizza configurée du panier d’achat du client. Ajoutons cette fonctionnalité.

La première étape consiste à mettre à jour le OrderState service afin qu’il puisse fournir une méthode pour supprimer les pizzas d’une commande.

1. Dans l’Explorateur de fichiers, sélectionnez Services/OrderState.cs.

2. En bas de la classe, ajoutez cette méthode :

   public void RemoveConfiguredPizza(Pizza pizza)
   {
       Order.Pizzas.Remove(pizza);
   }
   

3. Dans l’Explorateur de fichiers, développez Pages, puis sélectionnez Index.razor.

4. Dans <div class="cart-item">, ajoutez une <a> balise avant la fermeture </div> pour créer un bouton Supprimer :

   <a @onclick="@(() => OrderState.RemoveConfiguredPizza(configuredPizza))" class="delete-item">x</a>
   

   Cette balise ajoute un X à chaque pizza dans la barre latérale de commande. Lorsque vous le sélectionnez, il appelle la RemoveConfiguredPizza méthode dans le OrderState service.

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

   

6. Appuyez sur Maj+F5 ou sélectionnez Arrêter le débogage.

Configurer une taille de pizza dynamiquement

La boîte de dialogue de configuration de pizza ne se met pas à jour lorsque le curseur de taille est modifié. Le composant a besoin d’un moyen de mettre à jour la pizza et la taille, puis de recalculer le prix.

1. Dans l’Explorateur de fichiers, développez Shared , puis sélectionnez ConfigurePizzaDialog.razor.

2. Ajoutez du code pour lier la valeur du input contrôle HTML à la taille de pizza :

   <input type="range" min="@Pizza.MinimumSize" max="@Pizza.MaximumSize" step="1" @bind="Pizza.Size"/>
   

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

   Utilisez la boîte de dialogue mise à jour pour ajouter des pizzas de taille différente à votre commande. Sélectionnez un point dans la barre de curseurs au lieu de le faire glisser. Notez que la taille de la pizza est mise à jour lors de l’événement de relâchement de la souris sur le contrôle.

   Si vous faites glisser le curseur, la taille ne change pas tant que vous n’avez pas libéré la souris. Résolvons ce problème.

4. Appuyez sur Maj+F5 ou sélectionnez Arrêter le débogage.

5. Ajoutez l’événement auquel le contrôle doit être lié :

   <input type="range" min="@Pizza.MinimumSize" max="@Pizza.MaximumSize" step="1" @bind="Pizza.Size" @bind:event="oninput" />
   

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

   

Comment l’ajout du @bind="Pizza.Size" code a-t-il fourni tant de fonctionnalités ? Si vous examinez l’ensemble du code ConfigurePizzaDialog.razor , vous voyez que votre équipe a déjà connecté les autres éléments aux propriétés de la pizza.

Par exemple, la mise à jour des prix à cause de ce code :

Price: <span class="price">@(Pizza.GetFormattedTotalPrice())</span>

Le prix est mis à jour à mesure que la taille de la pizza change, car la méthode sur la pizza GetFormattedTotalPrice() utilise la taille de la pizza pour calculer le prix total.

Vous avez progressé sur l’application Blazing Pizza. Si vous souhaitez continuer à l’améliorer, suivez le module suivant dans ce parcours d’apprentissage.