Ćwiczenie — tworzenie programu obsługi zdarzeń platformy Blazor dla zdarzeń onclick

Platforma Blazor umożliwia łączenie kodu C# ze zdarzeniami DOM HTML. W tym ćwiczeniu użyjesz tej możliwości, aby ulepszyć istniejącą aplikację.

Jako członek zespołu deweloperów pracującego nad ulepszeniem aplikacji Blazing Pizza, poproszono Cię o zakończenie procesu realizacji zamówienia, aby zebrać adresy klientów. Chcesz dodać niektóre pola tekstowe i poprawić proces realizacji zamówienia.

W tym ćwiczeniu sklonujesz istniejącą aplikację i utworzysz nowy komponent adresu w celu zbierania szczegółów adresu. Gdy pola są już umieszczone, ustaw fokus na pierwsze pole w formularzu.

Klonowanie istniejącej aplikacji zespołu

W tym module jest używany zestaw .NET 9.0 SDK. Upewnij się, że masz zainstalowany program .NET 9.0, uruchamiając następujące polecenie w preferowanym terminalu poleceń:

dotnet --list-sdks

Zostanie wyświetlone dane wyjściowe podobne do następującego przykładu:

8.0.100 [C:\Program Files\dotnet\sdk]
9.0.100 [C:\Program Files\dotnet\sdk]

Upewnij się, że na liście znajduje się wersja rozpoczynająca się od 9 . Jeśli nic nie jest wymienione lub polecenie nie zostanie odnalezione, zainstaluj najnowszy zestaw SDK platformy .NET 9.0.

Jeśli tworzysz pierwszą aplikację Blazor, postępuj zgodnie z instrukcjami konfiguracji platformy Blazor , aby zainstalować poprawną wersję platformy .NET i sprawdź, czy maszyna jest poprawnie skonfigurowana. Zatrzymaj się w kroku Tworzenie aplikacji .

1. Otwórz program Visual Studio Code.

2. Otwórz zintegrowany terminal z programu Visual Studio Code, wybierając pozycję Widok, a następnie wybierz pozycję Terminal z menu głównego.

3. W terminalu przejdź do lokalizacji, w której chcesz utworzyć projekt.

4. Sklonuj aplikację z usługi GitHub.

   git clone https://github.com/MicrosoftDocs/mslearn-use-forms-in-blazor-web-apps.git BlazingPizza
   

5. Wybierz pozycję Plik, a następnie wybierz pozycję Otwórz folder....

6. W oknie dialogowym Otwieranie przejdź do folderu BlazingPizza i wybierz opcję Wybierz folder.

   Program Visual Studio Code może ostrzec o nierozwiązanych zależnościach. Wybierz przycisk Przywróć.

7. Uruchom aplikację, aby sprawdzić, czy wszystko działa poprawnie.

8. W programie Visual Studio Code naciśnij F5 lub wybierz pozycję Uruchom rozpocznij>debugowanie.

   

   Spróbuj skonfigurować pizze i dodać je do zamówienia. Wybierz Zamówienie > na dole strony. Powinna zostać wyświetlona bieżąca strona kasy.

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

Refaktoryzacja strony wyewidencjonowania

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

   W tej chwili na stronie zamówienia wyświetla się lista skonfigurowanych pizz. Zostanie wyświetlona prośba o refaktoryzację strony w celu uwzględnienia sekcji adresu.

2. Zastąp istniejący <div class="main"> blok HTML, aby mieć dwie kolumny dla danych.

   <div class="main">
       <div class="checkout-cols">
           <div class="checkout-order-details">
               <h4>Review order</h4>
               <OrderReview Order="Order" />
           </div>
   
           <div class="checkout-delivery-address">
               <h4>Deliver to...</h4>
               <AddressEditor Address="Order.DeliveryAddress" />
           </div>
       </div>
   
       <button class="checkout-button btn btn-warning" @onclick="PlaceOrder" disabled=@isSubmitting>
           Place order
       </button>
   </div>
   

   Powyższy kod łączy zdarzenie HTML onclick elementu PlaceOrder przycisku z metodą Blazor w @code bloku.

   Refaktoryzacja odnosi się do dwóch nowych kontrolek Blazor OrderReview i AddressEditor. Przenieś stary kod kasy, który wymienił pizze, do komponentu OrderReview.

