Cvičení – vytvoření vazby ovládacích prvků k datům v aplikacích Blazor

Dokončeno

Aplikace Blazing Pizza musí aktualizovat rozhraní, když zákazníci změní pizzy a přidají je do svých objednávek. Blazor umožňuje vytvořit vazbu ovládacích prvků HTML na vlastnosti jazyka C#, které se aktualizují při změně jejich hodnot.

Zákazníci by měli vidět, jaké pizzy objednávají a jak velikost, kterou zvolí, ovlivňuje cenu.

V tomto cvičení získáte aplikaci Blazing Pizza na pozici, kde lze objednávky aktualizovat a upravovat. Zjistíte, jak svázat ovládací prvky s vlastnostmi pizzy a přepočítat ceny těchto změn.

Zobrazení objednávky pizzy zákazníka

Přidáte boční panel, který zobrazí všechny pizzy, které zákazník přidá do objednávky.

1. Pokud je aplikace pořád spuštěná, zastavte ji.

2. V editoru Visual Studio Code v průzkumníku souborů rozbalte Pages a poté vyberte Index.razor.

3. Mezi bloky @if a @code přidejte tento kód:

   <div class="sidebar">
       @if (order.Pizzas.Any())
       {
           <div class="order-contents">
               <h2>Your order</h2>
   
               @foreach (var configuredPizza in order.Pizzas)
               {
                 <div class="cart-item">
                     <div class="title">@(configuredPizza.Size)" @configuredPizza.Special.Name</div>
                     <div class="item-price">
                         @configuredPizza.GetFormattedTotalPrice()
                     </div>
                 </div>
               }
           </div>
       }
       else
       {
           <div class="empty-cart">Choose a pizza<br>to get started</div>
       }
   
       <div class="order-total @(order.Pizzas.Any() ? "" : "hidden")">
           Total:
           <span class="total-price">@order.GetFormattedTotalPrice()</span>
           <a href="checkout" class="@(OrderState.Order.Pizzas.Count == 0 ? "btn btn-warning disabled" : "btn btn-warning")">
               Order >
           </a>
       </div>
   </div>
   

   Tento kód HTML přidá boční panel na stránku. Pokud se v OrderState.Ordernacházejí nějaké pizzy, zobrazí je. Pokud nejsou žádné objednávky, zobrazí se zákazníkům výzva k přidání některých.

   Existuje několik chyb, protože komponenta neví, co jsou příkazy.

4. Do bloku @code pod List<PizzaSpecial> specials = new();přidejte tento kód:

   Order order => OrderState.Order;
   

5. Vyberte F5 nebo vyberte Spustit. Pak vyberte Spustit ladění.

   

   Zkuste objednat nějaké pizzy a některé zrušit. Všimněte si, že se přidají do košíku a celková částka objednávky se aktualizuje.

6. Vyberte Shift+F5 nebo vyberte Zastavit ladění.

Odebrání pizzy z objednávky zákazníka

Možná si všimnete, že neexistuje způsob, jak odebrat nakonfigurovanou pizzu z nákupního košíku zákazníka. Pojďme přidat tuhle funkci.

Prvním krokem je aktualizace služby OrderState tak, aby mohla poskytnout metodu odebrání pizzy z objednávky.

1. V Průzkumníku souborů vyberte Services/OrderState.cs.

2. V dolní části třídy přidejte tuto metodu:

   public void RemoveConfiguredPizza(Pizza pizza)
   {
       Order.Pizzas.Remove(pizza);
   }
   

3. Ve Průzkumníku souborů rozbalte Pages a pak vyberte Index.razor.

4. V <div class="cart-item">přidejte značku <a> před závěrečnou </div> a vytvořte tlačítko pro odebrání:

   <a @onclick="@(() => OrderState.RemoveConfiguredPizza(configuredPizza))" class="delete-item">x</a>
   

   Tato značka přidá tag X ke každé pizze na bočním panelu objednávky. Když ji vyberete, zavolá metodu RemoveConfiguredPizza ve službě OrderState .

5. Vyberte F5 nebo vyberte Spustit. Pak vyberte Spustit ladění.

   

6. Vyberte Shift+F5 nebo vyberte Zastavit ladění.

Dynamická konfigurace velikosti pizzy

Dialogové okno konfigurace pizzy se při změně posuvníku velikosti neaktualizuje. Komponenta potřebuje způsob, jak aktualizovat pizzu a velikost a pak přepočítat cenu.

1. V Průzkumníku souborů rozbalte Sdílené a pak vyberte ConfigurePizzaDialog.razor.

2. Přidejte kód pro vazbu hodnoty input ovládacího prvku HTML na velikost pizzy:

   <input type="range" min="@Pizza.MinimumSize" max="@Pizza.MaximumSize" step="1" @bind="Pizza.Size"/>
   

3. Vyberte F5 nebo vyberte Spustit. Pak vyberte Spustit ladění.

   Pomocí aktualizovaného dialogového okna přidejte do objednávky několik pizz s různou velikostí. Místo přetažení vyberte bod na posuvníku. Všimněte si, že velikost pizzy se aktualizuje při puštění tlačítka myši na ovládacím prvku.

   Pokud posuvník přetáhnete, velikost se nezmění, dokud neuvolníte myš. Pojďme to opravit.

4. Vyberte Shift+F5 nebo vyberte Zastavit ladění.

5. Přidejte událost, ke které má být ovládací prvek vázán:

   <input type="range" min="@Pizza.MinimumSize" max="@Pizza.MaximumSize" step="1" @bind="Pizza.Size" @bind:event="oninput" />
   

6. Vyberte F5 nebo vyberte Spustit. Pak vyberte Spustit ladění.

   

Jak přidání kódu @bind="Pizza.Size" poskytovalo tolik funkcí? Pokud prozkoumáte celý kód ConfigurePizzaDialog.razor , uvidíte, že váš tým už ostatní prvky připojil k vlastnostem pizzy.

Například aktualizace cen z důvodu tohoto kódu:

Price: <span class="price">@(Pizza.GetFormattedTotalPrice())</span>

Cena se aktualizuje při změně velikosti pizzy, protože metoda na pizze GetFormattedTotalPrice() používá velikost pizzy k výpočtu celkové ceny.

Provedli jste pokrok v aplikaci Blazing Pizza. Pokud ho chcete dál vylepšovat, dokončete další modul v tomto studijním programu.