Cargar información en diálogos modales de Bootstrap con Net Core
¡Buenas! En este post vamos a aprender como utilizar los diálogos modales de bootstrap con Net Core para cargar información que nos devuelva una base de datos, así como poder utilizar los mismos para poder introducir datos también. Es cierto que esto es algo que se hace en Front-end, pero aquí con NET Core también puede ser muy útil.
Lo primero de todo que tenemos que hacer es crear el proyecto (evidentemente) MVC. Sobre el mismo debemos descargar los siguientes Nuget:
-Microsoft.EntityFrameworkCore
-Microsoft.EntityFrameworkCore.SqlServer
IMPORTANTE : LA VERSIÓN DE LOS NUGET DEBE DE SER IGUAL QUE NUESTRO PROYECTO (si estamos trabajando con MVC 5.0 los nuget deben de ser la versión 5.0.x, si fuese la versión 6 debería ser 6.0.x, y asi sucesivamente)
Cuando tengamos estos Nuget instalados, vamos a ir a nuestro archivo appsettings.json y aquí vamos a añadir nuestra cadena de conexión a la BBDD, la cual posteriormente recuperaremos en Startup. Por motivos de seguridad, mis credenciales están ocultas, pero donde veis asteriscos debéis poner el nombre de vuestra BBDD, usuario y contraseña.
Vamos a ir a nuestra carpeta Models, creamos nuestra clase mapeada sobre la tabla Película de nuestra BBDD
Ya tenemos nuestra cadena de conexión, nuestra clase Película y los Nuget instalados, por lo que vamos a crearnos dos carpetas llamadas Data y Repositories. Dentro de Data nos vamos a crear nuestro Context al cual llamaremos PeliculasContext. Este heredará de DbContext, el cual nos lo va a proporcionar nuestro Nuget EntitityFramework. Vamos a crearnos nuestra colección DbSet de nuestra clase Película para poder atacar a la BBDD y su tabla Película, además de pasar el contexto por el constructor.
Ahora vamos a crearnos nuestro RepositoryPeliculas dentro de Repositories. En él, vamos a inyectar nuestro objeto Context dentro de nuestro constructor e incluiremos nuestros métodos para jugar con la BBDD.
Teniendo esto creado y montado, solo nos falta modificar el Startup y añadir nuestro Context y Repository, además de añadir la cadena de conexión como antes he comentado.
Sobre ConfigureServices, inyectamos añadimos lo siguiente
Una vez ya tenemos esto, nos queda lo divertido. Vamos crearnos un controller llamado PeliculasController, y sobre él, añadiremos nuestros métodos y haremos nuestras funcionalidades.
Inyectamos nuestro Repository en el constructor y creamos nuestro objeto repo. Añadimos nuestro método IActionResult Index y, sobre nuestra vista (recordad que se tienen que llamar exactamente igual), le pasamos por Model una lista de objetos Película que nos va a devolver nuestro repo para poder visualizarlas.
Vamos a ver la vista Index y ahora llega lo más importante.
Utilizaremos JQuery, y con un onclick, llamamos al método peliculadetails y cogemos el id de la película.
IMPORTANTE: NUESTRO SCRIPT DEBE IR ENTRE LA ETIQUETA SCRIPT Y SU CIERRE. ESTA ZONA DE SCRIPT VIENE EN EL LAYOUT YA DEFINIDA. SI LE CAMBIAMOS EL NOMBRE POR SCRIPTPELICULA DEBERÍAMOS PONER @section SCRIPTPELICULA
En el request tenemos que poner el controlador como primer objeto de la ruta, y después el action. Añadiendo la interrogación y posteriormente el parámetro que va a recibir la vista conseguimos pasar el dato a la llamada del controller.
Hacemos la llamada a la url con ajax, y ahora llega lo importante, en el div que hemos puesto con el identificador modalWrapper cargamos como html el resultado de la llamada a ajax.
Y con el identificador que hemos puesto al diálogo modal de nuestra Partial View, lo cargamos y a su atributo modal, lo ponemos a show, y así cargará el diálogo modal en nuestro modalWrapper
Cuando pinchemos sobre una imagen, lo que queremos es cargar los datos de la película sobre un diálogo modal y no en otra vista que nos haga desplazarnos. Este diálogo modal debe cargarse en una Partial View que no vamos a explicar (mirad el post y tutorial de mis compañeros en caso de no saber que es). En el controller Peliculas vamos a crear el método _InfoPeliculaPartial y va a recibir como parámetro el id de la película, y dentro simplemente vamos a crear un objeto Película que busquemos en nuestro repo por su método de buscar película por id. Hacemos un return PartialView(«nombre de la partial view», película).
En la vista, simplemente cogemos el objeto por Model y hacemos el diálogo modal con la información del Model.
Cuando haces click en la foto vemos lo siguiente
También podemos utilizar los diálogos modales para insertar datos a nuestra BBDD.
Hacemos los mismos pasos, creamos nuestro div donde cargar el modal, creamos el modal y cargamos un formulario y lo llamaos desde un botón.
Vamos a ver el formulario.
El formulario se va a autoprocesar, y, cuando hagamos click sobre el botón submit, el formulario se va a enviar a su método POST.
Rellenamos los datos del formulario…
Esperemos que os haya gustado y que podáis aplicar esto que es tan sencillo y tan visual a la vez. ¡Muchas gracias!
Autor/a: Iván Gonzalo Lucas
Curso: Desarrollo Web Full Stack, MultiCloud y Multiplataforma
Centro: Tajamar
Año académico: 2021-2022
Código / recursos utilizados / Otros datos de interés: GitHub