Übung: Verwenden einer JavaScript-Bibliothek in einer Blazor-App

10 Minuten

Nachdem Kund*innen eine Pizza zu ihrer Bestellung hinzugefügt haben, können sie die Pizza ohne Bestätigung aus der Bestellung entfernen, indem sie auf das X-Symbol klicken. Um zu verhindern, dass Kund*innen Pizzen versehentlich aus ihren Bestellungen entfernen, möchte das Pizzaunternehmen, dass Sie eine Bestätigungsaufforderung für das Entfernen des Artikels hinzufügen.

Das Pizzaunternehmen möchte auch, dass Kund*innen ihre Bestellung in Echtzeit nachverfolgen können. Sie müssen die Bestelldetailseite aktualisieren, um den Bestellstatus kontinuierlich abzufragen und Kund*innen darüber zu informieren, dass die Seite aktualisiert wird.

In dieser Übung erweitern Sie die vorhandene App des Pizzalieferunternehmens, indem Sie JS-Interop von einer Blazor-Komponente verwenden, um JavaScript auf der Clientseite aufzurufen. Sie integrieren mit der JavaScript-Bibliothek eines Drittanbieters, um das Bestätigungspopup zu verbessern, und rufen eine Blazor-Methode aus JavaScript auf, um den Echtzeitstatus einer Kundenbestellung abzurufen.

Klonen der vorhandenen App

Um Blazor zu verwenden, stellen Sie sicher, dass das .NET 8.0 SDK installiert ist. Weitere Informationen finden Sie unter Überprüfen der ordnungsgemäßen Installation.

Öffnen Sie Visual Studio Code, und öffnen Sie ein integriertes Terminal, indem Sie im oberen Menü Terminal>Neues Terminal auswählen.
Navigieren Sie im Terminal zu dem Speicherort, an dem Sie das Projekt erstellen möchten.

Führen Sie den folgenden Befehl aus, um die App von GitHub in ein lokales Unterverzeichnis zu klonen:

git clone https://github.com/MicrosoftDocs/mslearn-build-interactive-components-blazor.git BlazingPizza

Wählen Sie auf der oberen Menüleiste Datei>Ordner öffnen aus.
Navigieren Sie im Dialogfeld Ordner öffnen zum Ordner BlazingPizza, und wählen Sie Ordner auswählen aus.

Wenn Visual Studio Code eine Warnung wegen fehlender Ressourcen oder nicht aufgelöster Abhängigkeiten anzeigt, wählen Sie Ja oder Wiederherstellen aus.
Um die App auszuführen und zu überprüfen, ob alles ordnungsgemäß funktioniert, drücken Sie F5, oder wählen Sie Ausführen>Debuggen starten aus.
Wählen Sie in der Web-App einige Pizzen aus, und fügen Sie diese Ihrer Bestellung hinzu. Wenn Sie einige Pizzen zu Ihrer Bestellliste hinzugefügt haben, klicken Sie auf das X neben einer der Pizzen, und vergewissern Sie sich, dass der Artikel ohne Aufforderung verschwindet.
Drücken Sie UMSCHALT+F5, oder wählen Sie Ausführen>Debuggen beenden aus, um die App zu beenden.

Umgestalten des Bestellprozesses

Um Sie JS-Interop zu verwenden, müssen Sie die IJSRuntime-Abstraktion einfügen.

