Ćwiczenie — wiązanie kontrolek z danymi w aplikacjach platformy Blazor

5 min

Aplikacja Blazing Pizza musi zaktualizować interfejs, gdy klienci zmieniają pizze i dodają je do swoich zamówień. Platforma Blazor umożliwia powiązanie kontrolek HTML z właściwościami języka C#w celu zaktualizowania ich wartości.

Klienci powinni zobaczyć, jakie pizze zamawiają i jak wybrany rozmiar wpływa na cenę, którą zapłacą.

W tym ćwiczeniu uzyskasz aplikację Blazing Pizza w miejscu, w którym można aktualizować i edytować zamówienia. Zobaczysz, jak powiązać kontrolki z właściwościami pizzy i ponownie obliczyć ceny tych zmian.

Wyświetlanie zamówienia pizzy klienta

Dodasz pasek boczny, który będzie wyświetlał wszystkie pizze dodane przez klienta do zamówienia.

Zatrzymaj aplikację, jeśli nadal jest uruchomiona.
W programie Visual Studio Code, w Eksploratorze plików, rozwiń Pages, a następnie wybierz Index.razor.

Między blokami @if i @code dodaj następujący kod:

<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>

Ten kod HTML dodaje pasek boczny do strony. Jeśli w OrderState.Ordersą jakieś pizze, wyświetla je. Jeśli nie ma zamówień, klienci są monitowani o dodanie niektórych zamówień.

Zobaczysz pewne błędy, ponieważ składnik nie wie, jakie są zamówienia.

W bloku @code w obszarze List<PizzaSpecial> specials = new();dodaj następujący kod:
```
Order order => OrderState.Order;
```
Wybierz pozycję F5 lub wybierz pozycję Uruchom. Następnie wybierz pozycję Rozpocznij debugowanie.

Spróbuj zamówić pizze i anulować niektóre. Zobaczysz, że zostaną one dodane do koszyka i całkowita kwota zamówienia się zaktualizuje.
Wybierz Shift+F5 lub wybierz Zatrzymaj debugowanie.

Usuwanie pizzy z zamówienia klienta

Być może zauważysz, że nie ma możliwości usunięcia skonfigurowanej pizzy z koszyka zakupów klienta. Dodajmy te funkcje.

Pierwszym krokiem jest zaktualizowanie usługi OrderState w celu zapewnienia metody usuwania pizzy z zamówienia.

W Eksploratorze plików wybierz pozycję Services/OrderState.cs.

W dolnej części klasy dodaj następującą metodę:

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

W Eksploratorze plików, rozwiń Pages, a następnie wybierz Index.razor.
W <div class="cart-item">dodaj tag <a> przed zamykającym </div>, aby stworzyć przycisk do usuwania:
```
<a @onclick="@(() => OrderState.RemoveConfiguredPizza(configuredPizza))" class="delete-item">x</a>
```
Ten tag dodaje oznaczenie X do każdej pizzy w pasku bocznym zamówienia. Po wybraniu opcji wywołuje metodę RemoveConfiguredPizza w usłudze OrderState.
Wybierz pozycję F5 lub wybierz pozycję Uruchom. Następnie wybierz pozycję Rozpocznij debugowanie.
Wybierz Shift+F5 lub wybierz Zatrzymaj debugowanie.

Dynamiczne konfigurowanie rozmiaru pizzy

Okno dialogowe konfiguracji pizzy nie jest aktualizowane po zmianie suwaka rozmiaru. Komponent potrzebuje sposobu na zaktualizowanie pizzy i jej rozmiaru, a następnie przeliczenie ceny.

W Eksploratorze plików rozwiń Udostępnione, a następnie wybierz ConfigurePizzaDialog.razor.

Dodaj kod do kontrolki input HTML, aby powiązać jej wartość z rozmiarem pizzy:

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

Wybierz pozycję F5 lub wybierz pozycję Uruchom. Następnie wybierz pozycję Rozpocznij debugowanie.

Użyj zaktualizowanego okna dialogowego, aby dodać do zamówienia kilka pizz o różnych rozmiarach. Kliknij pasek suwaka zamiast przeciągać. Zwróć uwagę, że rozmiar pizzy jest aktualizowany podczas zdarzenia puszczenia przycisku myszy na elemencie sterującym.

Jeśli przeciągniesz suwak, rozmiar nie zmieni się, dopóki nie zwolnisz myszy. Naprawmy to.
Wybierz Shift+F5 lub wybierz Zatrzymaj debugowanie.

Dodaj zdarzenie, do którego powinna być powiązana kontrolka:

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

Wybierz pozycję F5 lub wybierz pozycję Uruchom. Następnie wybierz pozycję Rozpocznij debugowanie.

Jak dodanie kodu @bind="Pizza.Size" zapewniało tyle funkcji? Jeśli zbadasz cały kod ConfigurePizzaDialog.razor, zobaczysz, że twój zespół połączył już inne elementy z właściwościami pizzy.

Na przykład cena zostanie zaktualizowana z powodu tego kodu:

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

Cena jest aktualizowana w miarę zmiany rozmiaru pizzy, ponieważ metoda w pizzy GetFormattedTotalPrice() wykorzystuje jego rozmiar do obliczenia całkowitej ceny.

Poczyniliśmy postępy w aplikacji Blazing Pizza. Jeśli chcesz kontynuować jego ulepszanie, ukończ następny moduł w tej ścieżce szkoleniowej.

Ćwiczenie — wiązanie kontrolek z danymi w aplikacjach platformy Blazor

Wyświetlanie zamówienia pizzy klienta

Usuwanie pizzy z zamówienia klienta

Dynamiczne konfigurowanie rozmiaru pizzy

Opinia