Añadir alertas usando SweetAlert en una Aplicación web con ASP.NET Framework.

Pese a que ya estamos en la versión .NET5 , aún tenemos proyectos en .NET Framework, y aunque no es obligatorio siempre queremos que nuestra aplicación web se vea lo mejor posible.

Un plus que podemos añadir a nuestro proyecto es colocar alertas cuando el usuario realice alguna acción, esto los logramos con SweetAlert, que nos presenta estas alertas de forma muy bonita y llamativa, como lo vamos a ver al final.

En esta ocasión te traigo un tutorial de como implementarlo en nuestro proyecto. Vamos a ello.

Vamos a necesitar

• Los archivos de SweetAlert (css, js).
• Tu aplicación web desarrollada con .NET Framework.

Los pasos que vamos a seguir son los siguientes.

1. Descargar los archivos de SweetAlert.
2. Agregar los archivos en el proyecto
3. Crear una clase de tipo Enum con los Tipos de Notificación
4. Agregar un controlador Base y añadir configuraciones.
5. Crear una vista parcial con conf. de SweetAlert.
6. Configurar el Layout.
7. Llamar la alerta en el controlador.
8. Visualizar la alerta.

1. Descargar los archivos de SweetAlert

Puedes descargarte los archivos aquí, existe otras formas que se muestra en la documentación oficial pero yo lo voy a realizar directamente con los archivos.

2. Agregar los archivos en el proyecto

Ahora vamos a abrir nuestro proyecto en Visual Studio, y colocaremos los archivos en las carpetas respectivas.
El archivo sweetalert.css lo colocamos en la carpeta "Content"
El archivo sweetalert.js lo colocamos en la carpeta "Scripts"
como se muestra a continuación.

3. Crear una clase de tipo Enum con los Tipos de Notificación

Esta clase contendrá los "tipos" de notificación que tendrá la acción, como.
succes, error etc.

Para esto creamos una clase, yo lo voy a colocar en la carpeta "Models".

Y colocamos el siguiente código

namespace AppWebWithSweetAlert.Models
{
    public class Enum
    {
        public enum NotificationType
        {
            error,
            success,
            warning,
            info
        }
    }
}

Si quieres saber como funcionan los "Enum" te recomiendo este artículo

4. Agregar un controlador Base y añadir configuraciones.

En la carpeta "Controlers" vamos a añadir un controlador que tendrá de nombre BaseController.

Si ya tienes un controlador Base, simplemente agrega las líneas que coloco a Continuación.

using System.Web.Mvc;
using static AppWebWithSweetAlert.Models.Enum;

namespace AppWebWithSweetAlert.Controllers
{
    public class BaseController : Controller
    {
        public void Alert(string message, NotificationType notificationType)
        {
            var msg = "<script language='javascript'>Swal.fire('" + notificationType.ToString().ToUpper() + "', '" + message + "','" + notificationType + "')" + "</script>";
            //var msg = "<script language='javascript'>Swal.fire({title:'',text: '" + message + "',type:'" + notificationType + "',allowOutsideClick: false,allowEscapeKey: false,allowEnterKey: false})" + "</script>";
            TempData["notification"] = msg;
        }

        /// </summary>
        /// <param name="message">The message to display to the user.</param>
        /// <param name="notifyType">The type of notification to display to the user: Success, Error or Warning.</param>
        public void Message(string message, NotificationType notifyType)
        {
            TempData["Notification2"] = message;

            switch (notifyType)
            {
                case NotificationType.success:
                    TempData["NotificationCSS"] = "alert-box success";
                    break;
                case NotificationType.error:
                    TempData["NotificationCSS"] = "alert-box errors";
                    break;
                case NotificationType.warning:
                    TempData["NotificationCSS"] = "alert-box warning";
                    break;

                case NotificationType.info:
                    TempData["NotificationCSS"] = "alert-box notice";
                    break;
            }
        }
    }
}

creado ya nuestro controlador Base, Todos los controladores deberán heredar de la clase BaseController y no de Controller que es la que viene por defecto.

5. Crear una vista parcial para el despliegue de la Alerta.

Vamos a crear una vista parcial, esta servirá para mostrar la notificación de alerta que configuramos en el BASECONTROLLER, TempData["notificación"] = msg;

Esta la creamos en la carpeta "/Views/Shared" y la nombramos como _NotificationPanel

Ya en el archivo colocamos el siguiente código

@if (TempData["notification"] != null)
{
@Html.Raw(TempData["notification"])}

6. Configurar el Layout.

En .Net Framework tenemos un archivo llamado BundleConfig.cs podemos también añadir las referencias de los archivos .css y js o directamente en el _Layout(archivo, plantilla base que será utilizada en todas las vistas, como una "página maestra") como se muestra a continuación.
Realizamos un llamado normal

<link href="~/Content/sweetalert2.css" rel="stylesheet" />    
    <script src="~/Scripts/sweetalert2.js"></script>

Por otro lado, para poder hacer uso de la vista parcial que acabamos de crear en el paso anterior, vamos a llamarlo en el mismo archivo, _Layout.
En el div del cuerpo de la página añadiremos las siguientes líneas

   <div class="container body-content">
        @Html.Partial("_NotificationPanel")
        @RenderBody()
        <hr />       
   </div>

7. Llamar la alerta en el controlador.

Después de haber heredado de BaseController lo siguiente es llamar a la alerta en el método que se requiera.
Yo he creado un nuevo controlador llamado AlertController y he insertado un método, este llamará al método Alert del BaseController para desplegar la alerta.

using System.Web.Mvc;
using static AppWebWithSweetAlert.Models.Enum;

namespace AppWebWithSweetAlert.Controllers
{
    public class AlertController : BaseController
    {
        [HttpGet]
        public ActionResult ShowAlert()
        {
            Alert("El tutorial ha finalizado con éxito", NotificationType.success);
            return View();
        }
    }
}

Posteriormente creamos la vista del método.

8. Visualizar la alerta.

Ahora solo nos queda ejecutar nuestro proyecto para probar y verificar que toda la configuración este correcta.

Listo hemos añadido SweetAlert en nuestro proyecto, puedes observar las opciones y todo lo que puedes realizar en la página oficial

Puedes encontrar el código fuente en mi repositorio

Nos vemos en Twitter e Instagram ;)