Cvičení – vylepšení interaktivity aplikací s událostmi životního cyklu

Dokončeno

Společnost pizza se rozhodla, že chce prodávat speciální rodinnou pizzu, která je k dispozici pouze v jedné velikosti 24 palců. Aktuální aplikace pizzy má posuvník velikosti, který nepodporuje jednu velikost pizzy. Zobrazí se výzva, abyste přidali novou pizzu ve velikosti rodiny a zakázali možnost velikosti této pizzy.

V tomto cvičení změníte databázi pizzy tak, aby přidala pizzu ve velikosti rodiny a změnila model pizzy tak, aby podporovala novou pizzu. Pokud chcete zpracovat události životního cyklu komponent Blazor, upravíte dialogové okno pro konfiguraci pizzy tak, aby zpracovávalo případ pevné velikosti.

Vytvoření nové rodinné pizzy

Nejprve do modelu pizzy přidáte novou FixedSize funkci a v databázi pizzy vytvoříte novou pizzu ve velikosti rodiny.

1. V Průzkumníku editoru Visual Studio Code rozbalte položku Modely a vyberte PizzaSpecial.cs.

2. Do souboru PizzaSpecial.cs za ImageUrl vlastnost přidejte následující novou vlastnost:

   public int? FixedSize { get; set; }
   

3. Otevřete soubor Pizza.cs a nahraďte metodu GetBasePrice následujícím kódem:

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

   Kód nyní odpovídá speciálnímu, který má FixedSize , když vrátí BasePricehodnotu .

4. Rozbalte data a vyberte SeedData.cs.

5. Do souboru SeedData.cs přidejte následující kód pro novou pizzu velikosti rodiny na konec specials deklarace pole v InitializeAsync metodě.

   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. Třída SeedData předem naplní databázi pizzy speciálními pizzami. Pokud chcete vytvořit novou PizzaSpecial databázi, musíte existující databázi odstranit. V Průzkumníku vyberte a odstraňte soubory pizza.db, pizza.db-shm a pizza.db-wal.

7. V editoru Visual Studio Code stiskněte klávesu F5nebo vyberte Spustit spuštění>ladění.

8. V aplikaci vyberte novou pizzu Margherita Family Size .

   

9. Ve formuláři objednávky si všimněte, že stále můžete změnit velikost pizzy.

10. Stisknutím kláves Shift+F5 nebo výběrem možnosti > aplikaci zastavte.

Odebrání posuvníku velikosti

Komponenta ConfigurePizzaDialog používá element HTML range , který zákazníkovi umožní vybrat velikost pizzy. Jedním ze způsobů, jak zakázat uživatelský vstup, je podmíněně vynechat vykreslování uživatelského ovládacího prvku velikosti.

1. V Průzkumníku editoru Visual Studio Code rozbalte položku Sdílené a pak vyberte ConfigurePizzaDialog.razor.

2. Do direktivy @code za existující vlastnosti přidejte následující členy:

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

   Ve supportSizing výchozím nastavení je pole nastaveno na truehodnotu , ale pokud má pizza pevnou velikost, je pole nastaveno na falsehodnotu . OnInitialized Metoda životního cyklu přepíše velikost pizzy na pevnou velikost a zakáže podporu velikosti.

   Note

   Pokud váš kód spoléhal na interoperabilitu JavaScriptu OnInitialized , použití metody by nefungovala. Místo toho byste museli použít metodu OnAfterRenderAsync , abyste měli jistotu, že byla k dispozici interoperabilita JavaScriptu.

3. V horní části souboru v souboru <form class="dialog-body">nahraďte existující label a input řádky následujícím kódem:

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

4. Stiskněte klávesu F5 nebo vyberte Spustit>ladění.

5. Přidejte rodinnou pizzu a ověřte, že je posuvník velikosti deaktivovaný, protože se nevykreslí.

   

6. Objednejte si jinou pizzu a ověřte, že pro tuto pizzu stále můžete použít posuvník velikosti.

7. Stisknutím kláves Shift+F5 nebo výběrem možnosti > aplikaci zastavte.