DEV Community

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

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

Verónica Guamán
Ingeniera en Sistemas apasionada por la tecnología, el desarrollo de software en especial Desarrollo Web. || .Net Developer | Backend | C# | Speaker
Updated on ・4 min read

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.
Alt Text

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
Y colocamos el siguiente código


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

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.

Alt Text

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;
            }
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

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
Ya en el archivo colocamos el siguiente código


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

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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();
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

Alt Text
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
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 ;)

Discussion (1)

Collapse
mlozadapos profile image
Miguel Lozada

Como se puede hacer los mismo pero con un alert de confirmación, por ejemplo cuando se va a eliminar un registro que pregunte si esta seguro de eliminarlo......

Gracias.