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í, ovlivní cenu, kterou zaplatí.

V tomto cvičení získáte aplikaci Blazing Pizza v pozici, kde je možné objednávky aktualizovat a upravovat. Uvidí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řidal 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 stránky a pak vyberte Index.razor.

3. Mezi bloky @if @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 jsou nějaké pizzy v OrderState.Order, zobrazí je. Pokud nejsou žádné objednávky, zobrazí se zákazníkům výzva k přidání některých.

   Zobrazí se některé chyby, protože komponenta neví, co jsou objednávky.

4. @code Do bloku 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 pizzu a zrušit některé. Uvidíte, že se přidají do košíku a celkové aktualizace objednávky.

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

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

Možná jste si všimli, ž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 OrderState služby 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. V Průzkumníku souborů rozbalte stránky a pak vyberte Index.razor.

4. <a> Přidejte <div class="cart-item">značku před uzavřením </div> a vytvořte tlačítko pro odebrání:

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

   Tato značka přidá na každou pizzu X na bočním panelu objednávky. Když je vybraná, volá 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 položku Sdílené a pak vyberte ConfigurePizzaDialog.razor.

2. Přidejte kód do input ovládacího prvku HTML, který vytvoří vazbu jeho hodnoty 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í klikněte na posuvník. Všimněte si, že velikost pizzy se aktualizuje v události 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í @bind="Pizza.Size" kódu 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.

Pokračovat