Uso de SweetAlert2 en un proyecto MVC
Hola, soy Álvaro Moya Herraiz, alumno del máster de Desarrollo Web Full Stack, MultiCloud y Multiplataforma y voy a enseñaros a implementar SweetAlert2 en vuestro proyecto MVC.
Primero de todo, SweetAlert2 es una librería de javascript que nos permite mostrar alerts animados y más vistosos en comparación con los estándar de js.
Para empezar, deberemos añadir dicha librería a nuestro proyecto, y para ello haremos click en «Installation». Una vez lo hayamos hecho, clicamos en el link donde pone «jsdelivr CDN».
Nos enviará a otra página donde deberemos hacer click en donde pone «/npm/sweetalert2@11.4.4/dist/sweetalert2.all.min.js«. Se abrirá una ventana donde veremos muchísimo texto. Hacemos click derecho y guardar como «sweetalert2.all.min.js» (Este archivo deberemos guardarlo en el wwwroot de nuestro proyecto, en la carpeta de js más concretamente).
Una vez guardado el archivo js, nos vamos a nuestro proyecto y realizamos la llamada a dicho archivo. Vamos a la vista _Layout dentro de Shared y al final lo declaramos de la siguiente forma:
<script src=»~/js/sweetalert2.all.min.js»></script>
Ya tendríamos enlazada la librería a nuestro proyecto, ahora solo queda usarla. Para este tutorial, yo he optado por hacer una alerta de confirmación antes de borrar una fila en mi base de datos, así que necesitaremos métodos para mostrar y borrar datos en nuestro repository.
También necesitaremos tener métodos en el controller que realicen la llamada a los métodos del repository.
El siguiente paso sería crear la vista Index para mostrar una lista con todos los juegos (se recomienda el uso de scaffolding). En dicha vista, crearemos un script donde programaremos la alerta que vamos a usar.
Dentro de este script podemos distinguir dos zonas principales:
La primera corresponde al diseño de la alerta (title, text, icon, etc.). Esto nos permite modificar el texto y los botones que se mostrarán en la alerta.
La otra zona que podemos identificar corresponde al comportamiento de dicha alerta. Podemos apreciar que funciona con ajax, y necesitamos pasarle una url con el controller, el action y el parámetro necesarios para realizar la acción de borrado. Al mostrarse la alerta, aparecerán dos botones, uno para cancelar la acción y otro para ejecutar el borrado. Este último llamará al método del controller explicado anteriormente, y después, mediante windows.location, nos mandará de vuelta a la vista Index del controller Home.
El siguiente y último paso sería crear un botón que realice la llamada al script. Lo crearemos al final de cada fila de la columna y pasará por parámetro al script la id del juego al que corresponde.
Ahora vamos a probarlo en nuestra página.
Podemos ver que al hacer click en el botón de borrar se nos abre con éxito la alerta. Si clicasemos en «cancel» la ventana se cerraría y no pasaría nada, en cambio, si pulsamos en «OK», podremos ver como se recarga la página y el juego seleccionado (en este caso ha sido el parchís) es borrado con éxito.
Como podemos ver, todo es funcional y cumple con el objetivo que nos habíamos propuesto.
Espero que este post te haya ayudado y haya resuelto todas tus dudas.
En el enlace a mi Git encontrarás el proyecto completo.
Un saludo.
Autor: Álvaro Moya Herraiz
Curso: Desarrollo Web Full Stack, MultiCloud y Multiplataforma
Centro: Tajamar
Año académico: 2021-2022
Enlace a Github: https://github.com/alvaroyako/PostTutorialNET