Övning – Använda ett JavaScript-bibliotek i en Blazor-app

10 minuter

När en kund har lagt till en pizza i sin beställning kan de välja en X-ikonen för att ta bort pizzan från beställningen utan bekräftelse. För att förhindra kunder från att oavsiktligt ta bort pizzor från sina beställningar vill pizzaföretaget att du lägger till en bekräftelseprompt för borttagning av objekt.

Pizzabolaget vill också att kunderna ska se hur deras beställning utvecklas i realtid. Du måste uppdatera orderinformationssidan för att kontinuerligt fråga efter orderstatus och ge kunderna feedback om att sidan uppdateras.

I den här övningen utökar du pizzaleveransföretagets befintliga app med hjälp av JS-interop från en Blazor-komponent för att anropa JavaScript på klientsidan. Du integrerar med ett JavaScript-bibliotek från tredje part för att förbättra popup-fönstret för annullering och anropar en Blazor-metod från JavaScript för att få realtidsstatus för en kundbeställning.

Klona den befintliga appen

I den här modulen används .NET 9.0 SDK. Kontrollera att du har .NET 9.0 installerat genom att köra följande kommando i önskad kommandoterminal:

dotnet --list-sdks

Utdata som liknar följande exempel visas:

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

Kontrollera att en version som börjar med 9 visas. Om inget visas eller om kommandot inte hittas installerar du den senaste .NET 9.0 SDK:t.

Mer information finns i Skapa din första webbapp med ASP.NET Core med Blazor.

Öppna Visual Studio Code och öppna en integrerad terminal genom att välja Terminal>New Terminal på den översta menyn.
I terminalen ändrar du till den katalog där du vill skapa projektet.

Kör följande kommando för att klona appen från GitHub till en lokal underkatalog.

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

I den översta menyraden väljer du Arkiv>Öppna mapp.
I dialogrutan Öppna mapp bläddrar du till mappen BlazingPizza och väljer Välj mapp.

Om Visual Studio Code frågar dig om saknade tillgångar eller olösta beroenden väljer du Ja eller Återställ.
Om du vill köra appen och kontrollera att allt fungerar korrekt trycker du på F5 eller väljer Kör>Starta felsökning.
I webbappen väljer du några pizzor och lägger till dem i din beställning. Med några pizzor i din beställningslista väljer du X- bredvid en av pizzorna och kontrollerar att objektet försvinner utan någon uppmaning.
Tryck på Skift+F5 eller välj Kör>Sluta felsöka för att stoppa appen.

Omstrukturera orderprocessen

Om du vill använda JS interop matar du in IJSRuntime abstraktion.

I Visual Studio Code Explorerexpanderar du Pages och väljer sedan Index.razor.
I filen Index.razor, lägg till @inject OrderState OrderState-injektionen efter IJSRuntime-instruktionen enligt följande.
```
@inject OrderState OrderState
@inject IJSRuntime JavaScript
```
onclick För närvarande anropar OrderState.RemoveConfiguredPizza(configuredPizza)) händelsen för funktionen för att ta bort en pizza metoden direkt. Ersätt hela <a @onclick="@(() => OrderState.RemoveConfiguredPizza(configuredPizza))" class="delete-item">❌</a>-elementet med följande kod:
```
<button type="button" class="close text-danger" aria-label="Close"
     @onclick="@(async () => await RemovePizzaConfirmation(configuredPizza))">
     <span aria-hidden="true">&times;</span>
</button>
```
I @code-direktivet i slutet av filen lägger du till en ny metod för att anropa den interna JavaScript-confirm-funktionen. Om kunden väljer OK från prompten anropar metoden OrderState.RemoveConfiguredPizza för att ta bort pizzan från ordern. Annars är pizzan kvar i beställningen.
```
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);
    }
}
```
Servern använder metoden IJSRuntime.InvokeAsync för att anropa funktionen confirm på klientsidan. Svaret från anropet returnerar ett bool värde. Om resultatet av bekräftelsedialogrutan är truetas pizzan bort från ordern.
Tryck på F5 eller välj Kör>Starta felsökning.
Lägg till några pizzor i din beställning i appen.
Med några pizzor i din beställning väljer du X bredvid en av pizzorna. En standarddialogruta för JavaScript-bekräftelse visas.
Välj OK och kontrollera att pizzan har tagits bort från din beställning. Välj X bredvid en annan pizza, välj Avbryt i bekräftelsedialogrutan och kontrollera att pizzan förblir i din ordning.
Tryck på Skift+F5 eller välj Kör>Sluta felsöka för att stoppa appen.

