Esercizio - Usare una libreria JavaScript in un'app Blazor

10 minuti

Dopo che un cliente aggiunge una pizza al suo ordine, può selezionare un'icona X per rimuovere la pizza dall'ordine senza conferma. Per impedire ai clienti di rimuovere accidentalmente le pizze dai loro ordini, l'azienda di pizza vuole aggiungere una richiesta di conferma per la rimozione degli articoli.

L'azienda di pizza vuole anche che i clienti vedano il loro ordine in tempo reale. È necessario aggiornare la pagina dei dettagli dell'ordine per controllare continuamente lo stato dell'ordine e fornire ai clienti il feedback che la pagina si sta aggiornando.

In questo esercizio, usando l'interoperabilità JS di un componente Blazor per chiamare JavaScript sul lato client estenderemo l'app esistente dell’azienda di pizze a domicilio. Si integra con una libreria JavaScript di terze parti per migliorare il popup di annullamento e invocare un metodo Blazor dal JavaScript per ottenere lo stato in tempo reale di un ordine di un cliente.

Clonare l'app esistente

Questo modulo usa .NET 9.0 SDK. Assicurarsi di avere installato .NET 9.0 eseguendo il comando seguente nel terminale dei comandi preferito:

dotnet --list-sdks

Verrà visualizzato un output simile all'esempio seguente:

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

Assicurarsi che sia elencata una versione che inizia con 9. Se il comando non è presente nell'elenco o non viene trovato, installare la versione più recente di .NET 9.0 SDK.

Per altre informazioni, vedere Creare la prima app Web con ASP.NET Core con Blazor.

Aprire Visual Studio Code e aprire un terminale integrato selezionando Terminale>Nuovo terminale dal menu in alto.
Nel terminale passare alla directory in cui si vuole creare il progetto.

Eseguire il comando seguente per clonare l'app da GitHub in una sottodirectory locale.

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

Nella barra dei menu in alto selezionare File>Apri cartella.
Nella finestra di dialogo Apri cartella passare alla cartella BlazingPizza e selezionare Seleziona cartella.

Se Visual Studio Code richiede risorse mancanti o dipendenze non risolte, selezionare Sì o Ripristina.
Per eseguire l'app e verificare che tutto funzioni correttamente, premere F5 o selezionare Avvia>debug.
Nell'app Web selezionare alcune pizze e aggiungerle all'ordine. Con alcune pizze nell'elenco degli ordini, selezionare la X accanto a una delle pizze e verificare che l'elemento scompaia senza alcuna richiesta.
Premere MAIUSC+F5 o selezionare Esegui>arresta debug per arrestare l'app.

Ristrutturare il processo d'ordine

Per usare l'interoperabilità JS, inserire l'astrazione IJSRuntime .

In Visual Studio Code Esplora, espandere Pagine e quindi selezionare Index.razor.
Nel file Index.razor, dopo l'istruzione @inject OrderState OrderState, aggiungere l'inserimento IJSRuntime come indicato di seguito.
```
@inject OrderState OrderState
@inject IJSRuntime JavaScript
```
Attualmente, l'evento onclick per la funzionalità di rimozione di una pizza chiama il metodo OrderState.RemoveConfiguredPizza(configuredPizza)) direttamente. Sostituire l'intero elemento <a @onclick="@(() => OrderState.RemoveConfiguredPizza(configuredPizza))" class="delete-item">❌</a> con il codice seguente:
```
<button type="button" class="close text-danger" aria-label="Close"
     @onclick="@(async () => await RemovePizzaConfirmation(configuredPizza))">
     <span aria-hidden="true">&times;</span>
</button>
```
@code Nella direttiva alla fine del file aggiungere un nuovo metodo per chiamare la funzione JavaScript confirm nativa. Se il cliente seleziona OK dal prompt, il metodo chiama OrderState.RemoveConfiguredPizza per rimuovere la pizza dall'ordine. In caso contrario, la pizza rimane nell'ordine.
```
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);
    }
}
```
Il server usa il IJSRuntime.InvokeAsync metodo per chiamare la confirm funzione sul lato client. La risposta dalla chiamata restituisce un bool valore. Se il risultato della finestra di dialogo di conferma è true, la pizza viene rimossa dall'ordine.
Premere F5 o selezionare Esegui>avvia debug.
Nell'app aggiungere alcune pizze all'ordine.
Con alcune pizze nell'ordine, selezionare la X accanto a una delle pizze. Viene visualizzata una finestra di dialogo di conferma JavaScript standard.
Selezionare OK e verificare che la pizza sia stata rimossa dall'ordine. Selezionare X accanto a un'altra pizza, selezionare Annulla nella finestra di dialogo di conferma e verificare che la pizza rimanga nell'ordine.
Premere MAIUSC+F5 o selezionare Esegui>arresta debug per arrestare l'app.

