Exercice - Utiliser une bibliothèque JavaScript dans une application Blazor

10 minutes

Une fois qu’un client ajoute une pizza à sa commande, il peut sélectionner une icône X pour supprimer la pizza de la commande sans confirmation. Pour empêcher les clients de supprimer accidentellement des pizzas de leurs commandes, la pizzeria souhaite que vous ajoutiez une invite de confirmation pour supprimer des éléments.

La société de pizza souhaite également que les clients puissent voir comment leur commande progresse en temps réel. Vous devez mettre à jour la page des détails de commande pour interroger en permanence l’état de la commande et fournir aux clients des commentaires sur la mise à jour de la page.

Dans cet exercice, vous étendez l’application existante de la société de livraison de pizzas à l’aide de l’interopérabilité JS depuis un composant Blazor pour appeler JavaScript côté client. Vous intégrez une bibliothèque JavaScript tierce pour améliorer la fenêtre contextuelle d’annulation et appeler une méthode Blazor à partir de JavaScript pour obtenir l’état en temps réel d’une commande client.

Cloner l’application existante

Ce module utilise le Kit de développement logiciel (SDK) .NET 9.0. Vérifiez que .NET 9.0 est installé en exécutant la commande suivante dans votre terminal de commandes préféré :

dotnet --list-sdks

Une sortie semblable à l’exemple suivant s’affiche :

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

Vérifiez que la liste comporte une version commençant par 9. S’il n’y en a pas ou que la commande est introuvable, installez la dernière version du Kit de développement logiciel (SDK) .NET 9.0.

Pour plus d’informations, consultez Créer votre première application web avec ASP.NET Core à l’aide de Blazor.

Ouvrez Visual Studio Code et ouvrez un terminal intégré en sélectionnant Terminal> dans le menu supérieur.
Dans le terminal, accédez au répertoire dans lequel vous souhaitez créer le projet.
Exécutez la commande suivante pour cloner l’application à partir de GitHub vers un sous-répertoire local.
```
git clone https://github.com/MicrosoftDocs/mslearn-build-interactive-components-blazor.git BlazingPizza
```
Dans la barre de menus supérieure, sélectionnez Fichier>ouvrir le dossier.
Dans la boîte de dialogue Ouvrir le dossier , accédez au dossier BlazingPizza , puis sélectionnez Sélectionner un dossier.

Si Visual Studio Code vous invite à connaître les ressources manquantes ou les dépendances non résolues, sélectionnez Oui ou Restaurer.
Pour exécuter l’application et vérifier que tout fonctionne correctement, appuyez sur F5 ou sélectionnez Démarrer>le débogage.
Dans l’application web, sélectionnez des pizzas et ajoutez-les à votre commande. Avec quelques pizzas dans votre liste de commandes, sélectionnez le X en regard d’une des pizzas et vérifiez que l’élément disparaît sans aucune invite.
Appuyez sur Maj+F5 ou sélectionnez Exécuter>Arrêter le débogage pour arrêter l’application.

Refactoriser le processus de commande

Pour utiliser l’interopérabilité JS, vous injectez l’abstraction IJSRuntime .

Dans l’Explorateur Visual Studio Code, développez Pages, puis sélectionnez Index.razor.
Dans le fichier Index.razor , après l’instruction @inject OrderState OrderState , ajoutez l’injection IJSRuntime comme suit.
```
@inject OrderState OrderState
@inject IJSRuntime JavaScript
```
Actuellement, l’événement onclick pour la fonctionnalité de suppression d’une pizza appelle directement la OrderState.RemoveConfiguredPizza(configuredPizza)) méthode. Remplacez l’élément <a @onclick="@(() => OrderState.RemoveConfiguredPizza(configuredPizza))" class="delete-item">❌</a> entier par le code suivant :
```
<button type="button" class="close text-danger" aria-label="Close"
     @onclick="@(async () => await RemovePizzaConfirmation(configuredPizza))">
     <span aria-hidden="true">&times;</span>
</button>
```
Dans la directive @code à la fin du fichier, ajoutez une nouvelle méthode pour appeler la fonction JavaScript confirm native. Si le client sélectionne OK à partir de l’invite, la méthode appelle OrderState.RemoveConfiguredPizza pour supprimer la pizza de la commande. Sinon, la pizza reste dans la commande.
```
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);
    }
}
```
Le serveur utilise la IJSRuntime.InvokeAsync méthode pour appeler la confirm fonction côté client. La réponse de l’appel retourne une bool valeur. Si le résultat de la boîte de dialogue de confirmation est true, la pizza est supprimée de la commande.
Appuyez sur F5 ou sélectionnez Exécuter>Démarrer le débogage.
Dans l’application, ajoutez des pizzas à votre commande.
Avec quelques pizzas dans votre commande, sélectionnez le X à côté de l’une des pizzas. Une boîte de dialogue de confirmation JavaScript standard s’affiche.
Sélectionnez OK et vérifiez que la pizza est supprimée de votre commande. Sélectionnez X en regard d’une autre pizza, sélectionnez Annuler dans la boîte de dialogue de confirmation et vérifiez que la pizza reste dans votre commande.
Appuyez sur Maj+F5 ou sélectionnez Exécuter>Arrêter le débogage pour arrêter l’application.

