Übung: Verbessern der Interaktivität von Apps mit Lebenszyklusereignissen

5 Minuten

Der Pizzalieferdienst möchte eine spezielle Familienpizza verkaufen, die nur in der Größe 24 Zoll erhältlich ist. Die aktuelle Pizza-App verfügt über einen Schieberegler für die Größe, der keine Option für eine voreingestellte Größe besitzt. Sie sollen die neue Familienpizza hinzufügen und den Größenregler für diese Pizza deaktivieren.

In dieser Übung ändern Sie die Pizzadatenbank und fügen die Familienpizza hinzu. Danach ändern Sie das Pizzamodell, damit die neue Pizza verfügbar ist. Um mit dem Lebenszyklus von Blazor-Komponenten zu arbeiten, nehmen Sie Änderungen an der Konfiguration des Dialogfelds Pizza vor. So ermöglichen Sie die festgelegte Größe.

Erstellen der neuen Familienpizza

Zunächst fügen Sie dem Pizzamodell die neue FixedSize-Funktion hinzu und erstellen die neue Familienpizza in der Pizzadatenbank.

Erweitern Sie im Explorer von Visual Studio Code den Eintrag Modelle, und wählen Sie PizzaSpecial.cs aus.
Fügen Sie in der Datei PizzaSpecial.cs nach der ImageUrl-Eigenschaft die folgende neue Eigenschaft hinzu:
```
public int? FixedSize { get; set; }
```
Öffnen Sie die Datei Pizza.cs, und ersetzen Sie die GetBasePrice-Methode durch folgenden Code:
```
public decimal GetBasePrice() =>
    Special is { FixedSize: not null }
        ? Special.BasePrice
        : (decimal)Size / DefaultSize * Special?.BasePrice ?? 1;
```
Der Code verfügt nun über eine Spezialoption, die eine FixedSize hat, wenn er BasePricezurückgibt.
Erweitern Sie die Option Daten, und wählen Sie SeedData.cs aus.

Fügen Sie der Datei SeedData.cs am Ende der specials-Arraydeklaration in der InitializeAsync-Methode den folgenden Code für die neue Familienpizza hinzu.

new()
{
    Id = 9,
    Name = "Margherita Family Size",
    Description = "24\" of pure tomatoes and basil",
    BasePrice = 14.99m,
    ImageUrl = "img/pizzas/margherita.jpg",
    FixedSize = 24
}

Mit der SeedData-Klasse wird die Pizzadatenbank vorab mit speziellen Pizzas aufgefüllt. Damit das neue PizzaSpecial erstellt werden kann, müssen Sie die vorhandene Datenbank löschen. Wählen Sie im Explorer die Dateien pizza.db, pizza.db-shm und pizza.db-wal aus, und löschen Sie sie.
Drücken Sie in Visual Studio Code F5, oder wählen Sie Ausführen>Debugging starten aus.
Wählen Sie in der App die neue Familienpizza Margherita aus.
Auf dem Bestellformular sehen Sie, dass Sie die Pizzagröße weiterhin ändern können.
Drücken Sie UMSCHALT+F5, oder wählen Sie Ausführen>Debugging beenden aus, um die App zu beenden.

Entfernen des Schiebereglers für die Größe

Die Komponente ConfigurePizzaDialog verwendet ein HTML-Element range, damit der Kunde die Größe der Pizza auswählen kann. Eine Möglichkeit zum Deaktivieren der Benutzereingabe besteht darin, das Rendering des Benutzersteuerelements für die Größe je nach Bedingung vollständig auszulassen.

Erweitern Sie Shared im Explorer von Visual Studio Code, und wählen Sie dann ConfigurePizzaDialog.razor aus.
Fügen Sie in der @code-Anweisung nach den vorhandenen Eigenschaften die folgenden Member hinzu:
```
bool supportSizing = true;

protected override void OnInitialized()
{
    if (Pizza is { Special.FixedSize: not null })
    {
        Pizza.Size = Pizza.Special.FixedSize.Value;
        supportSizing = false;
    }
}
```
Das Feld supportSizing ist standardmäßig auf true festgelegt, aber wenn die Pizza eine bestimmte Größe aufweist, wird es auf false festgelegt. Die Außerkraftsetzung der Lebenszyklusmethode OnInitialized legt die Pizzagröße auf die eingestellte Größe fest und deaktiviert die Größenanpassung.

Hinweis

Wenn Ihr Code auf JavaScript-Interop angewiesen wäre, würde die OnInitialized-Methode nicht funktionieren. Stattdessen müssten Sie die OnAfterRenderAsync-Methode verwenden, um sicherzustellen, dass JavaScript-Interop verfügbar ist.

Ersetzen Sie oben in der Datei im <form class="dialog-body"> die vorhandenen Zeilen label und input durch den folgenden Code:

@if (supportSizing)
{
    <label>Size:</label>
    <input type="range" min="@Pizza.MinimumSize" max="@Pizza.MaximumSize"
        step="1" @bind="Pizza.Size" @bind:event="oninput" />
}

Drücken Sie F5, oder wählen Sie Ausführen>Debugging starten aus.
Fügen Sie die Familienpizza hinzu, und vergewissern Sie sich, dass der Schieberegler für die Größe deaktiviert ist, da er beim Rendering ausgelassen wird.
Bestellen Sie eine andere Pizza, und prüfen Sie, ob Sie den Schieberegler für die Größe bei dieser Pizza noch verwenden können.
Drücken Sie UMSCHALT+F5, oder wählen Sie Ausführen>Debugging beenden aus, um die App zu beenden.

Übung: Verbessern der Interaktivität von Apps mit Lebenszyklusereignissen

Erstellen der neuen Familienpizza

Entfernen des Schiebereglers für die Größe

Feedback