Vistas parciales con ASP.NET y MVC

Las Vistas Parciales son herramientas de bloques de código HTML que se incrustan (representan) dentro de otras vistas. Pueden tener controlador o sólo ser un dibujo con código Razor.

La Vista Parciales se cargan dentro de la carpeta Shared y aunque no es obligatorio, suelen empezar con guión bajo ( _ ) y tienen la extensión ( .cshtml )

Una Vista Parcial es un «trozo» de vista que podemos reutilizar en distintas partes de nuestra aplicación y así evitar la duplicación de código.

Sintaxis

@ Html.Partial («_NombreVista»)

La Vista Parcial no tiene Controlador, sólo tiene código Razor y HTML. Se utiliza únicamente para el diseño.

@ Html.PartialView(«_NombreVista»)

La vista parcial tiene Controlador para cargar elementos al iniciar la página (vista). Por ejemplo, un menú de BBDD.

@Html.RenderAction(«_NombreVista», «NombreControlador»)

Permite enviar información (un parámetro) a la vista parcial en el momento de ser cargada.

Para entender y aplicar el concepto de Vistas Parciales en nuestros proyectos, vamos a realizar dos ejemplos.

Vista Parcial Simple

1.- Crear la vista parcial

La Vista Parcial se carga dentro de la carpeta Shared, para poder ser llamada desde cualquier lugar dentro de nuestra aplicación.

Shared >> Add >> View >> Create as partial view

Ponemos el nombre a nuestra vista parcial, que empieza con un guión bajo ( _ ) , aunque no es obligatorio. En este ejemplo, _MiPrimeraVistaParcial y elegimos la opcion «Create as partial View», que crea una vista vacía.

2.- Añadir contenido a _MiPrimeraVistaParcial

3.- Añadir referencia a la vista parcial

@Html.Partial(» _MiPrimeraVistaParcial «)

Utilizamos esta referencia porque el contenido es simple y no necesita controlador.

Podemos llamar, a nuestra vista parcial, desde cualquier otra vista, por ejemplo desde la página, Proyectos, de nuestro menú.

4.- Comprobación de la vista parcial

Por último, comprobamos que se muestre el contenido de nuestra vista parcial, tanto en el «Index» como en «Proyectos» .

Vista Parcial con Contenido Lógico

En este ejemplo, creamos una vista parcial, con contenido lógico, es decir, recuperando datos de una BBDD; con un modelo y controlador.

Vamos a mostrar la lista de cursos actuales de nuestra academia, empezamos;

1.- Crear la vista parcial

Shared >> Add >> View >> Create as partial view

En nuestro ejemplo, la llamaremos, _Cursos, que muestra el listado de todos los Cursos 2020. No olvidar de elegir la opción de «Crear vista vacía»

2.- Crear la clase modelo

Creamos una nueva carpeta con el nombre Repositories y añadimos una nueva clase con el nombre RepositoryCursos, que tiene los métodos para recuperar los datos de la BBDD, Cursos.

Se tiene que instanciar el contexto «ContextoCurso» para acceder a los datos de Curso. A continuación, creamos el método GetCursos(), que a partir de una consulta de LinQ, nos devuelve una lista de cursos existentes de nuestra BBDD.

3.- Crear el controlador

Creamos el controlador, CursosController.

Creamos el método _Cursos(), que devolverá una vista parcial. Llamamos al método GetCursos() de nuestro repositorio, y guardamos el resultado en la variable, listaCursos; para después retornarla con PartialView(listaCursos) a la vista parcial.

4.- Crear contenido de la vista parcial

Añadimos el contenido a nuestra vista parcial, recibimos del modelo, una lista de cursos. A partir de este modelo, creamos una tabla para almacenar los datos.

Con un bucle recorremos el modelo y mostramos los diferentes campos deseados.