Ajouter une bibliothèque JavaScript tierce à une application Blazor

La société de pizza souhaite un texte plus clair sur les boutons de la boîte de dialogue de confirmation et souhaite utiliser sa personnalisation et son style dans la boîte de dialogue. Après quelques recherches, vous décidez d’utiliser une petite bibliothèque JavaScript appelée SweetAlert comme un bon remplacement pour la boîte de dialogue standard.

Dans l’Explorateur Visual Studio Code, développez Pages , puis sélectionnez _Host.cshtml.
À la fin du fichier _Host.cshtml , après la <script src="_framework/blazor.server.js"></script> ligne, mais avant la </body> ligne, ajoutez l’élément suivant script pour inclure la bibliothèque SweetAlert.
```
<script src="https://cdn.jsdelivr.net/npm/sweetalert@latest/dist/sweetalert.min.js"></script>
```
La bibliothèque SweetAlert est désormais disponible pour appeler côté client.

Pour utiliser la nouvelle bibliothèque, mettez à jour la RemovePizzaConfirmation méthode dans le fichier Index.razor comme suit.

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

Le "swal" nom est l’identificateur de la fonction JavaScript qui provient de la référence sweetalert.js tierce. Le code pour appeler la fonction swal ressemble à confirm. La plupart des mises à jour concernent la façon dont la fonction reçoit les paramètres. SweetAlert accepte un objet JSON qui inclut tous les paramètres dont il a besoin.

Dans Visual Studio Code, appuyez sur F5 ou sélectionnez Démarrer>le débogage.
Vérifiez que la confirm boîte de dialogue comporte maintenant deux boutons qui disent Non, laissez-le dans mon ordre et Oui, supprimez la pizza et qu’ils fonctionnent comme prévu.
Appuyez sur Maj+F5 ou sélectionnez Exécuter>Arrêter le débogage pour arrêter l’application.

Afficher l’état de l’ordre en temps réel sur la page commande

Une fois qu’un client place une commande de pizza, la page Mes commandes utilise le OrderDetail composant pour afficher l’état actuel de la commande. La société de pizza souhaite que les clients puissent voir comment leur commande progresse en temps réel. Vous mettez à jour le composant pour appeler une méthode .NET depuis JavaScript qui reçoit en continu l’état de la commande jusqu’à ce qu’il indique que la livraison a eu lieu.

Dans l’Explorateur Visual Studio Code, ouvrez Pages puis sélectionnez OrderDetail.razor.
Dans le fichier OrderDetail.razor , ajoutez la déclaration suivante en haut du composant, sous la dernière @inject instruction.
```
@implements IDisposable
```
Cette @implements déclaration vous permet de définir une Dispose méthode.
Ajoutez une boucle de progression pour donner au client un feedback indiquant que la page se met à jour. Dans <div class="track-order-details">, au-dessus de l’instruction @foreach , ajoutez le code suivant :
```
@if (IsOrderIncomplete)
{
    <div class="spinner-grow text-danger float-right" role="status">
        <span class="sr-only">Checking your order status...</span>
    </div>
}
```

Dans la directive @code, sous la déclaration de la propriété OrderId, ajoutez les membres suivants.

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

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

Remplacez la méthode existante OnParametersSetAsync par le code suivant :
```
protected override async Task OnParametersSetAsync() =>
    await GetLatestOrderStatusUpdatesAsync();
```
Le code appelle maintenant la GetLatestOrderStatusUpdatesAsync méthode pour mettre à jour l’état de l’ordre.

Ajoutez les méthodes suivantes après la méthode mise à jour 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();

Le composant OrderDetail commence le sondage après le rendu de la page et arrête le sondage lorsque la commande est livrée. Tant que l’état de la commande indique qu’elle n’est pas terminée, la fonction StartPollingTimerAsync utilise un PeriodicTimer pour attendre l’étape suivante en mode asynchrone. Lorsque la commande est livrée, le spinner animé est supprimé et la page affiche l’état final de la commande.

Dans Visual Studio Code, appuyez sur F5 ou sélectionnez Démarrer>le débogage.
Dans l’application, commandez une pizza. Accédez à l’écran Mes commandes et vérifiez que le point rouge animé s’affiche alors que l’ordre est incomplet et disparaît lorsque l’état affiche Remis.
Appuyez sur Maj+F5 ou sélectionnez Exécuter>Arrêter le débogage pour arrêter l’application.

Commentaires

Cette page a-t-elle été utile ?