Übung: Erstellen eines Blazor-Ereignishandlers für Onclick-Ereignisse

5 Minuten

Blazer bietet Ihnen die Möglichkeit, C#-Code mit HTML-DOM-Ereignissen zu verbinden. Sie verwenden diese Möglichkeit, um eine vorhandene App zu verbessern.

Als Mitglied eines Entwicklungsteams, das an der Verbesserung einer Blazing Pizza-App arbeitet, wurden Sie gebeten, den Bezahlvorgang zu vervollständigen, um die Adressen der Kunden zu erfassen. Sie fügen einige Textfelder hinzu und verbessern den Auscheckvorgang.

In dieser Übung klonen Sie eine vorhandene App und erstellen eine neue Adresskomponente, um Adressdetails zu erfassen. Wenn die Felder angeordnet sind, legen Sie den Fokus auf das erste Feld im Formular fest.

Klonen der vorhandenen App Ihres Teams

Hinweis

In diesem Modul wird die .NET-CLI (Befehlszeilenschnittstelle) und Visual Studio Code für die lokale Entwicklung verwendet. Nach Abschluss dieses Moduls können Sie die Konzepte mit Visual Studio (Windows), Visual Studio für Mac (macOS) oder bei der Weiterentwicklung mit Visual Studio Code (Windows, Linux und macOS) anwenden.

In diesem Modul wird das .NET 6.0 SDK verwendet. Stellen Sie sicher, dass .NET 6.0 installiert ist, indem Sie in Ihrem bevorzugten Terminal den folgenden Befehl ausführen:

dotnet --list-sdks

Daraufhin wird eine Ausgabe angezeigt, die in etwa wie folgt aussieht:

3.1.100 [C:\program files\dotnet\sdk]
5.0.100 [C:\program files\dotnet\sdk]
6.0.100 [C:\program files\dotnet\sdk]

Stellen Sie sicher, dass eine Version aufgeführt wird, die mit 6 beginnt. Wenn keine solche Version aufgeführt wird oder der Befehl nicht gefunden wurde, installieren Sie das neueste .NET 6.0 SDK.

Wenn Sie noch nie eine Blazor-Anwendung erstellt haben, folgen Sie den Setupanweisungen für Blazor, um die richtige Version von .NET zu installieren und zu überprüfen, ob Ihr Computer ordnungsgemäß eingerichtet ist. Halten Sie beim Schritt Erstellen Ihrer App an.

Öffnen Sie Visual Studio Code.
Öffnen Sie das integrierte Terminal aus Visual Studio Code, indem Sie im Hauptmenü Ansicht und dann Terminal auswählen.
Navigieren Sie im Terminal zu dem Speicherort, an dem das Projekt erstellt werden soll.

Klonen Sie die App aus GitHub.

git clone https://github.com/MicrosoftDocs/mslearn-use-forms-in-blazor-web-apps.git BlazingPizza

Wählen Sie Datei und dann Ordner öffnen... aus.
Navigieren Sie im Dialogfeld „Öffnen“ zum Ordner BlazingPizza, und wählen Sie Ordner auswählen aus.

Visual Studio Code weist Sie möglicherweise auf nicht aufgelöste Abhängigkeiten hin. Wählen Sie Wiederherstellen aus.
Führen Sie die App aus, um zu überprüfen, ob alles ordnungsgemäß funktioniert.
Drücken Sie in Visual Studio Code F5, oder wählen Sie im Menü Ausführen>Debugging starten aus.

Versuchen Sie, einige Pizzas zu konfigurieren und sie Ihrer Bestellung hinzufügen. Klicken Sie unten auf der Seite auf Order > (Bestellen). Die aktuelle Seite zum Auschecken wird angezeigt.
Drücken Sie UMSCHALT + F5, um die Ausführung der App zu beenden.

Umgestalten der Seite zum Auschecken

Erweitern Sie in Visual Studio Code im Datei-Explorer Seiten, und wählen Sie dann Checkout.razor aus.

Derzeit wird auf der Seite zum Auschecken nur die Liste der konfigurierten Pizzas angezeigt. Sie wurden gebeten, die Seite so umzugestalten, dass sie einen Adressabschnitt enthält.

Ersetzen Sie den vorhandenen HTML-Block <div class="main"> durch zwei Spalten für Daten.

<div class="main">
    <div class="checkout-cols">
        <div class="checkout-order-details">
            <h4>Review order</h4>
            <OrderReview Order="Order" />
        </div>

        <div class="checkout-delivery-address">
            <h4>Deliver to...</h4>
            <AddressEditor Address="Order.DeliveryAddress" />
        </div>
    </div>

    <button class="checkout-button btn btn-warning" @onclick="PlaceOrder" disabled=@isSubmitting>
        Place order
    </button>
