Ćwiczenie — ulepszanie interakcyjności aplikacji za pomocą zdarzeń cyklu życia

Firma pizzy zdecydowała, że chciałaby sprzedawać specjalną pizzę rodzinną, dostępną tylko w rozmiarze 24 cali. Bieżąca aplikacja do pizzy ma suwak rozmiaru, który nie obsługuje pizzy o jednym rozmiarze. Poproszono Cię o dodanie nowej pizzy o rozmiarze rodzinnym i wyłączenie opcji rozmiaru dla tej pizzy.

W tym ćwiczeniu zmienisz bazę danych pizzy, aby dodać pizzę o rozmiarze rodziny i zmienić model pizzy, aby obsługiwać nową pizzę. Aby obsłużyć zdarzenia cyklu życia składników Blazor, należy wprowadzić zmiany w oknie dialogowym podczas konfigurowania pizzy, tak aby obsługiwało przypadek o stałym rozmiarze.

Tworzenie nowej pizzy o rozmiarze rodziny

Najpierw dodasz nową FixedSize możliwość do modelu pizzy i utworzysz nową pizzę o rozmiarze rodzinnym w bazie danych pizzy.

1. W Eksploratorze programu Visual Studio Code rozwiń pozycję Modele i wybierz pozycję PizzaSpecial.cs.

2. W pliku PizzaSpecial.cs po ImageUrl właściwości dodaj następującą nową właściwość:

   public int? FixedSize { get; set; }
   

3. Otwórz plik Pizza.cs i zastąp metodę GetBasePrice następującym kodem:

   public decimal GetBasePrice() =>
       Special is { FixedSize: not null }
           ? Special.BasePrice
           : (decimal)Size / DefaultSize * Special?.BasePrice ?? 1;
   

   Kod jest teraz kontem specjalnym, który ma FixedSize wartość , gdy zwraca wartość BasePrice.

4. Rozwiń węzeł Dane i wybierz pozycję SeedData.cs.

5. W pliku SeedData.cs dodaj następujący kod dla nowej pizzy o rozmiarze rodziny na końcu specials deklaracji tablicy w metodzie InitializeAsync .

   new()
   {
       Id = 9,
       Name = "Margherita Family Size",
       Description = "24\" of pure tomatoes and basil",
       BasePrice = 14.99m,
       ImageUrl = "img/pizzas/margherita.jpg",
       FixedSize = 24
   }
   

6. Klasa SeedData wstępnie wypełnia bazę danych pizzy specjalnymi pizzami. Aby utworzyć nową PizzaSpecial bazę danych, musisz usunąć istniejącą bazę danych. W Eksploratorze wybierz i usuń pliki pizza.db, pizza.db-shm i pizza.db-wal .

7. W programie Visual Studio Code naciśnij F5lub wybierz pozycję Uruchom rozpocznij>debugowanie.

8. W aplikacji wybierz nową pizzę Rita Family Size .

   

9. W formularzu zamówienia zwróć uwagę, że nadal można zmienić rozmiar pizzy.

10. Naciśnij Shift+F5 lub wybierz pozycję >, aby zatrzymać aplikację.

Usuń suwak rozmiaru

Składnik ConfigurePizzaDialog używa elementu HTML range , aby umożliwić klientowi wybranie rozmiaru pizzy. Jednym ze sposobów wyłączenia danych wejściowych użytkownika jest warunkowe pominięcie renderowania kontrolki użytkownika rozmiaru.

1. W Eksploratorze programu Visual Studio Code rozwiń węzeł Udostępnione, a następnie wybierz pozycję KonfigurujPizzaDialog.razor.

2. @code W dyrektywie po istniejących właściwościach dodaj następujące elementy członkowskie:

   bool supportSizing = true;
   
   protected override void OnInitialized()
   {
       if (Pizza is { Special.FixedSize: not null })
       {
           Pizza.Size = Pizza.Special.FixedSize.Value;
           supportSizing = false;
       }
   }
   

   Pole supportSizing domyślnie ma truewartość , ale jeśli pizza ma stały rozmiar, pole jest ustawione na falsewartość . Metoda OnInitialized cyklu życia zastępuje rozmiar pizzy na stały rozmiar i wyłącza obsługę rozmiaru.

   Note

   Jeśli kod polegał na międzyoperacji języka JavaScript, użycie OnInitialized metody nie zadziałałoby. Zamiast tego należy użyć OnAfterRenderAsync metody , aby upewnić się, że interop języka JavaScript był dostępny.

3. W górnej <form class="dialog-body">części pliku w pliku zastąp istniejące wiersze label i input następującym kodem:

   @if (supportSizing)
   {
       <label>Size:</label>
       <input type="range" min="@Pizza.MinimumSize" max="@Pizza.MaximumSize"
           step="1" @bind="Pizza.Size" @bind:event="oninput" />
   }
   

4. Naciśnij F5 lub wybierz pozycję Uruchom uruchom>debugowanie.

5. Dodaj pizzę rodzinną i sprawdź, czy suwak rozmiaru jest wyłączony, ponieważ się nie wyświetla.

   

6. Zamów inną pizzę i sprawdź, czy nadal możesz użyć suwaka rozmiaru dla tej pizzy.

7. Naciśnij Shift+F5 lub wybierz pozycję >, aby zatrzymać aplikację.