Lägga till ett JavaScript-bibliotek från tredje part i en Blazor-app

Pizzaföretaget vill ha tydligare text på knapparna i bekräftelsedialogrutan och vill använda sitt varumärke och sin stil i dialogrutan. Efter lite efterforskningar bestämmer du dig för att använda ett litet JavaScript-bibliotek med namnet SweetAlert som en bra ersättning för standarddialogrutan.

I Visual Studio Code Explorerexpanderar du Pages och väljer sedan _Host.cshtml.
I slutet av filen _Host.cshtml, efter raden <script src="_framework/blazor.server.js"></script> men före raden </body>, lägger du till följande script-element för att inkludera SweetAlert-biblioteket.
```
<script src="https://cdn.jsdelivr.net/npm/sweetalert@latest/dist/sweetalert.min.js"></script>
```
Biblioteket SweetAlert är nu tillgängligt för anrop på klientsidan.

Om du vill använda det nya biblioteket uppdaterar du metoden RemovePizzaConfirmation i filen Index.razor enligt följande.

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);
    }
}

Namnet "swal" är JavaScript-funktionens identifierare som kommer från referensen sweetalert.js från tredje part. Koden för att anropa funktionen swal ser ut ungefär som confirm. Det mesta av uppdateringen finns i hur funktionen tar emot parametrar. SweetAlert accepterar ett JSON-objekt som innehåller alla inställningar som behövs.

I Visual Studio Code trycker du på F5 eller väljer Kör>Starta felsökning.
Kontrollera att dialogrutan confirm nu har två knappar som säger Nej, lämna den i min beställning och Ja, ta bort pizzanoch att de fungerar som förväntat.
Tryck på Skift+F5 eller välj Kör>Sluta felsöka för att stoppa appen.

Visa orderstatus i realtid på ordersidan

När en kund lägger en pizzabeställning använder sidan Mina beställningar komponenten OrderDetail för att visa beställningens aktuella status. Pizzaföretaget vill att kunderna ska se hur deras beställning går framåt i realtid. Du uppdaterar komponenten för att anropa en .NET-metod från JavaScript som kontinuerligt hämtar orderstatusen tills statusen visas levererad.

I Visual Studio Code Explorerexpanderar du Pages och väljer sedan OrderDetail.razor.
I filen OrderDetail.razor lägger du till följande deklaration överst i komponenten under den sista @inject-instruktionen.
```
@implements IDisposable
```
Med den här @implements-deklarationen kan du definiera en Dispose-metod.

Lägg till en spinnare på sidan för att ge kunden feedback om att sidan uppdateras. Lägg till följande kod i <div class="track-order-details">ovanför @foreach-instruktionen:

@if (IsOrderIncomplete)
{
    <div class="spinner-grow text-danger float-right" role="status">
        <span class="sr-only">Checking your order status...</span>
    </div>
}

Under @code-direktivet, lägg till följande medlemmar under OrderId egenskapsdeklaration.

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

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

Ersätt den befintliga metoden OnParametersSetAsync med följande kod:
```
protected override async Task OnParametersSetAsync() =>
    await GetLatestOrderStatusUpdatesAsync();
```
Koden anropar nu metoden GetLatestOrderStatusUpdatesAsync för att uppdatera orderstatusen.

Lägg till följande metoder efter den uppdaterade OnParametersSetAsync-metoden.

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();

Komponenten OrderDetail startar avsökningen efter att sidan återges och stoppar avsökningen när ordern levereras. Även om orderstatusen är ofullständig använder funktionen StartPollingTimerAsync en PeriodicTimer för att vänta asynkront på nästa tick. När ordern levereras tas den animerade spinnaren bort och sidan visar den slutliga orderstatusen.

I Visual Studio Code trycker du på F5 eller väljer Kör>Starta felsökning.
I appen beställer du en pizza. Gå till skärmen Mina beställningar och kontrollera att den animerade röda punkten visas medan beställningen är ofullständig och försvinner när statusen visar Levererad.
Tryck på Skift+F5 eller välj Kör>Sluta felsöka för att stoppa appen.

Feedback

Var den här sidan till hjälp?