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 zpracovávat události životního cyklu komponent Blazor, provedete změny v dialogovém okně konfigurace pizzy pro zpracování případu s pevnou velikostí.

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 Spustit>zastavit ladění 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.

   Poznámka:

   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 pizzu ve velikosti rodiny a ověřte, že je posuvník velikosti zakázaný, protože se nevykresluje.

   

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 Spustit>zastavit ladění aplikaci zastavte.