Übung – Freigeben von Daten in Blazor-Anwendungen

6 Minuten

Da Ihre App nun mit einer Datenbank verbunden ist, ist es an der Zeit, kunden die Möglichkeit hinzuzufügen, eine Pizza zu konfigurieren und zu bestellen.

Blazing Pizza will, dass Sie die Möglichkeit für Kunden schaffen, die Größe ihrer speziellen Pizza zu ändern. Sie müssen die Bestellung speichern, und Sie sollten den Anwendungsstatus in einem Containerdienst speichern.

In dieser Übung übergeben Sie Daten an eine neue Auftragskonfigurationskomponente und erfahren, wie Sie den Zustand der App in einem bereichsbezogenen OrderState-Dienst speichern.

Dialogfeld für das Hinzufügen einer neuen Auftragskonfiguration hinzufügen

Beenden Sie die App, wenn sie noch ausgeführt wird.
Klicken Sie in Visual Studio Code mit der rechten Maustaste auf den Ordner "Freigegeben ", und wählen Sie "Neue Datei" aus.
Geben Sie ConfigurePizzaDialog.razor als Dateinamen ein.

Geben Sie diesen Code für die Benutzeroberfläche der neuen Sortierkomponente ein:

@inject HttpClient HttpClient

<div class="dialog-container">
    <div class="dialog">
        <div class="dialog-title">
            <h2>@Pizza.Special.Name</h2>
            @Pizza.Special.Description
        </div>
        <form class="dialog-body">
            <div>
                <label>Size:</label>
                <input type="range" min="@Pizza.MinimumSize" max="@Pizza.MaximumSize" step="1" />
                <span class="size-label">
                    @(Pizza.Size)" (£@(Pizza.GetFormattedTotalPrice()))
                </span>
            </div>
        </form>

        <div class="dialog-buttons">
            <button class="btn btn-secondary mr-auto" >Cancel</button>
            <span class="mr-center">
                Price: <span class="price">@(Pizza.GetFormattedTotalPrice())</span>
            </span>
            <button class="btn btn-success ml-auto" >Order ></button>
        </div>
    </div>
</div>

Diese Komponente ist ein Dialogfeld, in dem die ausgewählte spezielle Pizza angezeigt wird und der Kunde die Pizzagröße auswählen kann.

Die Komponente benötigt eine Spezialpizza aus der Indexseitenkomponente, um auf die Memberwerte einer Pizza zuzugreifen.

Fügen Sie den Blazor-Block @code hinzu, damit Parameter an die Komponente übergeben werden können:
```
@code {
    [Parameter] public Pizza Pizza { get; set; }
}
```

Bestellen Sie eine Pizza

Wenn ein Kunde eine Pizza auswählt, sollte das Dialogfeld es ihnen ermöglichen, die Größe ihrer Pizza zu ändern. Verbessern wir das Index.razor-Steuerelement , um diese Interaktivität hinzuzufügen.

Erweitern Sie im Datei-Explorer Seiten, und wählen Sie dann "Index.razor" aus.
Fügen Sie diesen Code im @code Block unter der List<PizzaSpecial> Variablen hinzu:
```
Pizza configuringPizza;
bool showingConfigureDialog;
```

Fügen Sie diesen Code hinzu, um unter der OnInitializedAsync() Methode eine Pizza zu erstellen:

void ShowConfigurePizzaDialog(PizzaSpecial special)
{
    configuringPizza = new Pizza()
    {
        Special = special,
        SpecialId = special.Id,
        Size = Pizza.DefaultSize
    };

    showingConfigureDialog = true;
}

Ermöglichen Sie der Webseite, die serverseitige ShowConfigurePizzaDialog-Methode aufzurufen, indem Kunden das <li>-Tag einer Pizza auswählen. Ersetzen Sie <li>-Zeile durch den folgenden Code:
```
<li @onclick="@(() => ShowConfigurePizzaDialog(special))" style="background-image: url('@special.ImageUrl')">
```
Wenn ein Kunde eine Pizza auswählt, führt der Server die ShowConfigurePizzaDialog Methode aus, die eine Pizza mit den speziellen Pizzadaten erstellt und die showingConfigureDialog Variable auf truelegt.

