Övning – Förbättra appinteraktivitet med livscykelhändelser

Slutförd

Pizzaföretaget bestämde sig för att de skulle vilja sälja en speciell pizza i familjestorlek som bara är tillgänglig i en 24-tums storlek. Den aktuella pizzaappen har ett storleksreglage som inte stöder en pizza i en enda storlek. Du uppmanas att lägga till den nya pizzan i familjestorlek och inaktivera storleksalternativet för pizzan.

I den här övningen ändrar du pizzadatabasen för att lägga till pizza i familjestorlek och ändra pizzamodellen för att stödja den nya pizzan. Om du vill hantera Blazor-komponentens livscykelhändelser gör du ändringar i dialogrutan för att konfigurera pizzan så att den hanterar fallet med fast storlek.

Skapa den nya pizzan i familjestorlek

Först lägger du till den nya FixedSize funktionen i pizzamodellen och skapar den nya pizzan i familjestorlek i pizzadatabasen.

1. I Visual Studio Code Explorer expanderar du Modeller och väljer PizzaSpecial.cs.

2. I filen PizzaSpecial.cs lägger du till följande nya egenskap efter ImageUrl egenskapen:

   public int? FixedSize { get; set; }
   

3. Öppna filen Pizza.cs och ersätt GetBasePrice metoden med följande kod:

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

   Koden står nu för en special som har en FixedSize när den BasePricereturnerar .

4. Expandera Data och välj SeedData.cs.

5. I filen SeedData.cs lägger du till följande kod för den nya familjestorlekspizzan i slutet av matrisdeklarationen specialsInitializeAsync i -metoden.

   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. Klassen SeedData fyller pizzadatabasen i förväg med speciella pizzor. För att den nya PizzaSpecial ska skapas måste du ta bort den befintliga databasen. I Utforskaren väljer du och tar bort filerna pizza.db, pizza.db-shm och pizza.db-wal.

7. Tryck på F5

8. I appen väljer du den nya Margherita Family Size-pizzan .

   

9. Observera att du fortfarande kan ändra pizzastorleken i beställningsformuläret.

10. Tryck på Skift+F5 eller välj > för att stoppa appen.

Ta bort skjutreglaget för storlek

Komponenten ConfigurePizzaDialog använder ett HTML-element range för att kunden ska kunna välja pizzastorlek. Ett sätt att inaktivera användarindata är att villkorligt utelämna återgivningen av storleksanvändarkontrollen helt och hållet.

1. I Visual Studio Code Explorer expanderar du Delat och väljer sedan ConfigurePizzaDialog.razor.

2. @code Lägg till följande medlemmar efter de befintliga egenskaperna i direktivet:

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

   Fältet supportSizing är truesom standard , men om pizzan har en fast storlek är fältet inställt på false. Åsidosättningen OnInitialized av livscykelmetoden anger pizzastorleken till den fasta storleken och inaktiverar storleksstöd.

   Note

   Om koden förlitade sig på JavaScript-interop skulle det inte fungera att använda OnInitialized metoden. I stället skulle du behöva använda OnAfterRenderAsync metoden för att säkerställa att JavaScript-interopet var tillgängligt.

3. Överst i filen i <form class="dialog-body">ersätter du de befintliga label raderna och input raderna med följande kod:

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

4. Tryck på F5 eller välj Kör>starta felsökning.

5. Lägg till familjestorlekspizzan och kontrollera att skjutreglaget för storlek är inaktiverat eftersom det inte visas.

   

6. Beställ en annan pizza och kontrollera att du fortfarande kan använda storleksreglaget för pizzan.

7. Tryck på Skift+F5 eller välj > för att stoppa appen.