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

W tej chwili aplikacja Blazing Pizza używa elementów HTML dla przycisków i przechwytywania danych. Platforma Blazor zwiększa obsługę formularzy, umożliwiając im używanie 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 klientów. Następnie zobaczysz, jak użyć kontrolki EditContext do zapisywania ręcznych walidacji formularza.

Dodawanie składnika Blazor EditForm

1. W programie Visual Studio Code w Eksploratorze plików rozwiń Pages, a następnie wybierz 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ń Udostępnione, a następnie wybierz AddressEditor.razor.

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

3. W polu Znajdź wprowadź ciąg <input, w polu Zamień wprowadź ciąg <InputText, a następnie wybierz pozycję Zamień wszystko.

   

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

5. W polu Znajdź w polu @bind=Zamień wprowadź ciąg @bind-Value=, a następnie wybierz pozycję Zamień wszystko.

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ń folder Pages, a następnie wybierz plik 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.