Aller au contenu principal

29-10 Confirmation de suppression

Pour le message de confirmation, on pourrait faire usage de Bootstrap directement on encore de confirm en JavaScript. Nous venons d'installer Blazor.Bootstrap, nous pourrions l'utiliser pour afficher un message de confirmation!

Il existe un composant ConfirmDialog dans Blazor.Bootstrap que nous pouvons utiliser pour une situation du genre.

  1. Ajoutez une référence à ConfirmDialog dans le composant Show

    @code {
        [Parameter]
        public int Id { get; set; }

        private string? alertMessage;
        private EvenementDto? _evenementDto;
        private ConfirmDialog _confirmDialog;

  2. Dans le haut de la page, ajoutez une balise ConfirmDialog faisant référence à l'attribut du composant.

    @page "/evenements/{Id:int}"
    @using System.Net
    @using Snowfall.Application.Dtos.Evenements
    @using Snowfall.Web.Admin.HttpClients
    @inject EvenementHttpClient EvenementHttpClient
    @inject ToastService ToastService
    @inject NavigationManager NavigationManager

    //highlight-next-line
    <ConfirmDialog @ref="_confirmDialog" />

  3. Pour afficher le message de confirmation, utilisez ShowAsync sur _confirmationDialog

    Snowfall.Web.Admin/Pages/Evenements/Show.razor
    async Task SupprimerEvenement()
    {
        bool confirmation = await _confirmDialog.ShowAsync(
            title: "Confirmation",
            message1: "Êtes-vous certain de vouloir supprimer cet événement?");

        // ...
    info

    Plusieurs paramètres peuvent être passés, dont un titre et un message.

  4. Si vous essayez, vous remarquerez toutefois que les boutons sont en anglais et que l'événement est supprimé peu importe le bouton appuyé. img

  5. Pour le text des boutons, on peut utiliser un objet d'options

    async Task SupprimerEvenement()
    {
        ConfirmDialogOptions options = new ConfirmDialogOptions
        {
            YesButtonText = "Confirmer",
            NoButtonText = "Annuler"
        };
        
        bool confirmation = await _confirmDialog.ShowAsync(
            title: "Confirmation",
            message1: "Êtes-vous certain de vouloir supprimer cet événement?",
            options);

  6. Finalement, on peut utiliser le retour confirmation pour supprimer ou non. Imgur

    Vous devrez compléter cette portion vous-même. Utilisez la valeur booléenne confirmation pour déclencher le processus de suppression ou non.

Terminé! 😅

Imgur