Exercice : créer un gestionnaire d’événements Blazor pour les événements OnClick

Blazor vous offre la possibilité de connecter du code C# à des événements DOM HTML. Dans cet exercice, vous utilisez cette possibilité d’améliorer une application existante.

Dans le cadre d'une équipe de développement travaillant pour améliorer une application Blazing Pizza, vous êtes invité à terminer le processus de commande afin de saisir les adresses des clients. Vous souhaitez ajouter des champs de texte et améliorer le processus de paiement.

Dans cet exercice, vous clonez une application existante et créez un composant d’adresse pour capturer les détails de l’adresse. Avec les champs en place, vous définissez le focus sur le premier champ du formulaire.

Cloner l’application existante de votre équipe

Ce module utilise le Kit de développement logiciel (SDK) .NET 9.0. Vérifiez que .NET 9.0 est installé en exécutant la commande suivante dans votre terminal de commandes préféré :

dotnet --list-sdks

Une sortie semblable à l’exemple suivant s’affiche :

8.0.100 [C:\Program Files\dotnet\sdk]
9.0.100 [C:\Program Files\dotnet\sdk]

Vérifiez que la liste comporte une version commençant par 9. S’il n’y en a pas ou que la commande est introuvable, installez la dernière version du Kit de développement logiciel (SDK) .NET 9.0.

Si vous créez votre première application Blazor, suivez les instructions d’installation de Blazor pour installer la version correcte de .NET et vérifiez que votre ordinateur est correctement configuré. Arrêtez à l’étape Créer votre application.

1. Ouvrez Visual Studio Code.

2. Dans Visual Studio Code, ouvrez le terminal intégré en sélectionnant Affichage, puis Terminal dans le menu principal.

3. Dans le terminal, accédez à l’emplacement où vous souhaitez créer le projet.

4. Clonez l’application à partir de GitHub.

   git clone https://github.com/MicrosoftDocs/mslearn-use-forms-in-blazor-web-apps.git BlazingPizza
   

5. Sélectionnez Fichier, puis Ouvrir le dossier….

6. Dans la boîte de dialogue Ouvrir, accédez au dossier BlazingPizza, puis sélectionnez Sélectionner un dossier.

   Visual Studio Code est susceptible d’afficher une invite relative aux dépendances non résolues. Sélectionnez Restaurer.

7. Exécutez l’application pour vérifier son bon fonctionnement.

8. Dans Visual Studio Code, appuyez sur F5 ou sélectionnez Exécuter>Démarrer le débogage.

   

   Essayez de personnaliser des pizzas et de les ajouter à votre commande. Sélectionnez Commande > au bas de la page. Vous devriez voir la page de règlement actuelle.

9. Appuyez sur Maj + F5 pour arrêter l’exécution de l’application.

Refactoriser la page de validation

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

   À l’heure actuelle, la page de commande affiche simplement la liste des pizzas qui ont été configurées. Vous êtes invité à refactoriser la page pour inclure une section d’adresse.

2. Remplacez le bloc HTML <div class="main"> existant par deux colonnes pour les données.

   <div class="main">
       <div class="checkout-cols">
           <div class="checkout-order-details">
               <h4>Review order</h4>
               <OrderReview Order="Order" />
           </div>
   
           <div class="checkout-delivery-address">
               <h4>Deliver to...</h4>
               <AddressEditor Address="Order.DeliveryAddress" />
           </div>
       </div>
   
       <button class="checkout-button btn btn-warning" @onclick="PlaceOrder" disabled=@isSubmitting>
           Place order
       </button>
   </div>
   

   Le code précédent connecte l’événement HTML onclick de l’élément bouton à la méthode Blazor PlaceOrder dans le bloc @code.

   La refactorisation référence deux nouveaux contrôles Blazor OrderReview et AddressEditor. Déplacez l'ancien code de caisse qui répertorie les pizzas vers le composant OrderReview.

3. Dans l’Explorateur de fichiers, cliquez avec le bouton droit sur Partagé, puis sélectionnez Nouveau fichier.

4. Entrez OrderReview.razor comme nom de fichier.

5. Ajoutez une boucle foreach pour afficher les pizzas contenues dans une commande.

   @foreach (var pizza in Order.Pizzas)
   {
       <p>
           <strong>
               @(pizza.Size)"
               @pizza.Special.Name
               (£@pizza.GetFormattedTotalPrice())
           </strong>
       </p>
   }
   
   <p>
       <strong>
           Total price:
           £@Order.GetFormattedTotalPrice()
       </strong>
   </p>
   
   @code {
       [Parameter] public Order Order { get; set; }
   }
   

6. Dans l’Explorateur de fichiers, cliquez avec le bouton droit sur Partagé, puis sélectionnez Nouveau fichier.

7. Entrez AddressEditor.razor comme nom de fichier.

8. Ajoutez du code qui utilise un élément input pour chaque champ d’une adresse. La classe Address dans le dossier Modèle affiche tous les champs.

   <div class="form-field">
       <label>Name:</label>
       <div>
           <input @bind="Address.Name" />
       </div>
   </div>
   
   <div class="form-field">
       <label>Line 1:</label>
       <div>
           <input @bind="Address.Line1" />
       </div>
   </div>
   
   <div class="form-field">
       <label>Line 2:</label>
       <div>
           <input @bind="Address.Line2" />
       </div>
   </div>
   
   <div class="form-field">
       <label>City:</label>
       <div>
           <input @bind="Address.City" />
       </div>
   </div>
   
   <div class="form-field">
       <label>Region:</label>
       <div>
           <input @bind="Address.Region" />
       </div>
   </div>
   
   <div class="form-field">
       <label>Postal code:</label>
       <div>
           <input @bind="Address.PostalCode" />
       </div>
   </div>
   
   @code {
       [Parameter] public Address Address { get; set; }
   }
   

Tester la nouvelle page de validation

1. Dans Visual Studio Code, appuyez sur F5 ou sélectionnez Exécuter>Démarrer le débogage.

   

   Ajoutez des pizzas et sélectionnez Commande > pour afficher le nouveau flux de validation.

2. Appuyez sur Maj + F5 pour arrêter l’exécution de l’application.

Améliorer la convivialité du formulaire

Quand le client est dirigé vers la page de validation, il commence par entrer son nom. Blazor vous permet de définir le focus sur les éléments HTML d’une page. Nous allons améliorer notre application en ajoutant ce comportement.

1. Dans AddressEditor.razor, modifiez le code HTML de l’élément de nom input pour ajouter @ref="startName".

   <input @ref="startName" @bind="Address.Name" />
   

   La directive Blazor @ref="startName" permet au bloc de code de créer un ElementReference pour référencer l’élément d’entrée. Vous pouvez ensuite utiliser cette référence d’élément pour appeler FocusAsync une fois qu’une page est rendue.

2. Ajoutez du code qui appelle FocusAsync une fois qu'une page est chargée après la déclaration [Parameter] public Address Address { get; set; }.

   private ElementReference startName;
   
   protected override async Task OnAfterRenderAsync(bool firstRender)
   {
       if (firstRender) {
           await startName.FocusAsync();
       }
   }    
   

   Ce code crée ElementReference puis, après le rendu d’une page, met le focus sur le champ Name.

3. Dans Visual Studio Code, appuyez sur F5 ou sélectionnez Exécuter>Démarrer le débogage.

   

   Ajoutez des pizzas et sélectionnez Commander > pour voir que c’est le champ de formulaire Nom qui est mis en focus sur la page de validation.

4. Appuyez sur Maj + F5 pour arrêter l’exécution de l’application.