Übung – Binden von Steuerelementen an Daten in Blazor-Anwendungen

  • 5 Minuten

Die Blazing Pizza-App muss die Benutzeroberfläche aktualisieren, wenn Kunden Pizzas ändern und zu ihren Bestellungen hinzufügen. Blazor ermöglicht Es Ihnen, HTML-Steuerelemente an C#-Eigenschaften zu binden, um zu aktualisieren, wenn sich ihre Werte ändern.

Kunden sollten sehen, welche Pizzas sie bestellen und wie sich die von ihnen gewählte Größe auf den Preis auswirkt, den sie bezahlen werden.

In dieser Übung erhalten Sie die Blazing Pizza-App an einer Position, an der Bestellungen aktualisiert und bearbeitet werden können. Sie sehen, wie Sie Steuerelemente an die Eigenschaften einer Pizza binden und die Preise für diese Änderungen neu berechnen.

Anzeigen der Pizzabestellung eines Kunden

Sie fügen eine Randleiste hinzu, die alle Pizza anzeigt, die ein Kunde zu seiner Bestellung hinzugefügt hat.

  1. Beenden Sie die App, wenn sie noch ausgeführt wird.

  2. Erweitern Sie in Visual Studio Code im Datei-Explorer Pages, und wählen Sie dann index.razor aus.

  3. Fügen Sie zwischen den @if@code Blöcken den folgenden Code hinzu:

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

    Dieser HTML-Code fügt der Seite eine Randleiste hinzu. Wenn es Pizzen in OrderState.Order gibt, werden sie angezeigt. Wenn keine Bestellungen vorhanden sind, werden Kunden aufgefordert, einige hinzuzufügen.

    Ihnen werden einige Fehler angezeigt, da die Komponente nicht weiß, um welche Bestellungen es sich handelt.

  4. Fügen Sie im @code Block unter List<PizzaSpecial> specials = new(); diesen Code hinzu:

    Order order => OrderState.Order;

  5. Wählen Sie F5 aus, oder wählen Sie "Ausführen" aus. Wählen Sie dann "Debuggen starten" aus.

    Screenshot der Bestellseitenleiste.

    Versuchen Sie, einige Pizzas zu bestellen und einige zu stornieren. Sie werden sehen, dass sie dem Einkaufswagen hinzugefügt werden und sich der Gesamtbetrag der Bestellung aktualisiert.

  6. Wählen Sie Umschalt+F5 oder Debuggen beenden aus.

Entfernen einer Pizza aus der Bestellung eines Kunden

Möglicherweise haben Sie bemerkt, dass es keine Möglichkeit gibt, eine konfigurierte Pizza aus dem Einkaufskorb des Kunden zu entfernen. Fügen wir diese Funktionalität hinzu.

Der erste Schritt besteht darin, den OrderState Dienst so zu aktualisieren, dass er eine Methode zum Entfernen von Pizza aus einer Bestellung bereitstellen kann.

  1. Wählen Sie im Datei-Explorer "Dienste/OrderState.cs" aus.

  2. Fügen Sie unten in der Klasse diese Methode hinzu:

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

  3. Erweitern Sie im Datei-Explorer Seiten , und wählen Sie dann "Index.razor" aus.

  4. In <div class="cart-item"> fügen Sie ein <a>-Tag vor dem schließenden </div> hinzu, um eine Entfernen-Schaltfläche zu erstellen.

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

    Dieses Tag fügt jeder Pizza in der Randleiste der Bestellung ein X hinzu. Wenn sie ausgewählt ist, ruft sie die RemoveConfiguredPizza Methode im OrderState Dienst auf.

  5. Wählen Sie F5 aus, oder wählen Sie "Ausführen" aus. Wählen Sie dann "Debuggen starten" aus.

    Screenshot der Sortier-Randleiste mit einer Bestellung.

  6. Drücken Sie UMSCHALTTASTE+F5, oder wählen Sie Debuggen beenden aus.

Dynamisches Konfigurieren einer Pizzagröße

Das Dialogfeld "Pizzakonfiguration" wird nicht aktualisiert, wenn der Größenschieberegler geändert wird. Die Komponente benötigt eine Möglichkeit, die Pizza und die Größe zu aktualisieren und dann den Preis neu zu berechnen.

  1. Erweitern Sie im Datei-Explorer Freigegeben und wählen Sie dann ConfigurePizzaDialog.razor aus.

  2. Fügen Sie dem input HTML-Steuerelement Code hinzu, um den Wert an die Pizzagröße zu binden:

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

  3. Wählen Sie F5 aus, oder wählen Sie "Ausführen" aus. Wählen Sie dann "Debuggen starten" aus.

    Verwenden Sie das aktualisierte Dialogfeld, um Ihrer Bestellung einige verschiedene Pizzas hinzuzufügen. Klicken Sie auf die Schiebereglerleiste, anstatt sie zu ziehen. Beachten Sie, dass die Pizzagröße durch das beim Loslassen der Maustaste ausgelöste Ereignis im Steuerelement aktualisiert wird.

    Wenn Sie den Schieberegler ziehen, wird die Größe erst geändert, wenn Sie die Maustaste los lassen. Lassen Sie uns dieses Problem beheben.

  4. Wählen Sie Umschalt+F5 aus, oder wählen Sie Debuggen beenden.

  5. Fügen Sie das Ereignis hinzu, an das das Steuerelement gebunden werden soll:

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

  6. Wählen Sie F5 aus, oder wählen Sie "Ausführen" aus. Wählen Sie dann "Debuggen starten" aus.

    Animierter Screenshot mit dem Schieberegler für Pizzagröße.

Wie hat das Hinzufügen des @bind="Pizza.Size" Codes so viele Funktionen bereitgestellt? Wenn Sie den gesamten ConfigurePizzaDialog.razor-Code untersuchen, sehen Sie, dass Ihr Team die anderen Elemente bereits mit den Eigenschaften der Pizza verbunden hatte.

Beispiel: Die Preisaktualisierungen aufgrund dieses Codes:

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

Der Preis wird aktualisiert, da sich die Pizzagröße ändert, da die Methode auf der Pizza GetFormattedTotalPrice() die Pizzagröße verwendet, um den Gesamtpreis zu berechnen.

Sie haben in der Blazing Pizza-App Fortschritte erzielt. Wenn Sie es weiterhin verbessern möchten, füllen Sie das nächste Modul in diesem Lernpfad aus.