Aggiungere una libreria JavaScript di terze parti a un'app Blazor

L'azienda pizza vuole testo più chiaro sui pulsanti nella finestra di dialogo di conferma e vuole usare il marchio e lo stile nella finestra di dialogo. Dopo alcune ricerche, si decide di usare una piccola libreria JavaScript denominata SweetAlert come buona sostituzione per il dialogo standard.

In Esplora di Visual Studio Code, espandi Pagine e quindi seleziona _Host.cshtml.
Alla fine del file _Host.cshtml , dopo la <script src="_framework/blazor.server.js"></script> riga ma prima della </body> riga, aggiungere l'elemento seguente script per includere la libreria SweetAlert.
```
<script src="https://cdn.jsdelivr.net/npm/sweetalert@latest/dist/sweetalert.min.js"></script>
```
La libreria SweetAlert è ora disponibile da utilizzare sul lato client.

Per usare la nuova libreria, aggiornare il RemovePizzaConfirmation metodo nel file Index.razor come indicato di seguito.

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

Il "swal" nome è l'identificatore della funzione JavaScript proveniente dal riferimento sweetalert.js di terze parti. Il codice per chiamare la swal funzione è simile a confirm. La maggior parte dell'aggiornamento consiste nel modo in cui la funzione riceve i parametri. SweetAlert accetta un oggetto JSON che include tutte le impostazioni necessarie.

In Visual Studio Code, premere F5 o selezionare Esegui>Avvia debug.
Verificare che la finestra di dialogo confirm abbia ora due pulsanti che dicano No, lasciarlo nell'ordine e Sì, rimuovere la pizza e che funzionino come previsto.
Premere MAIUSC+F5 o selezionare Esegui>arresta debug per arrestare l'app.

Visualizzare lo stato dell'ordine in tempo reale nella pagina dell'ordine

Una volta che un cliente inserisce un ordine di pizza, la pagina Ordini personali usa il OrderDetail componente per visualizzare lo stato corrente dell'ordine. L'azienda di pizza vuole che i clienti possano monitorare in tempo reale lo stato di avanzamento del loro ordine. Il componente viene aggiornato per richiamare un metodo .NET da JavaScript che ottiene in modo continuo lo stato dell'ordine fino a quando non viene visualizzato lo stato di consegna.

In Esplora di Visual Studio Code, espandere Pagine e quindi selezionare OrderDetail.razor.
Nel file OrderDetail.razor aggiungere la dichiarazione seguente all'inizio del componente, sotto l'ultima @inject istruzione.
```
@implements IDisposable
```
Questa @implements dichiarazione consente di definire un Dispose metodo.
Aggiungete una rotellina alla pagina per fornire al cliente feedback sullo stato di aggiornamento della pagina. In <div class="track-order-details">, sopra l'istruzione @foreach aggiungere il codice seguente:
```
@if (IsOrderIncomplete)
{
    <div class="spinner-grow text-danger float-right" role="status">
        <span class="sr-only">Checking your order status...</span>
    </div>
}
```

Nella direttiva @code, sotto la dichiarazione della proprietà OrderId, aggiungere i seguenti membri.

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

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

Sostituire il metodo esistente OnParametersSetAsync con il codice seguente:
```
protected override async Task OnParametersSetAsync() =>
    await GetLatestOrderStatusUpdatesAsync();
```
Il codice chiama ora il GetLatestOrderStatusUpdatesAsync metodo per aggiornare lo stato dell'ordine.

Aggiungere i metodi seguenti dopo il metodo aggiornato OnParametersSetAsync .

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

Il componente OrderDetail avvia il polling dopo il rendering della pagina e interrompe il polling quando l'ordine è consegnato. Mentre lo stato dell'ordine è incompleto, la funzione StartPollingTimerAsync usa un PeriodicTimer per attendere in modo asincrono il tick successivo. Quando l'ordine viene recapitato, l'indicatore animato viene rimosso e la pagina mostra lo stato finale dell'ordine.

In Visual Studio Code, premere F5 o selezionare Esegui>Avvia debug.
Nell'app ordinare una pizza. Passare alla schermata Ordini personali e verificare che il punto rosso animato venga visualizzato mentre l'ordine è incompleto e scompare quando lo stato viene visualizzato Recapitato.
Premere MAIUSC+F5 o selezionare Esegui>arresta debug per arrestare l'app.

Commenti e suggerimenti

Questa pagina è stata utile?