Die Seite benötigt eine Möglichkeit zum Anzeigen der neuen ConfigurePizzaDialog Komponente. Fügen Sie diesen Code über dem @code Block hinzu:

@if (showingConfigureDialog)
{
    <ConfigurePizzaDialog Pizza="configuringPizza" />
}

Die gesamte index.razor Datei sollte nun wie in diesem Beispiel aussehen:

@page "/"
@inject HttpClient HttpClient
@inject NavigationManager NavigationManager

<div class="main">
    <h1>Blazing Pizzas</h1>
    <ul class="pizza-cards">
    @if (specials != null)
    {
        @foreach (var special in specials)
        {
          <li @onclick="@(() => ShowConfigurePizzaDialog(special))" style="background-image: url('@special.ImageUrl')">
            <div class="pizza-info">
            <span class="title">@special.Name</span>
            @special.Description
            <span class="price">@special.GetFormattedBasePrice()</span>
            </div>
          </li>
        }
    }
    </ul>
</div>

@if (showingConfigureDialog)
{
    <ConfigurePizzaDialog Pizza="configuringPizza" />
}

@code {
    List<PizzaSpecial> specials = new();
    Pizza configuringPizza;
    bool showingConfigureDialog;

    protected override async Task OnInitializedAsync()
    {
        specials = await HttpClient.GetFromJsonAsync<List<PizzaSpecial>>(NavigationManager.BaseUri + "specials");
    }

    void ShowConfigurePizzaDialog(PizzaSpecial special)
    {
        configuringPizza = new Pizza()
        {
            Special = special,
            SpecialId = special.Id,
            Size = Pizza.DefaultSize
        };

        showingConfigureDialog = true;
    }
}

Wählen Sie F5 aus, oder wählen Sie "Ausführen" aus. Wählen Sie dann "Debuggen starten" aus.
Wählen Sie eine Pizza aus, und sehen Sie sich das neue Dialogfeld an.

Verwaltung des Status einer Bestellung

Zurzeit zeigt die App den Konfigurationsdialog an, ermöglicht es Ihnen jedoch nicht, den Vorgang abzubrechen oder die Pizza zu bestellen. Um den Status der Bestellung zu verwalten, fügen Sie einen neuen Containerdienst für den Bestellstatus hinzu.

Beenden Sie die App, wenn sie noch ausgeführt wird.
Erstellen Sie einen neuen Ordner im Ordner "BlazingPizza ". Benennen Sie die Dienste.
Erstellen Sie eine neue Datei im Ordner "Dienste ". Benennen Sie ihn OrderState.cs.

Geben Sie diesen Code für die Klasse ein:

namespace BlazingPizza.Services;

public class OrderState
{
    public bool ShowingConfigureDialog { get; private set; }
    public Pizza ConfiguringPizza { get; private set; }
    public Order Order { get; private set; } = new Order();

    public void ShowConfigurePizzaDialog(PizzaSpecial special)
    {
        ConfiguringPizza = new Pizza()
        {
            Special = special,
            SpecialId = special.Id,
            Size = Pizza.DefaultSize,
            Toppings = new List<PizzaTopping>(),
        };

        ShowingConfigureDialog = true;
    }

    public void CancelConfigurePizzaDialog()
    {
        ConfiguringPizza = null;

        ShowingConfigureDialog = false;
    }

    public void ConfirmConfigurePizzaDialog()
    {
        Order.Pizzas.Add(ConfiguringPizza);
        ConfiguringPizza = null;

        ShowingConfigureDialog = false;
    }
}

Sie stellen fest, dass derzeit Code in der Index.razor-Komponente vorhanden ist, die wir in die neue Klasse verschieben können. Der nächste Schritt besteht darin, diesen Dienst in der App verfügbar zu machen.

Wählen Sie im Datei-Explorer Program.cs aus.
Fügen Sie im Teil der Datei mit den Zeilen, die mit builder.Services.beginnen, diese Zeile hinzu:
```
builder.Services.AddScoped<OrderState>();
```
Aus der vorherigen Übung haben wir hier unseren Datenbankkontext hinzugefügt. Dieser Code fügt den neuen OrderState Dienst hinzu. Mit diesem Code können wir ihn jetzt in der index.razor Komponente verwenden.
Fügen Sie die folgende using Direktive am Anfang der Datei hinzu. Diese Direktive löst alle Verweise auf die OrderState Klasse auf:
```
using BlazingPizza.Services;
```
Erweitern Sie im Datei-Explorer Seiten, und wählen Sie dann "Index.razor" aus.
Fügen Sie oben in der Datei unter @inject NavigationManager NavigationManager den folgenden Code hinzu:
```
@using BlazingPizza.Services
@inject OrderState OrderState
```

