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

  • 10 Minuten

Nachdem ein Kunde seiner Bestellung eine Pizza hinzugefügt hat, kann er ein X-Symbol auswählen, um die Pizza ohne Bestätigung aus der Bestellung zu entfernen. Um zu verhindern, dass Kunden Pizza versehentlich aus ihren Bestellungen entfernen, möchte das Pizzaunternehmen, dass Sie eine Bestätigungsaufforderung zum Entfernen von Artikeln hinzufügen.

Das Pizzaunternehmen möchte auch kunden sehen, wie ihre Bestellung in Echtzeit voranschreitet. Sie müssen die Bestelldetailseite aktualisieren, um den Bestellstatus kontinuierlich abzufragen, und geben Sie Kunden Feedback, dass die Seite aktualisiert wird.

In dieser Übung erweitern Sie die vorhandene App des Pizzazustellunternehmens mit JS-Interoperabilität aus einer Blazor-Komponente, um JavaScript auf clientseitiger Seite aufzurufen. Sie integrieren sich in eine JavaScript-Bibliothek eines Drittanbieters, um das Abbruchpopup zu verbessern, und rufen eine Blazor-Methode aus JavaScript auf, um den Echtzeitstatus einer Kundenbestellung zu erhalten.

Klonen der vorhandenen App

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

dotnet --list-sdks

Die daraufhin angezeigte Ausgabe sieht in etwa wie im folgenden Beispiel aus:

8.0.100 [C:\Program Files\dotnet\sdk]
9.0.100 [C:\Program Files\dotnet\sdk]

Stellen Sie sicher, dass eine Version aufgeführt wird, die mit 9 beginnt. Wenn nichts aufgeführt ist oder der Befehl nicht gefunden wurde, installieren Sie das neueste .NET 9.0 SDK.

Weitere Informationen finden Sie unter Erstellen Ihrer ersten Web-App mit ASP.NET Core mit Blazor.

  1. Öffnen Sie Visual Studio Code, und öffnen Sie ein integriertes Terminal, indem Sie im oberen Menü " Terminal>neu" auswählen.

  2. Ändern Sie im Terminal das Verzeichnis, in dem Sie das Projekt erstellen möchten.

  3. 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

  4. Wählen Sie in der oberen Menüleiste "Datei>Ordner öffnen" aus.

  5. Navigieren Sie im Dialogfeld " Ordner öffnen " zum Ordner "BlazingPizza ", und wählen Sie "Ordner auswählen" aus.

    Wenn Visual Studio Code Sie zu fehlenden Ressourcen oder nicht aufgelösten Abhängigkeiten auffordert, wählen Sie "Ja " oder "Wiederherstellen" aus.

  6. Um die App auszuführen und zu überprüfen, ob alles ordnungsgemäß funktioniert, drücken Sie F5 , oder wählen Sie "Debuggen starten">aus.

  7. Wählen Sie in der Web-App einige Pizzas aus, und fügen Sie sie zu Ihrer Bestellung hinzu. Wählen Sie bei einigen Pizzen in Ihrer Bestellliste das X neben einer der Pizzen aus und überprüfen Sie, dass das Element ohne vorherige Bestätigung entfernt wird.

  8. Drücken Sie UMSCHALT+F5, oder wählen Sie Ausführen>Debugging beenden aus, um die App zu beenden.

Umgestalten des Bestellvorgangs

Um JS-Interoperabilität zu verwenden, setzen Sie die IJSRuntime Abstraktion ein.

  1. Erweitern Sie im Explorer von Visual Studio Code Seiten und wählen Sie dann Index.razor aus.

  2. Fügen Sie in der Datei Index.razor nach der @inject OrderState OrderState Anweisung die IJSRuntime Injektion wie folgt hinzu.

    @inject OrderState OrderState
