Övning – Binda kontroller till data i Blazor-program

  • 5 minuter

Blazing Pizza-appen måste uppdatera gränssnittet när kunderna ändrar pizzor och lägger till dem i sina beställningar. Med Blazor kan du binda HTML-kontroller till C#-egenskaper så att de uppdateras när deras värden ändras.

Kunderna bör se vilka pizzor de beställer och hur storleken de väljer påverkar priset.

I den här övningen får du appen Blazing Pizza i en position där beställningar kan uppdateras och redigeras. Du ser hur du binder kontroller till egenskaperna för en pizza och räknar om priserna vid ändringar.

Visa en kunds pizzabeställning

Du ska lägga till en sidopanel som visar alla pizzor som en kund lägger till i sin beställning.

  1. Stoppa appen om den fortfarande körs.

  2. I Visual Studio Code, i utforskaren, expanderar du Sidor och väljer sedan Index.razor.

  3. Lägg till den här koden mellan blocken @if och @code:

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

    Den här HTML-koden lägger till ett sidofält på sidan. Om det finns några pizzor i OrderState.Ordervisas de. Om det inte finns några beställningar uppmanas kunderna att lägga till några.

    Det finns vissa fel eftersom komponenten inte vet vad beställningarna är.

  4. I @code-blocket under List<PizzaSpecial> specials = new();lägger du till den här koden:

    Order order => OrderState.Order;

  5. Välj F5 eller välj Kör. Välj sedan Starta felsökning.

    Skärmbild som visar sidofältet för beställning.

    Prova att beställa några pizzor och avbeställa några. Observera att de läggs till i korgen och ordersumman uppdateras.

  6. Välj Skift+F5 eller välj Stoppa felsökning.

Ta bort en pizza från en kunds beställning

Du kanske märker att det inte finns något sätt att ta bort en konfigurerad pizza från kundens varukorg. Nu ska vi lägga till den funktionen.

Det första steget är att uppdatera OrderState-tjänsten så att den kan tillhandahålla en metod för att ta bort pizzor från en beställning.

  1. I utforskaren väljer du Tjänster/OrderState.cs.

  2. Lägg till den här metoden längst ned i klassen:

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

  3. I utforskaren expanderar du Sidor och väljer sedan Index.razor.

  4. I <div class="cart-item">lägger du till en <a>-tagg innan den avslutande </div> för att skapa en borttagningsknapp:

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

    Den här taggen lägger till en X till varje pizza i ordningslisten. När du väljer den anropas RemoveConfiguredPizza metoden i OrderState tjänsten.

  5. Välj F5 eller välj Kör. Välj sedan Starta felsökning.

    Skärmbild som visar sidofältet för beställning med en beställning.

  6. Välj Skift+F5 eller välj Stoppa felsökning.

Konfigurera en pizzastorlek dynamiskt

Dialogrutan pizzakonfiguration uppdateras inte när skjutreglaget för storlek ändras. Komponenten behöver ett sätt att uppdatera pizzan och storleken och sedan beräkna om priset.

  1. I utforskaren expanderar du Delat och väljer sedan ConfigurePizzaDialog.razor.

  2. Lägg till kod för att binda värdet för input HTML-kontrollen till pizzastorleken:

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

  3. Välj F5 eller välj Kör. Välj sedan Starta felsökning.

    Använd den uppdaterade dialogrutan för att lägga till några pizzor i olika storlekar i din beställning. Välj en punkt i skjutreglaget i stället för att dra den. Observera att pizzastorleken uppdateras vid museknappsläppet på styrningen.

    Om du drar skjutreglaget ändras inte storleken förrän du släpper musen. Vi fixar det.

  4. Välj Skift+F5 eller välj Stoppa felsökning.

  5. Lägg till händelsen som kontrollen ska vara bunden till:

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

  6. Välj F5 eller välj Kör. Välj sedan Starta felsökning.

    Animerad skärmbild som visar skjutreglaget för pizzastorlek.

Hur gav tillägg av @bind="Pizza.Size"-koden så många funktioner? Om du undersöker hela ConfigurePizzaDialog.razor-koden ser du att ditt team redan har anslutit de andra elementen till pizzans egenskaper.

Till exempel uppdateras priset på grund av den här koden:

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

Priset uppdateras när pizzastorleken ändras eftersom metoden på pizzan GetFormattedTotalPrice() använder pizzastorleken för att beräkna det totala priset.

Du har gjort framsteg med Blazing Pizza-appen. Om du vill fortsätta att förbättra den slutför du nästa modul i den här utbildningsvägen.