</div>

Der vorangehende Code verbindet das HTML-Ereignis onclick für das Schaltflächenelement mit der Blazor-Methode PlaceOrder im @code-Block.

Die Umgestaltung verweist auf zwei neue Blazor-Steuerelemente OrderReview und AddressEditor. Sie verschieben den alten Auscheckcode, mit dem die Pizzas aufgeführt wurden, in die OrderReview-Komponente.

Klicken Sie im Datei-Explorer mit der rechten Maustaste auf Freigegeben, und wählen Sie dann Neue Datei aus.
Geben Sie OrderReview.razor als Dateinamen ein.

Fügen Sie eine foreach-Schleife hinzu, um die Pizzas einer Bestellung anzuzeigen.

@foreach (var pizza in Order.Pizzas)
{
    <p>
        <strong>
            @(pizza.Size)"
            @pizza.Special.Name
            (£@pizza.GetFormattedTotalPrice())
        </strong>
    </p>
}

<p>
    <strong>
        Total price:
        £@Order.GetFormattedTotalPrice()
    </strong>
</p>

@code {
    [Parameter] public Order Order { get; set; }
}

Klicken Sie im Datei-Explorer mit der rechten Maustaste auf Freigegeben, und wählen Sie dann Neue Datei aus.
Geben Sie AddressEditor.razor als Dateinamen ein.

Fügen Sie Code hinzu, der ein input-Element für jedes Feld in einer Adresse verwendet. Die Address-Klasse im Ordner Model zeigt alle Felder an.

<div class="form-field">
    <label>Name:</label>
    <div>
        <input @bind="Address.Name" />
    </div>
</div>

<div class="form-field">
    <label>Line 1:</label>
    <div>
        <input @bind="Address.Line1" />
    </div>
</div>

<div class="form-field">
    <label>Line 2:</label>
    <div>
        <input @bind="Address.Line2" />
    </div>
</div>

<div class="form-field">
    <label>City:</label>
    <div>
        <input @bind="Address.City" />
    </div>
</div>

<div class="form-field">
    <label>Region:</label>
    <div>
        <input @bind="Address.Region" />
    </div>
</div>

<div class="form-field">
    <label>Postal code:</label>
    <div>
        <input @bind="Address.PostalCode" />
    </div>
</div>

@code {
    [Parameter] public Address Address { get; set; }
}

Testen der neuen Seite zum Auschecken

Drücken Sie in Visual Studio Code F5, oder wählen Sie im Menü Ausführen>Debugging starten aus.

Fügen Sie einige Pizzas hinzu, und wählen Sie Order > (Bestellen) aus, um den neuen Auscheckflow anzuzeigen.
Drücken Sie UMSCHALT + F5, um die Ausführung der App zu beenden.

Verbessern der Benutzerfreundlichkeit des Formulars

Wenn der Kunde auf die Seite zum Auschecken geleitet wird, gibt er als Erstes seinen Namen ein. Mit Blazor können Sie den Fokus auf HTML-Elemente auf einer Seite festlegen. Verbessern wir nun unsere App, indem wir dies hinzufügen.

Ändern Sie in AddressEditor.razor den HTML-Code für das input-Element von „Name“ so, dass Sie @ref="startName" hinzufügen.
```
<input @ref="startName" @bind="Address.Name" />
```
Mit der Blazor-Anweisung @ref="startName" kann der Codeblock eine ElementReference erstellen, um auf das Eingabeelement zu verweisen. Anschließend können Sie mit diesem Elementverweis FocusAsync aufrufen, nachdem eine Seite gerendert wurde.
Fügen Sie Code zum Aufrufen von FocusAsync hinzu, nachdem eine Seite unter der [Parameter] public Address Address { get; set; }-Deklaration geladen wurde.
```
private ElementReference startName;

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender) {
        await startName.FocusAsync();
    }
}    
```
Dieser Code erstellt die ElementReference und legt dann nach dem Rendern einer Seite den Fokus auf das Feld Name fest.
Drücken Sie in Visual Studio Code F5, oder wählen Sie im Menü Ausführen>Debugging starten aus.

Fügen Sie einige Pizzas hinzu, und wählen Sie Order > (Bestellen) aus, um zu sehen, dass das Formularfeld Name auf der Seite zum Auschecken den Fokus hat.
Drücken Sie UMSCHALT + F5, um die Ausführung der App zu beenden.

Übung: Erstellen eines Blazor-Ereignishandlers für Onclick-Ereignisse

Klonen der vorhandenen App Ihres Teams

Umgestalten der Seite zum Auschecken

Testen der neuen Seite zum Auschecken

Verbessern der Benutzerfreundlichkeit des Formulars

Feedback