Ćwiczenie — tworzenie formularza adresu przy użyciu składników platformy Blazor

Ukończone

W tej chwili aplikacja Blazing Pizza używa elementów HTML do przechwytywania danych i przycisków. Platforma Blazor ma ulepszoną obsługę formularzy, które umożliwiają korzystanie z składników, które mogą być powiązane z modelem języka C#.

Zespół chciałby zastąpić bieżące elementy HTML składnikami platformy Blazor. Zespół chce, aby przesyłał zamówienia tylko wtedy, gdy adres i nazwa nie są puste.

W tym ćwiczeniu zastąpisz bieżące pola HTML składnikiem blazor i zmienisz sposób przesyłania zamówień przez klienta. Zobaczysz, jak używać kontrolki EditContext do zapisywania ręcznych walidacji formularza.

Dodawanie składnika Blazor EditForm

1. W programie Visual Studio Code w Eksploratorze plików rozwiń węzeł Pages, a następnie wybierz pozycję Checkout.razor.

2. W bloku <div class="main"> dodaj nowy EditForm składnik.

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

3. W obszarze </button> elementu zamknij składnik EditForm.

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

4. @onclick Usuń zdarzenie w obiekcie </button>.

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

5. @code W bloku dodaj kod do obsługi przesyłania formularza powyżej istniejącej PlaceOrder metody.

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

6. isSubmitting = true; Usuń wiersz kodu z PlaceOrder() metody .

Zastępowanie elementów HTML składnikami platformy Blazor

1. W Eksploratorze plików rozwiń węzeł Udostępnione, a następnie wybierz pozycję AddressEditor.razor.

2. Wybierz menu Edytuj, a następnie wybierz pozycję Zamień.

3. W pierwszym polu wprowadź <input w polu zamień wprowadź ciąg <InputText, a następnie wybierz pozycję Zastąp wszystkie.

   

4. Wybierz menu Edytuj, a następnie wybierz pozycję Zamień.

5. W pierwszym polu wprowadź @bind= w polu zamień wprowadź ciąg @bind-Value=, a następnie wybierz pozycję Zastąp wszystkie.

6. @ref="startName" Usuń kod w polu Nazwa.

7. Usuń cały kod poniżej deklaracji Parametr w @code bloku. Blok powinien teraz wyglądać następująco.

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

   FocusAsync program jest obecnie obsługiwany tylko w przypadku elementów HTML.

Sprawdzanie pustych pól przed przesłaniem formularza

Dodajmy komunikat o błędzie, który aplikacja może wyświetlić klientowi, jeśli nie wprowadzi nazwy ani adresu.

1. W Eksploratorze plików rozwiń węzeł Pages, a następnie wybierz pozycję Checkout.razor.

2. Dodaj komunikat o błędzie w elemecie 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 W bloku dodaj deklarację dla wartości logicznejisError.

   bool isError = false;
   

4. Popraw metodę CheckSubmission() , aby złożyć zamówienie tylko wtedy, gdy pola nazwy i kodu pocztowego zawierają w nich dane.

   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. W programie Visual Studio Code naciśnij F5 lub wybierz pozycję Uruchom rozpocznij>debugowanie.

   Spróbuj zamówić pizze bez wprowadzania żadnych informacji. Powinien zostać wyświetlony komunikat o błędzie.

   

6. Naciśnij Shift + F5, aby zatrzymać działanie aplikacji.