Cvičení – vytvoření formuláře adresy s komponentami Blazor

Dokončeno

V tuto chvíli aplikace Blazing Pizza používá prvky HTML pro tlačítka a zachytávání dat. Architektura Blazor vylepšuje podporu formulářů a umožňuje jim používat komponenty, které lze svázat s modelem jazyka C#.

Tým by chtěl nahradit aktuální prvky HTML komponentami Blazor. Tým by vám chtěl odeslat objednávky jenom v případě, že adresa a jméno nejsou prázdné.

V tomto cvičení nahradíte aktuální pole HTML komponentou Blazor a změníte způsob odesílání objednávek zákazníkům. Pak uvidíte, jak pomocí editContext psát ruční ověření formuláře.

Přidání komponenty Blazor EditForm

1. V editoru Visual Studio Code v Průzkumníku souborů rozbalte stránky a pak vyberte Checkout.razor.

2. <div class="main"> Pod blok přidejte novou EditForm komponentu.

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

3. Pod elementem </button> zavřete komponentu EditForm.

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

4. @onclick Odeberte událost na kartě </button>.

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

5. @code Do bloku přidejte kód pro zpracování odeslání formuláře nad existující PlaceOrder metodu.

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

6. isSubmitting = true; Odstraňte řádek kódu z PlaceOrder() metody.

Nahrazení elementů HTML komponentami Blazor

1. V Průzkumníku souborů rozbalte položku Sdílené a pak vyberte AddressEditor.razor.

2. Vyberte nabídku Upravit a pak vyberte Nahradit.

3. Do pole Najít zadejte <input, do pole Nahradit zadejte <InputTexta pak vyberte Nahradit vše.

   

4. Vyberte nabídku Upravit a pak vyberte Nahradit.

5. Do pole Najít zadejte do pole @bind=@bind-Value= a pak vyberte Nahradit vše.

6. @ref="startName" Odeberte kód v poli Název.

7. Odeberte veškerý kód pod deklarací parametru @code v bloku. Blok by teď měl vypadat takto.

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

   FocusAsync je v současné době podporován pouze u elementů HTML.

Kontrola prázdných polí před odesláním formuláře

Pojďme přidat chybovou zprávu, kterou může aplikace zobrazit zákazníkovi, pokud nezadá svoje jméno nebo adresu.

1. V Průzkumníku souborů rozbalte stránky a pak vyberte Checkout.razor.

2. Přidejte pod prvek chybovou h4>Deliver to...</h4> zprávu.

   <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 Do bloku přidejte deklaraci logické hodnotyisError.

   bool isError = false;
   

4. Vylepšete metodu CheckSubmission() tak, aby se objednávka umístila pouze v případě, že pole psč obsahují data.

   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. V editoru Visual Studio Code stiskněte F5 nebo vyberte Spustit>ladění.

   Zkuste si objednat pizzu, aniž byste museli zadávat žádné informace. Měla by se zobrazit chybová zpráva.

   

6. Stisknutím kláves Shift + F5 zastavte spuštění aplikace.