Erweitern Sie im Visual Studio Code-Explorer die Option Seiten, und wählen Sie dann Index.razor aus.
Fügen Sie in der Datei Index.razor nach der @inject OrderState OrderState-Anweisung die IJSRuntime-Injektion folgendermaßen hinzu:
```
@inject OrderState OrderState
@inject IJSRuntime JavaScript
```
Derzeit ruft das onclick-Ereignis für die Funktionalität zum Entfernen von Pizzas die OrderState.RemoveConfiguredPizza(configuredPizza))-Methode direkt auf. Ersetzen Sie das gesamte <a @onclick="@(() => OrderState.RemoveConfiguredPizza(configuredPizza))" class="delete-item">❌</a>-Element durch den folgenden Code:
```
<button type="button" class="close text-danger" aria-label="Close"
     @onclick="@(async () => await RemovePizzaConfirmation(configuredPizza))">
     <span aria-hidden="true">&times;</span>
</button>
```
Fügen Sie in der @code-Anweisung am Ende der Datei eine neue Methode hinzu, um die native JavaScript-Funktion confirm aufzurufen. Wenn Kund*innen in der Bestätitungsaufforderung OK auswählen, ruft die Methode OrderState.RemoveConfiguredPizza auf, um die Pizza aus der Bestellung zu entfernen. Andernfalls bleibt die Pizza in der Bestellung enthalten.
```
async Task RemovePizzaConfirmation(Pizza removePizza)
{
    if (await JavaScript.InvokeAsync<bool>(
        "confirm",
        $"""Do you want to remove the "{removePizza.Special!.Name}" from your order?"""))
    {
        OrderState.RemoveConfiguredPizza(removePizza);
    }
}
```
Der Server verwendet die IJSRuntime.InvokeAsync-Methode, um die confirm-Funktion auf Clientseite aufzurufen. Die Antwort des Aufrufs gibt einen bool-Wert zurück. Wenn das Ergebnis des Bestätigungsdialogfelds true lautet, wird die Pizza aus der Bestellung entfernt.
Drücken Sie F5, oder wählen Sie Ausführen>Debuggen starten aus.
Fügen Sie Ihrer Bestellung in der App einige Pizzen hinzu.
Wenn Sie einige Pizzen zu Ihrer Bestellung hinzugefügt haben, klicken Sie auf das X neben einer der Pizzen. Ein gewöhnliches JavaScript-Bestätigungsdialogfeld wird angezeigt.
Wählen Sie OK aus, und vergewissern Sie sich, dass die Pizza aus Ihrer Bestellung entfernt wurde. Wählen Sie X neben einer anderen Pizza aus, wählen Sie im Bestätigungsdialogfeld Abbrechen aus, und vergewissern Sie sich, dass die Pizza in Ihrer Bestellung enthalten bleibt.
Drücken Sie UMSCHALT+F5, oder wählen Sie Ausführen>Debuggen beenden aus, um die App zu beenden.

Hinzufügen einer JavaScript-Bibliothek eines Drittanbieters zu einer Blazor-App

Das Pizzaunternehmen wünscht sich einen benutzerfreundlicheren Text auf den Schaltflächen im Bestätigungsdialogfeld und möchte sein eigenes Branding und seinen eigenen Stil im Dialogfeld verwenden. Nach einiger Recherche entscheiden Sie sich dazu, eine kleine JavaScript-Bibliothek namens „SweetAlert“ als guten Ersatz für das Standarddialogfeld zu verwenden.

Erweitern Sie im Visual Studio Code-Explorer die Option Seiten, und wählen Sie dann _Host.cshtml aus.
Fügen Sie am Ende der Datei _Host.cshtml nach der Zeile <script src="_framework/blazor.server.js"></script>, aber vor der Zeile </body> das folgende script-Element hinzu, um die „SweetAlert“-Bibliothek einzuschließen:
```
<script src="https://cdn.jsdelivr.net/npm/sweetalert@latest/dist/sweetalert.min.js"></script>
```
Die „SweetAlert“-Bibliothek kann jetzt clientseitig aufgerufen werden.

Um die neue Bibliothek zu verwenden, aktualisieren Sie die RemovePizzaConfirmation-Methode in der Datei Index.razor folgendermaßen:

async Task RemovePizzaConfirmation(Pizza removePizza)
{
    var messageParams = new
    {
        title = "Remove Pizza?",
        text = $"""Do you want to remove the "{removePizza.Special!.Name}" from your order?""",
        icon = "warning",
        buttons = new
        {
            abort = new { text = "No, leave it in my order", value = false },
            confirm = new { text = "Yes, remove pizza", value = true }
        },
        dangerMode = true
    };

    if (await JavaScript.InvokeAsync<bool>("swal", messageParams))
    {
        OrderState.RemoveConfiguredPizza(removePizza);
    }
}

Der "swal"-Name ist der Bezeichner für die JavaScript-Funktion, die von der Drittanbieterreferenz sweetalert.js stammt. Der Code zum Aufrufen der swal-Funktion sieht ähnlich aus wie confirm. Der Großteil des Updates besteht darin, wie die Funktion Parameter erhält. „SweetAlert“ kann ein JSON-Objekt akzeptieren, das alle benötigten Einstellungen enthält.

Drücken Sie in Visual Studio Code F5, oder wählen Sie Ausführen>Debuggen starten aus.
Vergewissern Sie sich, dass das Dialogfeld confirm jetzt über die folgenden zwei Schaltflächen verfügt und diese wie erwartet funktionieren: No, leave it in my order und Yes, remove pizza.
Drücken Sie UMSCHALT+F5, oder wählen Sie Ausführen>Debuggen beenden aus, um die App zu beenden.

