Messages d’alerte fantastiques utilisant SweetAlert

Apprenez à utiliser SweetAlert2 dans Blazor pour remplacer les alertes JavaScript traditionnelles à quelque chose de plus personnalisé.

Dans cet article, je vous guiderai à travers l’utilisation de SweetAlert2 dans Blazor, un remplacement puissant et magnifique pour les alertes JavaScript traditionnelles. Il est personnalisable à vos besoins et accessible également. Commençons!

Commencer avec SweetAlert2

SweetAlert2 est un projet open-source qui a gagné en popularité au fil des ans. Cela est évident dans ses statistiques, avec plus de 17 500 étoiles sur Github et près de 1,5 milliard de coups de CDN au cours du dernier mois. Je veux noter que bien qu’il existe des packages NuGet faisant référence à SweetAlert2, la plupart d’entre eux ne sont pas mis à jour avec les dernières fonctionnalités. Par conséquent, dans cet article, je vais vous montrer comment utiliser SweetAlert2 sans packages NuGet. Voyons comment nous pouvons utiliser ce projet dans Blazor.

Création d’un exemple de projet

Pour voir l’utilisation de SweetAlert2 dans un cas pratique, je recommande de suivre ce guide, à commencer par créer un projet en utilisant le Application Web Blazor modèle avec un Mode de rendu interactif se mettre à Serveur et Emplacement d’interactivité se mettre à Par page / composant.

Ensuite, complétez les étapes du Commencer Section de la documentation pour configurer correctement le projet avec la progression de l’interface utilisateur de Telerik pour Composants du blazor Nous utiliserons pour une création d’interface utilisateur rapide et facile.

Une fois le projet configuré, créez un nouveau composant de rasoir appelé Tâchesoù vous devez ajouter le code suivant:

@page "/tasks"
@using System.Collections.ObjectModel
@rendermode InteractiveServer
@inject IJSRuntime JSRuntime

<div class="p-3">
    <h3>Tasks Management</h3>
    
    <div class="mb-3 d-flex align-items-start">
        <TelerikTextBox @bind-Value="newTask" Width="300px" Placeholder="New Task" />
        <TelerikButton OnClick="@AddTask" Class="ms-2">
            Add
        </TelerikButton>
    </div>
    
    <TelerikListView TItem="string" Data="@tasks">
        <Template Context="task">
            <div class="d-flex justify-content-between align-items-center">
                @task
                <TelerikButton OnClick="@(() => ConfirmDeleteTask(task))" ThemeColor="Danger">
                    Delete
                </TelerikButton>
            </div>
        </Template>
    </TelerikListView>
</div>

@code {    
    private ObservableCollection<string> tasks = new();

    private string newTask = string.Empty;                    
    
    private void AddTask()
    {
        if (string.IsNullOrWhiteSpace(newTask))
        {
            JSRuntime.InvokeVoidAsync("alert", "The text field cannot be empty");
        }
        else
        {            
            tasks.Add(newTask);
            newTask = string.Empty;
            
            JSRuntime.InvokeVoidAsync("alert", "Task added successfully!");
        }
    }

    private void ConfirmDeleteTask(string task)
    {        
        if (task is not null)
        {
            tasks.Remove(task);
        }

        JSRuntime.InvokeVoidAsync("alert", "Task deleted successfully!");
    }
}

Lorsque vous exécutez l’application et naviguez vers la page des tâches, vous verrez que les fenêtres d’alerte JS traditionnelles sont utilisées, qui ne sont pas esthétiquement agréables:

Voyons comment améliorer l’application à l’aide de SweetAlert2.

Installation de SweetAlert2 via la balise JS

Nous installerons SweetAlert2 en utilisant la balise JS. Pour ce faire, accédez à App.razor fichier et ajouter la ligne suivante à la fin du Body étiqueter:

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

Une fois la balise ci-dessus ajoutée, nous pouvons revenir au Tasks Composant et remplacez l’alerte classique par le code suivant:

JSRuntime.InvokeVoidAsync("Swal.fire", "The text field cannot be empty");

Le code ci-dessus affiche un message d’erreur plus attrayant visuellement:

Voyons maintenant certaines options de personnalisation.

Options de personnalisation utilisant sweetAlert2

