Aller au contenu principal

29-6 Erreurs et rétroaction

Si la sauvegarde est un succès, il serait bien de:

  • Rediriger l'utilisateur vers l'événement nouvellement créé
  • Afficher un message comme quoi la sauvegarde a été un succès

Et dans le cas d'une erreur inconnue:

  • Afficher un message indiquant que la sauvegarde n'a pas été possible.

Succès: rediriger vers Show​

En cas de succès, on redirigera vers le détail de l'événement (Show).

Pour se faire, on peut utiliser le NavigationManager de Blazor, qu'on doit injecter dans la page via @inject.

  1. Injecter le NavigationManager dans la page
    Snowfall.Web.Admin/Pages/Evenements/New.razor
    @page "/evenements/new"
    @using Microsoft.Extensions.Localization
    @using Snowfall.Application.Dtos.Evenements
    @using Snowfall.Application.Dtos.Villes
    @using Snowfall.Web.Admin.HttpClients
    @using Snowfall.Web.Admin.Resources
    @inject IStringLocalizer<Resources.Evenements.New> Localizer;
    @inject IStringLocalizer<SharedResources> LocalizerShared;
    @inject VilleHttpClient VilleHttpClient;
    @inject EvenementHttpClient EvenementHttpClient;
    @inject NavigationManager NavigationManager;

    <!-- ... -->
  2. Dans le cas d'un succès, rediriger vers l'index des événements
    Snowfall.Web.Admin/Pages/Evenements/New.razor
    <!-- ... -->

    async Task GererSubmit()
    {
        var evenement = await EvenementHttpClient.CreerEvenement(_creerEvenementDto);
        if (evenement != null)
        {
            NavigationManager.NavigateTo($"/evenements/{evenement.Id}");
        }
    }

    <!-- ... -->

Test​

Vous pouvez tester. Normalement, vous devriez être redirigé vers la page de détails de l'événement que vous venez de créer.

Erreur: rétroaction utilisateur​

Pour afficher des messages d'erreur génériques ou encore des messages de succès génériques, on utilisera une librairie permettant de faciliter l'affichage de ce genre de message.

En l'occurrence: Blazor.Bootstrap. Cette librairie implémente les composants traditionnellement JavaScript de Bootstrap en une série de composants compatibles avec Blazor et facilement intégrable dans votre application. Cette librairie implémente entre autres le concept d'interface de Toast, soit des notifications qui apparaissent et peuvent s'empiler dans l'écran. Elles portent le nom de toast puisqu'elles s'apparentent à une toast qui sort du grille-pain.

Installation et configuration de Blazor.Bootstrap​

  1. Sous le projet Admin -> Manage Nuget Packages
  2. Faire une recherche pour Blazor.Bootstrap
  3. Installer la librairie dans le projet
  4. Ajoutez le JavaScript requis à wwwroot/index.html
    Snowfall.Web.Admin/wwwroot/index.html
    <!-- ... -->
        <div id="blazor-error-ui">
            An unhandled error has occurred.
            <a href="." class="reload">Reload</a>
            <span class="dismiss">🗙</span>
        </div>
        <script src="_framework/blazor.webassembly.js"></script>
        <script src="_content/Blazor.Bootstrap/blazor.bootstrap.js"></script>
        <script src="dist/assets/app.js"></script>
    </body>
  5. Enregistrez le service à la liste de services dans Program.cs
    Snowfall.Web.Admin/Program.cs
    builder.Services.AddBlazorBootstrap();
  6. Ajoutez le helper à _Imports.razor
    Snowfall.Web.Admin/_Imports.razor
    @using System.Net.Http
    @using System.Net.Http.Json
    @using Microsoft.AspNetCore.Components.Forms
    @using Microsoft.AspNetCore.Components.Routing
    @using Microsoft.AspNetCore.Components.Web
    @using Microsoft.AspNetCore.Components.Web.Virtualization
    @using Microsoft.AspNetCore.Components.WebAssembly.Http
    @using Microsoft.JSInterop
    @using Snowfall.Web.Admin
    @using Snowfall.Web.Admin.Layout
    @using Snowfall.Web.Admin.Components
    @using Microsoft.AspNetCore.Components.Forms
    @using BlazorBootstrap;
  7. Ajoutez un composant Toast qui sera réutilisable dans l'application dans MainLayout
    Snowfall.Web.Admin/Layout/MainLayout.razor
    @inherits LayoutComponentBase

    <Navbar></Navbar>

    <div class="container">
        <main role="main" class="pb-3">
            @Body
        </main>
    </div>

    <Toasts class="p-3" AutoHide="true" Delay="4000" Placement="ToastsPlacement.TopRight" />
  8. Rendre la variable bootstrap globale pour qu'elle puisse être utilisée par Blazor.Bootstrap
    Snowfall.Web.Admin/assets/js/app.js
    import 'vite/modulepreload-polyfill'

    // Notre Scss, contenant Bootstrap
    import '../scss/app.scss'

    // Importation du JavaScript de Bootstrap
    import * as bootstrap from 'bootstrap'
    window.bootstrap = bootstrap;

Injection de ToastService dans la page New​

Pour utiliser le système de notification, on doit injecter à la page ToastService.

Snowfall.Web.Admin/Pages/Evenements/New.razor
@page "/evenements/new"
@using Microsoft.Extensions.Localization
@using Snowfall.Application.Dtos.Evenements
@using Snowfall.Application.Dtos.Villes
@using Snowfall.Web.Admin.HttpClients
@using Snowfall.Web.Admin.Resources
@inject IStringLocalizer<Resources.Evenements.New> Localizer;
@inject IStringLocalizer<SharedResources> LocalizerShared;
@inject VilleHttpClient VilleHttpClient;
@inject EvenementHttpClient EvenementHttpClient;
@inject NavigationManager NavigationManager;
@inject ToastService ToastService

<!-- ... -->

Utilisation du Toast pour afficher des messages​

Finalement, on peut utiliser le tout pour afficher des messages à l'utilisateur!

Snowfall.Web.Admin/Pages/Evenements/New.razor
<!-- ... -->

async Task GererSubmit()
{
    var evenement = await EvenementHttpClient.CreerEvenement(_creerEvenementDto);
    if (evenement != null)
    {
        ToastService.Notify(new(ToastType.Success, "L'événement a été créé!"));
        NavigationManager.NavigateTo($"/evenements/{evenement.Id}");
    }
    else
    {
        ToastService.Notify(new(ToastType.Danger, "Une erreur est survenue!"));
    }
}

<!-- ... -->
attention

Vous devrez probablement rafraichir l'application à l'aide de CTRL + F5 dans votre navigateur pour que la version en cache du fichier index.html soit renouvelée.

Test​

Test de succès​

Pour tester que le toast de succès s'affiche correctement, rien de plus simple que de remplir le formulaire correctement. Le résultat devrait ressembler à ceci:

http://localhost:4200
info

Le style et le positionnement sera un peu différent, la capture d'écran n'est pas à jour avec la plus récenter version que nous utilisons.

Test d'échec​

Pour faire échouer la requête, on peut envoyer un formulaire incomplet. Pour se faire, vous pouvez remplacer OnValidSubmit par OnSubmit dans la composante du formulaire, ce qui aura pour effet de désactiver la validation automatique.

Snowfall.Web.Admin/Pages/Evenements/New.razor
<EditForm Model="_creerEvenementDto" OnSubmit="GererSubmit">

Ensuite, soumettre le formulaire incomplet aura pour effet de faire afficher le message.

http://localhost:4200
attention

N'oubliez pas de remettre OnValidSubmit pour retrouver les validations!