Aktualisieren der Bestellseite zum Anzeigen des Bestellstatus in Echtzeit

Sobald Kund*innen eine Pizzabestellung aufgegeben haben, wird auf der Seite Meine Bestellungen die OrderDetail-Komponente verwendet, um den aktuellen Status der Bestellung anzuzeigen. Das Pizzaunternehmen möchte, dass Kund*innen den Status ihrer Bestellung in Echtzeit sehen können. Sie aktualisieren die Komponente, um eine .NET-Methode von JavaScript aus aufzurufen, die den Bestellstatus kontinuierlich abruft, bis der Status „Delivered“ anzeigt.

Erweitern Sie im Visual Studio Code-Explorer die Option Seiten, und wählen Sie dann OrderDetail.razor aus.
Fügen Sie in der Datei OrderDetail.razor die folgende Deklaration oben in der Komponente unter der letzten @inject-Anweisung hinzu:
```
@implements IDisposable
```
Mit dieser @implements-Deklaration können Sie eine Dispose-Methode definieren.
Fügen Sie der Seite ein Drehfeld hinzu, um Kund*innen darüber zu informieren, dass die Seite aktualisiert wird. Fügen Sie im Element <div class="track-order-details"> oberhalb der @foreach-Anweisung den folgenden Code hinzu:
```
@if (IsOrderIncomplete)
{
    <div class="spinner-grow text-danger float-right" role="status">
        <span class="sr-only">Checking your order status...</span>
    </div>
}
```

Fügen Sie in der @code-Anweisung unter der OrderId-Eigenschaftendeklaration die folgenden Member hinzu:

bool IsOrderIncomplete =>
    orderWithStatus is null || orderWithStatus.IsDelivered == false;

PeriodicTimer timer = new(TimeSpan.FromSeconds(3));

Ersetzen Sie die vorhandene OnParametersSetAsync -Methode durch den folgenden Code:
```
protected override async Task OnParametersSetAsync() =>
    await GetLatestOrderStatusUpdatesAsync();
```
Der Code ruft nun die GetLatestOrderStatusUpdatesAsync-Methode auf, um den Bestellstatus zu aktualisieren.

Fügen Sie die folgenden Methoden nach der aktualisierten OnParametersSetAsync-Methode hinzu:

protected override Task OnAfterRenderAsync(bool firstRender) =>
    firstRender ? StartPollingTimerAsync() : Task.CompletedTask;

async Task GetLatestOrderStatusUpdatesAsync()
{
    try
    {
        orderWithStatus = await HttpClient.GetFromJsonAsync<OrderWithStatus>(
            $"{NavigationManager.BaseUri}orders/{OrderId}");
    }
    catch (Exception ex)
    {
        invalidOrder = true;
        Console.Error.WriteLine(ex);
    }
}

async Task StartPollingTimerAsync()
{
    while (IsOrderIncomplete && await timer.WaitForNextTickAsync())
    {
        await GetLatestOrderStatusUpdatesAsync();
        StateHasChanged();
    }
}

public void Dispose() => timer.Dispose();

Die OrderDetail-Komponente beginnt den Abruf, nachdem die Seite gerendert wurde, und beendet den Abruf, wenn die Bestellung geliefert wurde. Während der Bestellstatus unvollständig ist, verwendet die StartPollingTimerAsync-Funktion PeriodicTimer, um asynchron auf den nächsten Tick zu warten. Wenn die Bestellung geliefert wurde, wird das animierte Drehfeld von der Seite entfernt, und der endgültige Bestellstatus wird angezeigt.

Drücken Sie in Visual Studio Code F5, oder wählen Sie Ausführen>Debuggen starten aus.
Bestellen Sie in der App eine Pizza. Wechseln Sie zum Bildschirm My Orders, und vergewissern Sie sich, dass der animierte rote Punkt angezeigt wird, während die Bestellung unvollständig ist, und dass der Punkt verschwindet, wenn der Status Delivered angezeigt wird.
Drücken Sie UMSCHALT+F5, oder wählen Sie Ausführen>Debuggen beenden aus, um die App zu beenden.

Weiter

Klonen der vorhandenen App

Umgestalten des Bestellprozesses

Hinzufügen einer JavaScript-Bibliothek eines Drittanbieters zu einer Blazor-App

Aktualisieren der Bestellseite zum Anzeigen des Bestellstatus in Echtzeit

Feedback