Si nous faisons référence au documentation officielle de SweetAlert2, nous pouvons voir de nombreuses options de personnalisation pour les alertes. Par exemple, si nous voulions afficher un titre, un texte et une icône personnalisée dans Blazor, nous pourrions le faire en utilisant le code suivant:

JSRuntime.InvokeVoidAsync("Swal.fire", "Error", "The text field cannot be empty", "error");

Dans le code ci-dessus, après avoir invoqué le fire Méthode, les paramètres représentent le titre, le message et un icône dans leur ordre respectif. En examinant des exemples dans la documentation, nous pouvons voir certains qui sont plus complexes et utiliser un objet de configuration pour modifier l’apparence et le comportement de l’alerte. Par exemple, le code suivant permet la traînée de l’alerte:

Swal.fire({
  title: "Drag me!",
  icon: "success",
  draggable: true
});

Dans Blazor, une façon de recréer cet objet est de créer une classe pour représenter les propriétés de configuration, telles que:

public class SwalOptions
{
    public string Title { get; set; }        
    public string Icon { get; set; }
    public bool Draggable { get; set; }
}

Ensuite, nous créons une instance de configuration avec les valeurs souhaitées et la passons en tant que paramètre au fire méthode:

...
if (string.IsNullOrWhiteSpace(newTask))
{
    var config = new SwalOptions
        {
            Title = "Drag me!",
            Icon = "error",
            Draggable = true
        };            
    JSRuntime.InvokeVoidAsync("Swal.fire", config);
}
...

De cette façon, nous aurons une alerte plus frappante et configurable, qui dans cet exemple, j’ai traîné vers le côté gauche de l’application en utilisant le draggable propriété:

Affichage du contenu HTML

La documentation montre également comment afficher le code HTML personnalisé. Ceci est très utile car nous pourrions, par exemple, ajouter une URL à un bouton pointant vers une autre page pour effectuer une action ou appliquer une personnalisation supplémentaire. Voici un exemple de la documentation:

Swal.fire({
  title: "<strong>HTML <u>example</u></strong>",
  icon: "info",
  html: `
    You can use <b>bold text</b>,
    <a href="#" autofocus>links</a>,
    and other HTML tags
  `,
  showCloseButton: true,
  showCancelButton: true,
  focusConfirm: false,
  confirmButtonText: `
    <i class="fa fa-thumbs-up"></i> Great!
  `,
  confirmButtonAriaLabel: "Thumbs up, great!",
  cancelButtonText: `
    <i class="fa fa-thumbs-down"></i>
  `,
  cancelButtonAriaLabel: "Thumbs down"
});

Pour représenter le code ci-dessus dans Blazor, nous pouvons définir une classe de configuration comme celle-ci:

public class SwalOptions
{
    public string Title { get; set; }
    public string Icon { get; set; }
    public string Html { get; set; }
    public bool ShowCloseButton { get; set; }
    public bool ShowCancelButton { get; set; }
    public bool FocusConfirm { get; set; }
    public string ConfirmButtonText { get; set; }
    public string ConfirmButtonAriaLabel { get; set; }
    public string CancelButtonText { get; set; }
    public string CancelButtonAriaLabel { get; set; }
}

Ensuite, nous définissons les valeurs de l’objet de configuration et l’utilisons comme suit:

if (string.IsNullOrWhiteSpace(newTask))
{
    var options = new SwalOptions
        {
            Title = "<strong>HTML <u>example</u></strong>",
            Icon = "info",
            Html = @"
                You can use <b>bold text</b>,
                <a href="#" autofocus>links</a>,
                and other HTML tags",
            ShowCloseButton = true,
            ShowCancelButton = true,
            FocusConfirm = false,
            ConfirmButtonText = @"
                <i class="fa fa-thumbs-up"></i> Great!",
            ConfirmButtonAriaLabel = "Thumbs up, great!",
            CancelButtonText = @"<i class="fa fa-thumbs-down"></i>",
            CancelButtonAriaLabel = "Thumbs down"
        };

    JSRuntime.InvokeVoidAsync("Swal.fire", options);
}

Lors de l’exécution de l’application avec le code ci-dessus implémenté, nous verrons une alerte hautement personnalisée:

Répondre aux événements boutonnés

