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

5 Minuten

Die Blazing Pizza-App muss die Benutzeroberfläche aktualisieren, wenn Kunden Pizzas abändern und zu ihren Bestellungen hinzufügen. Mit Blazor können Sie HTML-Steuerelemente an C#-Eigenschaften binden, um sie zu aktualisieren, sobald sich ihre Werte ändern.

Kunden sollten sehen, welche Pizzen sie bestellen und wie sich die gewählte Größe auf den zu zahlenden Preis auswirkt.

In dieser Übung werden Sie die Blazing Pizza-App so erweitern, dass Bestellungen aktualisiert und bearbeitet werden können. Sie lernen hier, 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, auf der alle Pizzas angezeigt werden, die ein Kunde seiner Bestellung hinzugefügt hat.

Halten Sie die App an, falls diese noch ausgeführt wird.
Erweitern Sie in Visual Studio Code im Datei-Explorer Pages, und wählen Sie dann index.razor aus.

Fügen Sie zwischen den Blöcken @if und @code diesen 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 in OrderState.Order Pizzen vorhanden sind, werden diese angezeigt. Sind keine Bestellungen vorhanden, werden die Kunden aufgefordert, Bestellungen hinzuzufügen.

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

Fügen Sie im Block @code unter List<PizzaSpecial> specials = new(); diesen Code hinzu:
```
Order order => OrderState.Order;
```
Wählen Sie F5 oder Ausführen aus. Wählen Sie dann Debuggen starten aus.

Versuchen Sie, einige Pizzas zu bestellen und einige zu stornieren. Sie sehen, dass sie dem Warenkorb hinzugefügt werden und die Gesamtsumme der Bestellung aktualisiert wird.
Drücken Sie UMSCHALTTASTE+F5, oder wählen Sie 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 Warenkorb des Kunden zu entfernen. Sie fügen nun diese Funktionalität hinzu.

Im ersten Schritt wird der OrderState-Dienst aktualisiert, damit er eine Methode zum Entfernen von Pizzas aus einer Bestellung bereitstellen kann.

Wählen Sie im Datei-Explorer Services/OrderState.cs aus.

Fügen Sie am Ende der Klasse die folgende Methode hinzu:

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

Erweitern Sie im Datei-Explorer den Ordner Pages, und wählen Sie dann Index.razor aus.
Fügen Sie in <div class="cart-item"> ein <a>-Tag vor dem schließenden </div> ein, um die Schaltfläche „Entfernen“ 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 wird, ruft sie die RemoveConfiguredPizza-Methode im Dienst auf OrderState.
Wählen Sie F5 oder Ausführen aus. Wählen Sie dann Debuggen starten aus.
Drücken Sie UMSCHALTTASTE+F5, oder wählen Sie Debuggen beenden aus.

Dynamisches Konfigurieren der Pizzagröße

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

Erweitern Sie im Datei-Explorer Shared, und wählen Sie dann ConfigurePizzaDialog.razor aus.

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

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

Wählen Sie F5 oder Ausführen aus. Wählen Sie dann Debuggen starten aus.

Verwenden Sie das aktualisierte Dialogfeld, um Ihrer Bestellung Pizzas mit unterschiedlicher Größe hinzuzufügen. Klicken Sie auf den Schieberegler, anstatt ihn 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. Das ändern wir gleich.
Drücken Sie UMSCHALTTASTE+F5, oder wählen Sie Debuggen beenden aus.

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

Wählen Sie F5 oder Ausführen aus. Wählen Sie dann Debuggen starten aus.

Wie konnte durch das Hinzufügen des @bind="Pizza.Size"-Codes so viel Funktionalität erzielt werden? Wenn Sie den gesamten Code von ConfigurePizzaDialog.razor untersuchen, stellen Sie fest, dass Ihr Team die anderen Elemente bereits mit den Eigenschaften der Pizza verbunden hat.

Beispielsweise wird der Preis aufgrund des folgenden Codes aktualisiert:

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

Der Preis wird aktualisiert, wenn sich die Pizzagröße ändert, da die Methode für die Pizza GetFormattedTotalPrice() die Pizzagröße zur Berechnung des Gesamtpreises verwendet.

Sie haben Fortschritte bei der Blazing Pizza-App gemacht. Wenn Sie die App weiter verbessern möchten, fahren Sie mit dem nächsten Modul in diesem Lernpfad fort.

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

Anzeigen der Pizzabestellung eines Kunden

Entfernen einer Pizza aus der Bestellung eines Kunden

Dynamisches Konfigurieren der Pizzagröße

Feedback