@inject IJSRuntime JavaScript

  3. Derzeit ruft das onclick Ereignis für die Funktionalität zum Entfernen einer Pizza 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>

  4. Fügen Sie in der @code Direktive am Ende der Datei eine neue Methode hinzu, um die systemeigene JavaScript-Funktion confirm aufzurufen. Wenn der Kunde in der Eingabeaufforderung "OK " auswählt, ruft die Methode auf OrderState.RemoveConfiguredPizza , die Pizza aus der Bestellung zu entfernen. Andernfalls bleibt die Pizza in der Bestellung.

    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 clientseitiger Seite aufzurufen. Die Antwort des Aufrufs gibt einen bool Wert zurück. Wenn das Ergebnis des Bestätigungsdialogfelds lautet true, wird die Pizza aus der Bestellung entfernt.

  5. Drücken Sie F5, oder wählen Sie Ausführen>Debugging starten aus.

  6. Fügen Sie in der App Ihrer Bestellung einige Pizzas hinzu.

  7. Wenn Sie einige Pizzas in Ihrer Bestellung haben, wählen Sie das X neben einer der Pizzas aus. Ein Standardmäßiges JavaScript-Bestätigungsdialogfeld wird angezeigt.

    Screenshot des Standardmäßigen JavaScript-Bestätigungsdialogfelds.

  8. Wählen Sie "OK" aus, und vergewissern Sie sich, dass die Pizza aus Ihrer Bestellung entfernt wird. 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 verbleibt.

  9. Drücken Sie UMSCHALT+F5, oder wählen Sie Ausführen>Debugging beenden aus, um die App zu beenden.

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

Das Pizzaunternehmen möchte einen klareren Text auf die Schaltflächen im Bestätigungsdialogfeld und im Dialogfeld ihr Branding und ihre Formatierung anwenden. Nach einigen Recherchen entscheiden Sie sich für die Verwendung einer kleinen JavaScript-Bibliothek namens SweetAlert als guter Ersatz für das Standarddialogfeld.

  1. Erweitern Sie im Visual Studio Code-Explorer die Option Seiten, und wählen Sie dann _Host.cshtml aus.

  2. Fügen Sie am Ende der Datei _Host.cshtml nach der <script src="_framework/blazor.server.js"></script> Zeile, aber vor der </body> Zeile 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 ist jetzt für den Aufruf auf der Clientseite verfügbar.

  3. Um die neue Bibliothek zu verwenden, aktualisieren Sie die RemovePizzaConfirmation Methode in der Datei Index.razor wie folgt.

    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 aus der Drittanbieterreferenz sweetalert.js stammt. Der Code zum Aufrufen der swal Funktion sieht ähnlich aus wie confirm. Die meisten Updates sind in der Art und Weise, wie die Funktion Parameter empfängt. SweetAlert akzeptiert ein JSON-Objekt, das alle benötigten Einstellungen enthält.

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

  5. Stellen Sie sicher, dass das confirm Dialogfeld jetzt zwei Schaltflächen enthält: Nein, in meiner Bestellung belassen und Ja, Pizza entfernen, und dass sie erwartungsgemäß funktionieren.

    Screenshot des Dialogfelds

  6. Drücken Sie UMSCHALT+F5, oder wählen Sie Ausführen>Debugging beenden aus, um die App zu beenden.

Zeigt den Echtzeit-Bestellstatus auf der Bestellseite an

Sobald ein Kunde einen Pizzaauftrag aufgegeben hat, verwendet die Seite "Meine Bestellungen " die OrderDetail Komponente, um den aktuellen Status der Bestellung anzuzeigen. Das Pizzaunternehmen möchte kunden sehen, wie ihre Bestellung in Echtzeit voranschreitet. Sie aktualisieren die Komponente so, dass sie eine .NET-Methode aus JavaScript aufruft, die kontinuierlich den Bestellstatus abruft, bis der Status 'geliefert' angezeigt wird.

  1. Erweitern Sie im Visual Studio Code ExplorerSeiten und wählen Sie dann OrderDetail.razor aus.

  2. Fügen Sie in der Datei "OrderDetail.razor " die folgende Deklaration am Anfang der Komponente unter der letzten @inject Anweisung hinzu.

    @implements IDisposable

    Mit dieser @implements Deklaration können Sie eine Dispose Methode definieren.

  3. Fügen Sie der Seite ein Drehfeld hinzu, um Kund*innen darüber zu informieren, dass die Seite aktualisiert wird. Fügen Sie im <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>
}

  4. 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));

  5. 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.

  6. 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 startet die Abfrage nach dem Rendern der Seite und beendet die Abrufung, wenn die Bestellung übermittelt wird. 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 wird, wird der animierte Spinner entfernt, und die Seite zeigt den endgültigen Bestellstatus an.

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

  8. Bestellen Sie in der App eine Pizza. Wechseln Sie zum Bildschirm "Meine Bestellungen ", und stellen Sie sicher, dass der animierte rote Punkt angezeigt wird, während die Bestellung unvollständig ist und ausgeblendet wird, wenn der Status "Geliefert" angezeigt wird.

    Animation, die den Reihenfolgenstatus in Echtzeit ändert.

  9. Drücken Sie UMSCHALT+F5, oder wählen Sie Ausführen>Debugging beenden aus, um die App zu beenden.