SweetAlert2 est sans aucun doute un excellent outil pour afficher esthétiquement des messages d’alerte aux utilisateurs. Cependant, il ne serait pas très utile si nous ne pouvions pas effectuer des tâches lorsqu’un bouton est enfoncé. Par exemple, dans la documentation, nous pouvons trouver l’extrait suivant:

Swal.fire({
  title: "Do you want to save the changes?",
  showDenyButton: true,
  showCancelButton: true,
  confirmButtonText: "Save",
  denyButtonText: `Don't save`
}).then((result) => {
  if (result.isConfirmed) {
    Swal.fire("Saved!", "", "success");
  } else if (result.isDenied) {
    Swal.fire("Changes are not saved", "", "info");
  }
});

Dans le code ci-dessus, nous voyons des actions liées au bouton appuyé. Pour implémenter ce comportement dans Blazor, nous créerons un dossier nommé js à l’intérieur wwwrootpuis créer un code.js fichier où nous implémenterons la logique javascript que nous voulons reproduire:

function showSweetAlertWithCallback(options, dotNetObject) {
    Swal.fire(options).then((result) => {
        if (result.isConfirmed) {
            dotNetObject.invokeMethodAsync('OnConfirm');
        } else if (result.isDenied) {
            dotNetObject.invokeMethodAsync('OnDeny');
        } else if (result.isDismissed) {
            dotNetObject.invokeMethodAsync('OnCancel');
        }
    });
}

Tu peux voir ça dotNetObject est utilisé dans le script ci-dessus, qui nous permet d’invoquer des méthodes définies dans le code C # de JavaScript via le invokeMethodAsync méthode.

L’étape suivante consiste à enregistrer le fichier de script à partir de App.razorpar exemple, à la fin du Body étiqueter:

<body>
    <Routes />
    <script src="_framework/blazor.web.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script src="js/code.js"></script>
</body>

Ensuite, créons les méthodes en code C # qui répondront aux événements du bouton SweetAlert2. Pour s’assurer que le code fonctionne correctement, le JSInvokable L’attribut doit être utilisé pour les méthodes qui seront invoquées à partir de JavaScript. Comme démonstration, lorsque les boutons de confirmation ou de déni seront enfoncés, je vais afficher une deuxième alerte:

[JSInvokable]
public async Task OnConfirm()
{
    await JSRuntime.InvokeVoidAsync("Swal.fire", new
    {
        title = "Information",
        text = "Task saved successfully!",
        icon = "success"
    });
}
[JSInvokable]
public async Task OnDeny()
{
    await JSRuntime.InvokeVoidAsync("Swal.fire", new
    {
        title = "Information",
        text = "Changes are not saved",
        icon = "info"
    });
}    
[JSInvokable]
public void OnCancel()
{
    Console.WriteLine("Action was canceled by the user.");
}

Enfin, nous invoquons la fonction JS en utilisant le InvokeVoidAsync Méthode, passant comme paramètres le nom de la fonction, les options (définies ici via une classe anonyme) et, très important encore, un DotNetObjectReference Référence à l’objet où les méthodes à utiliser à partir de JS sont définies.

Puisque, dans notre exemple, les méthodes sont dans le composant, nous passons le this référence au Create méthode. Cela permet à l’objet .NET d’être converti en une référence gérable par JavaScript:

if (string.IsNullOrWhiteSpace(newTask))
{
    var options = new
    {
        title = "Do you want to save the changes?",
        showDenyButton = true,
        showCancelButton = true,
        confirmButtonText = "Save",
        denyButtonText = "Don't save"
    };

    JSRuntime.InvokeVoidAsync("showSweetAlertWithCallback", options, DotNetObjectReference.Create(this));
}

Lorsque vous exécutez l’application à nouveau, nous obtiendrons une interaction lorsque nous appuyons sur l’un des boutons:

C’est ainsi que nous pouvons répondre aux boutons définis dans SweetAlert2.

Conclusion

Tout au long de cet article, vous avez appris à utiliser SweetAlert2 dans les projets Blazor, de l’installation et de l’utilisation sous sa forme la plus simple, aux options de personnalisation, et enfin, en répondant aux événements boutonnés. C’est maintenant à votre tour de devenir pratique et d’améliorer vos interfaces graphiques en intégrant cette bibliothèque puissante dans vos projets.

Si vous n’utilisez pas déjà Telerik UI pour Blazor, n’oubliez pas qu’il est livré avec un essai gratuit de 30 jours.

Commencer