Que son y como utilizar vistas parciales en NET CORE
Una vista parcial es una vista que se puede incluir dentro de otra, normalmente se utilizan en la vista _Layout, pero se pueden utilizar en otras vistas también.
Puede ser muy útil para la distribución de vistas que tengan mucho código para dividirlas y tener elementos más pequeños.
Tenemos dos tipos de vistas parciales, las vistas parciales asíncronas y las vistas parciales de código razor.
En las vistas parciales asíncronas se utilizan peticiones de Ajax para comunicarse con el controlador.
Para poder hacer peticiones asíncronas necesitamos Jquery y RenderSection dentro del _Layout.
Estas vistas pueden situarse sobre la carpeta Views dentro su Controller o bien dentro de la carpeta Shared.
Voy ha hacer un ejemplo para ver el funcionamiento de estas vistas:
Creamos un proyecto de Net Core:
A continuación sobre la carpeta Models del proyecto, creamos la clase Pelicula:
La clase contendrá el siguiente código
Sobre la carpeta Controllers, creo un controlador llamado «Peliculas»:
Dentro del controlador, nos creamos una lista de Peliculas(Modelo) y en el constructor del controlador inicializamos la lista y además creamos peliculas para representar.
Ahora dentro del controlador nos crearemos un metodo IActionResult, que devolverá la colección a una vista parcial.
Para devolver la colección por modelo a una vista parcial, debe hacerse con la siguiente sentencia return PartialView(«*Vista Parcial*», modelo);
En esta vista vamos a crear una tabla con las películas para después cargarla de forma asíncrona mediante Ajax en la vista Index.
Ahora nos crearemos un metodo IActionResult para la vista Index.
En la vista Index es donde vamos a realizar la llamada a Ajax. Para usar Ajax necesitamos JQuery y para poder usar JQuery en una vista debemos crear el apartado @section Scripts, y a su vez dentro de esta sección debemos crear un etiqueta <script>.
Dentro de la etiqueta <script> deberemos empezar a escribir con JQuery la petición asíncrona, lo primero usar la sentencia $(document).ready(), o si no no funcionará nuestro script, posteriormente crearemos una función.
Ahora yo voy a crear un botón de forma que al pulsar sobre él me cargue la vista asíncrona de películas, debemos darle un id, para asignarle un evento en JQuery
También voy a crear un div para tener una zona en la que cargar la vista., también la daré un id.
En la función que creamos anteriormente, vamos a escribir las sentencias necesarias para llamar a la vista.
Como nosotros queremos que al pulsar el botón se realiza la llamada, seleccionamos mediante el id el botón, le asignamos el evento click y una función.
Para usar Ajax, debemos usar el método .load y debemos indicarle la ubicación de nuestra vista parcial, lo haremos de la siguiente manera, .load(«/Controlador/Nombre_vista_parcial»), vamos a ver como sería en el ejercicio.
Seleccionamos la caja que creé para cargar en esa zona las películas, y ponemos en mi caso el controlador donde tengo la vista parcial y después el nombre de mi vista parcial.
Finalmente incluimos un enlace en el _Layout:
Ejecutaremos la aplicación y clicaremos sobre películas asíncronas
Veremos lo siguiente:
Y si clicamos sobre el botón veremos que se carga la tabla, y además la página no se recargará:
Por otro lado tenemos las vistas parciales con código razor, estas vistas deben de ir ubicadas en la carpeta Shared, deben de llevar _ delante del nombre, por ejemplo: _VistaParcial.cshtml, y por último deben de llevar la extensión .cshtml como cualquier otra vista.
Vamos a ver el funcionamiento con los siguientes ejemplos:
Sobre la carpeta Shared, damos click derecho y seleccionamos Add y View:
Debemos de nombrarla con la nomenclatura correcta:
Ahora vamos a incluir código dentro de la vista parcial, si la variable usuario contiene el string «ADMIN», mostrará en el menu de _Layout las diferentes opciones que están en la vista parcial.
Para incluir la vista parcial, debemos usar la directiva <partial name=»nombre de la vista parcial»/> donde queramos que se muestre, en este ejemplo queremos que se muestre en la vista _Layout:
Vamos a visualizar el resultado visual en la vista _Layout:
Como podemos ver, en la barra de navegación se muestran los links que estaban en la vista parcial.
Si cambiamos el valor del string usuario de «ADMIN» a otro valor, la vista parcial no se mostrará, vamos a verlo:
Como he mencionado anteriormente las vistas parciales se pueden utilizar en otras vistas a parte de _Layout, voy a incluir una vista parcial dentro de la vista Index de AdminController.
La vista parcial tendrá el siguiente código:
En vista donde queramos mostrar el contenido, pondremos al igual que hice anteriormente en el _Layout la sentencia <partial name=»nombre de la vista»/>.
Observamos el resultado y vemos como aparece el contenido de la vista parcial (en rojo).
Autor: Adrián Rodríguez Tejedor
Curso: Desarrollo Web Full Stack, MultiCloud y Multiplataforma
Centro: Tajamar
Año académico: 2021-2022
GitHub: https://github.com/adriantr0808/PartialViewsPost.git
Video: https://web.microsoftstream.com/video/a41e0ce8-c29f-4c74-b6a2-9a3ab0e6a5f2