Övning – Skapa ett adressformulär med Blazor-komponenter

Slutförd

För närvarande använder Blazing Pizza-appen HTML-element för knappar och för att samla in data. Blazor-ramverket förbättrar stödet för formulär, så att de kan använda komponenter som kan bindas till en C#-modell.

Teamet vill att du ersätter de aktuella HTML-elementen med Blazor-komponenter. Teamet vill att du bara skickar beställningar om adressen och namnet inte är tomma.

I den här övningen ersätter du de aktuella HTML-fälten med en Blazor-komponent och ändrar hur kunder skickar beställningar. Sedan kan du se hur du använder EditContext för att skriva manuella valideringar för ett formulär.

Lägga till en Blazor EditForm-komponent

1. I Utforskaren i Visual Studio Code expanderar du Sidor, och sedan väljer du Checkout.razor.

2. Under blocket <div class="main"> lägger du till en ny EditForm komponent.

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

3. Under elementet </button> stänger du EditForm-komponenten.

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

4. @onclick Ta bort händelsen på </button>.

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

5. I blocket @code lägger du till koden för att hantera formuläröverföringen ovanför den befintliga PlaceOrder metoden.

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

6. Ta bort kodraden isSubmitting = true;PlaceOrder() från metoden.

Ersätt HTML-element med Blazor-komponenter

1. I utforskaren expanderar du Delat och väljer sedan AddressEditor.razor.

2. Välj menyn Redigera och välj sedan Ersätt.

3. I fältet Sök anger du <inputi fältet <InputText och väljer sedan Ersätt alla.

   

4. Välj menyn Redigera och välj sedan Ersätt.

5. I fältet @bind= i fältet Ersätt anger du @bind-Value=och väljer sedan Ersätt alla.

6. @ref="startName" Ta bort koden i fältet Namn.

7. Ta bort all kod under parameterdeklarationen @code i blocket. Blocket bör nu se ut så här.

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

   FocusAsync stöds för närvarande endast på HTML-element.

Sök efter tomma fält innan du skickar ett formulär

Nu ska vi lägga till ett felmeddelande som appen kan visa en kund om de inte anger sitt namn eller sin adress.

1. I utforskaren expanderar du Sidor och väljer sedan Checkout.razor.

2. Lägg till ett felmeddelande under elementet 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. @code Lägg till en deklaration för det isError booleska i blocket.

   bool isError = false;
   

4. CheckSubmission() Förbättra metoden så att den bara placerar en order om namn- och postnummerfälten har data i sig.

   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. Tryck på F5 i Visual Studio Code eller välj Kör>starta felsökning.

   Försök att beställa några pizzor utan att ange någon information. Du bör se felmeddelandet.

   

6. Tryck på Skift + F5 för att stoppa appen från att köras.