3. W Eksploratorze plików kliknij prawym przyciskiem myszy pozycję Udostępnione, a następnie wybierz pozycję Nowy plik.

4. Wprowadź ciąg OrderReview.razor jako nazwę pliku.

5. Dodaj pętlę foreach , aby wyświetlić pizze w zamówieniu.

   @foreach (var pizza in Order.Pizzas)
   {
       <p>
           <strong>
               @(pizza.Size)"
               @pizza.Special.Name
               (£@pizza.GetFormattedTotalPrice())
           </strong>
       </p>
   }
   
   <p>
       <strong>
           Total price:
           £@Order.GetFormattedTotalPrice()
       </strong>
   </p>
   
   @code {
       [Parameter] public Order Order { get; set; }
   }
   

6. W Eksploratorze plików kliknij prawym przyciskiem myszy pozycję Udostępnione, a następnie wybierz pozycję Nowy plik.

7. Wprowadź addressEditor.razor jako nazwę pliku.

8. Dodaj kod, który używa input elementu dla każdego pola w adresie. Klasa Address w folderze Model zawiera wszystkie pola.

   <div class="form-field">
       <label>Name:</label>
       <div>
           <input @bind="Address.Name" />
       </div>
   </div>
   
   <div class="form-field">
       <label>Line 1:</label>
       <div>
           <input @bind="Address.Line1" />
       </div>
   </div>
   
   <div class="form-field">
       <label>Line 2:</label>
       <div>
           <input @bind="Address.Line2" />
       </div>
   </div>
   
   <div class="form-field">
       <label>City:</label>
       <div>
           <input @bind="Address.City" />
       </div>
   </div>
   
   <div class="form-field">
       <label>Region:</label>
       <div>
           <input @bind="Address.Region" />
       </div>
   </div>
   
   <div class="form-field">
       <label>Postal code:</label>
       <div>
           <input @bind="Address.PostalCode" />
       </div>
   </div>
   
   @code {
       [Parameter] public Address Address { get; set; }
   }
   

Testowanie nowej strony wyewidencjonowania

1. W programie Visual Studio Code naciśnij F5 lub wybierz pozycję Uruchom rozpocznij>debugowanie.

   

   Dodaj pizze i wybierz pozycję Zamów > , aby wyświetlić nowy przepływ wyewidencjonowania.

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

Zwiększanie użyteczności formularza

Gdy klient zostanie przewieziony na stronę wyewidencjonowania, pierwszą rzeczą, jaką robi, jest wprowadzenie ich nazwy. Platforma Blazor umożliwia ustawienie fokusu na elementach HTML na stronie. Ulepszymy naszą aplikację, dodając to zachowanie.

1. W pliku AddressEditor.razor zmień kod HTML elementu input name, aby dodać @ref="startName".

   <input @ref="startName" @bind="Address.Name" />
   

   Dyrektywa @ref="startName" Blazor umożliwia blokowi kodu utworzenie elementu ElementReference w celu odwołania się do elementu wejściowego. Następnie możesz użyć tego odwołania do elementu w celu wywołania FocusAsync po tym, jak strona zostanie wyrenderowana.

2. Dodaj kod do wywołania FocusAsync po załadowaniu strony w ramach deklaracji [Parameter] public Address Address { get; set; } .

   private ElementReference startName;
   
   protected override async Task OnAfterRenderAsync(bool firstRender)
   {
       if (firstRender) {
           await startName.FocusAsync();
       }
   }    
   

   Ten kod tworzy element ElementReference, a następnie po zrenderowaniu strony ustawia fokus na pole Name.

3. W programie Visual Studio Code naciśnij F5 lub wybierz pozycję Uruchom rozpocznij>debugowanie.

   

   Dodaj pizze i wybierz pozycję Zamów>, aby zobaczyć, że na stronie finalizacji zakupu pole formularza Nazwa ma fokus.

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