Exercice : créer un formulaire d’adresse avec des composants Blazor

Effectué

Pour le moment, l’application de commande de pizzas Blazing Pizza utilise des éléments HTML pour capturer des données et pour les boutons. L’infrastructure Blazor a amélioré la prise en charge des formulaires afin qu’ils puissent utiliser des composants qui peuvent être liés à un modèle C#.

L’équipe souhaite que vous remplaciez les éléments HTML actuels par des composants Blazor. L’équipe souhaite que les commandes soient envoyées uniquement si les champs d’adresse et de nom ne sont pas vides.

Dans cet exercice, vous remplacerez les champs HTML actuels par un composant Blazor et vous modifierez la façon dont le client passe ses commandes. Vous allez découvrir comment utiliser EditContext pour écrire des validations manuelles pour un formulaire.

Ajouter un composant EditForm Blazor

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

2. Sous le bloc <div class="main">, ajoutez un nouveau composant EditForm.

   <div class="main">
       <EditForm Model=Order.DeliveryAddress OnSubmit=CheckSubmission>
   

3. Sous l’élément </button>, fermez le composant EditForm.

           </button>
       </EditForm>
   </div>
   

4. Supprimez l’événement @onclick sur </button>.

   <button class="checkout-button btn btn-warning" disabled=@isSubmitting>
   

5. Dans le bloc @code, ajoutez le code pour gérer l’envoi de formulaire au-dessus de la méthode PlaceOrder existante.

   private async Task CheckSubmission()
   {
       isSubmitting = true;
       await PlaceOrder();
       isSubmitting = false;
   }
   

6. Supprimez la ligne de code isSubmitting = true; de la méthode PlaceOrder().

Remplacer des éléments HTML par des composants Blazor

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

2. Sélectionnez le menu Edition, puis sélectionnez Remplacer.

3. Dans le premier champ, entrez <input. Dans le champ Remplacer, entrez <InputText, puis sélectionnez Remplacer tout.

   

4. Sélectionnez le menu Edition, puis sélectionnez Remplacer.

5. Dans le premier champ, entrez @bind=. Dans le champ Remplacer, entrez @bind-Value=, puis sélectionnez Remplacer tout.

6. Supprimez le code @ref="startName" dans le champ Nom.

7. Supprimez tout le code sous la déclaration de paramètre dans le bloc @code. Voici à quoi le fichier doit maintenant ressembler.

   @code {
       [Parameter] public Address Address { get; set; }
   }
   

   FocusAsync n’est actuellement pris en charge que sur les éléments HTML.

Rechercher les champs vides avant d’envoyer un formulaire

Nous allons ajouter un message d’erreur que l’application peut afficher à un client s’il n’entre pas son nom ni son adresse.

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

2. Ajoutez un message d’erreur sous l’élément h4>Deliver to...</h4>.

   <div class="checkout-delivery-address">
     <h4>Deliver to...</h4>
     @if (isError) {
       <div class="alert alert-danger">Please enter a name and address.</div>
     }
     <AddressEditor Address="Order.DeliveryAddress" />
   </div>
   

3. Dans le bloc @code, ajoutez une déclaration pour le booléen isError.

   bool isError = false;
   

4. Améliorez la méthode CheckSubmission() pour passer une commande uniquement si les champs Nom et Code postal contiennent des données.

   private async Task CheckSubmission(EditContext editContext)
   {
       isSubmitting = true;
       var model = editContext.Model as Address;
       isError = string.IsNullOrWhiteSpace(model?.Name)
           || string.IsNullOrWhiteSpace(model?.Line1)
           || string.IsNullOrWhiteSpace(model?.PostalCode);
       if (!isError)
       {
           await PlaceOrder();
       }
       isSubmitting = false;
   }
   

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

   Essayez de commander des pizzas sans entrer d’informations. Le message d’erreur doit s’afficher.

   

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