Entfernen configuringPizza, , showingConfigureDialogund ShowConfigurePizzaDialog() aus dem @code Block. Dies sollte jetzt wie folgt aussehen:

@code {
    List<PizzaSpecial> specials = new List<PizzaSpecial>();

    protected override async Task OnInitializedAsync()
    {
        specials = await HttpClient.GetFromJsonAsync<List<PizzaSpecial>>(NavigationManager.BaseUri + "specials");
    }
}

Es gibt jetzt Fehler, wenn der Code auf die Elemente verweist, die Sie gelöscht haben.

Ändern Sie den Aufruf zu ShowConfigurePizzaDialog(special)), um die OrderState-Version zu verwenden.

<li @onclick="@(() => OrderState.ShowConfigurePizzaDialog(special))" style="background-image: url('@special.ImageUrl')">

Ändern des Verweises auf den Booleschen Wert showingConfigureDialog:
```
@if (OrderState.ShowingConfigureDialog)
```

Ändern Sie den Parameter mithilfe von configuringPizza:

<ConfigurePizzaDialog Pizza="OrderState.ConfiguringPizza" />

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

Wenn alles richtig ist, sollten Sie keinen Unterschied sehen. Das Dialogfeld wird wie zuvor angezeigt.

Stornieren und Aufgeben von Pizzabestellungen

Möglicherweise stellen Sie fest, dass es zwei Methoden in der OrderState-Klasse gibt, die noch nicht verwendet werden. Die CancelConfigurePizzaDialog Methoden ConfirmConfigurePizzaDialog schließen das Dialogfeld und fügen die Pizza zu einem Order Objekt hinzu, sobald der Kunde die Bestellung bestätigt. Verbinden wir diese Methoden mit den Schaltflächen für das Konfigurationsdialogfeld.

Beenden Sie die App, wenn sie noch ausgeführt wird.
Erweitern Sie im Datei-Explorer Freigegeben. Wählen Sie dann ConfigurePizzaDialog.razor aus.

Fügen Sie im @code Block zwei neue Parameter hinzu:

@code {
   [Parameter] public Pizza Pizza { get; set; }
   [Parameter] public EventCallback OnCancel { get; set; }
   [Parameter] public EventCallback OnConfirm { get; set; }
}
`` `

Auf den Schaltflächen können jetzt @onclick Direktiven hinzugefügt werden. Ändern Sie den aktuellen Code für die Dialogfeldschaltflächen in dieses Markup:

<div class="dialog-buttons">
    <button class="btn btn-secondary mr-auto" @onclick="OnCancel">Cancel</button>
    <span class="mr-center">
        Price: <span class="price">@(Pizza.GetFormattedTotalPrice())</span>
    </span>
    <button class="btn btn-success ml-auto" @onclick="OnConfirm">Order ></button>
</div>

Der letzte Schritt besteht darin, die OrderState Methoden zum Abbrechen und Bestätigen von Bestellungen weiterzugeben. Erweitern Sie im Datei-Explorer den Ordner Pages. Wählen Sie dann "Index.razor" aus.

Ändern Sie den Code für den Aufruf der ConfigurePizzaDialog Komponente:

<ConfigurePizzaDialog
    Pizza="OrderState.ConfiguringPizza"
    OnCancel="OrderState.CancelConfigurePizzaDialog"
    OnConfirm="OrderState.ConfirmConfigurePizzaDialog" />

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

Die App sollte jetzt Kunden das Kündigen oder Hinzufügen einer konfigurierten Pizza zu einer Bestellung ermöglichen. Wir haben keine Möglichkeit, die aktuelle Bestellung anzuzeigen oder die Preise zu aktualisieren, wenn die Pizzagröße geändert wird. Wir fügen diese Features in der nächsten Übung hinzu.

Feedback

War diese Seite hilfreich?