Añadir alertas usando SweetAlert en una Aplicación web con ASP.NET Framework.
Tags: dotnet, framework, csharp, sweetalert
Published: 2021-05-04 21:14:08

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í](https://github.com/VeronicaGuaman/FilesSweetAlert), existe otras formas que se muestra en la [documentación oficial](https://sweetalert.js.org/) 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.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4ir6cxhzusq43xuxecdx.PNG)
##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"**.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/71rwu95wpelyce0cgnkg.PNG)
Y colocamos el siguiente código
```csharp

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](https://dev.to/veronicaguamann/enum-enumeraciones-en-c-1fgi)
##4. Agregar un controlador Base y añadir configuraciones.
En la carpeta **"Controlers"** vamos a añadir un controlador que tendrá de nombre **BaseController**.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o520os4s82u0js95f3uc.PNG)

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

```csharp
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**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iennfwlqf7id39x9s9k0.PNG)
Ya en el archivo colocamos el siguiente código
```csharp

@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
```html
<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
```html
   <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.
```csharp
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();
        }
    }
}
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1dmwsbitn8l8tylzedws.PNG)
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.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ciwpifznpzm69v5cqgwb.PNG)
Listo hemos añadido SweetAlert en nuestro proyecto, puedes observar las opciones y todo lo que puedes realizar en la [página oficial](https://sweetalert2.github.io/)

Puedes encontrar el código fuente en mi [repositorio](https://github.com/VeronicaGuaman/AppWebWithSweetAlert)

Nos vemos en [Twitter](https://twitter.com/veronicaguamann) e [Instagram](https://www.instagram.com/veronicaguamann/) ;)