Vistas Parciales en AspNetCore

Buenas a todxs!

Hoy veremos una pequeña herramienta del mundo del Desarrollo MVC en ASP.NET CORE:

Las vistas parciales.

Básicamente, las vistas parciales son pedazos de codigo incrustado en un Layout, que normalmente son usados para mostrar valores o código que depende de otras características, y que está preconfigurado (En código Razor) para mostrar unas etiquetas u otras en el Layout final dependiendo de esas otras características de la programación de la página.

Para este ejemplo necesitaremos:

-Conocimientos de programación en MVC Core, IoC, Dependency Injection, orden Middleware

-Visual Studio (Nosotros usaremos el 2019)

-Un proyecto ASP NET Core Web Application en C#

-NuGets para este ejemplo:

               ·Microsoft.AspNetCore.Mvc.Core

               ·Microsoft.AspNetCore.Session

               ·Microsoft.EntityFrameworkCore

               ·Microsoft.EntityFrameworkCore.SqlServer

-Base de datos (en este caso usaremos SQLServer) con tablas y datos

Para la primera parte, queremos dos botones: uno que guarde datos en sesión y otro que los borre. Y querremos mostrar si tenemos datos guardados en Session, para ver si cambia la vista parcial. Este suele ser el modo de trabajar que tienen los famosos “carritos de la compra” en las páginas de compra online.

Necesitaremos que el contenedor añada y use las Session, por lo que configuramos nuestro Startup, y en ConfigureServices añadiremos services.AddSession();

También, en orden de MiddleWare, en el método configure le indicaremos que use sesión, con la línea app.UseSession();

Necesitaremos el objeto HttpContext, así que lo importamos con la directiva @using Microsoft.AspNetCore.Http en los _ViewImports.cshtml dentro de la carpeta Views:

Crearemos en el mismo Controller Home un IActionResult Index() con la decoración [HttpPost] encima y que reciba un string que nostostros llamaremos “acción”.

Evaluaremos si ese action es “guardar” o “borrar”.

·Si es guardar, llamamos al método SetString de HttpContext.Session y guardaremos la hora y el minuto actuales.

·Si es borrar, llamaremos al método Clear() de HttpContext.Session.

Ahora, en la vista Index de la carpeta Home dentro de la carpeta Views, crearemos un formulario con dos botones. Yo he usado Bootstrap para que quede algo más vistoso.

Ahora, crearemos una nueva View en la carpeta Shared, dentro de Views. Las vistas parciales suelen empezar su nombre por un guión bajo y la palabra Partial, para poder diferenciarlas. La nuestra será _PartialSessionInfo.

Una vez creada, en lenguaje Razor, llamaremos al método GetString y guardaremos el valor del espacio con nombre “HORA” del objeto Session

Y ya sólo nos queda incluirlo en nuestro Layout. La manera más simple de hacerlo es con una etiqueta <partial> que pertenece al entorno de Core. Nosotros lo incluiremos en la misma barra de navegación. Para señalarle a qué vista parcial tiene que llamar la etiqueta, se usa el atributo “name”

Podemos iniciar la aplicación, y podremos notar cómo cambia el valor de uno solo de los objetos de la barra de navegación, según pulsemos en cada uno:

Podríamos también incluir estas vistas parciales en otras vistas, no necesariamente en el Layout. Y con ello, vemos la utilidad que tiene de poder cambiar lo que muestre en función de otras características, siendo una vista sin necesidad de Controller

Existe también otro tipo de Vista parcial con Controller propio, que serían los ViewComponent.

Lo que este tipo de vista gana con el Controller, es la posibilidad de usar modelos para que la vista pueda dibujarlos. Por tanto, tendremos llamada a la vista dentro del controller, pero esta será asíncrona. También hay una estructura de carpetas fundamental e imprescindible a usar para que todo funcione:

• Cada vista de un componente se llamará Default.cshtml.
• Irá dentro de una carpeta con el nombre del componente.
• Esta carpeta, asimismo, irá dentro de otra carpeta de nombre Components
• La carpeta Components irá dentro de la carpeta Shared, dentro de VIews

Por cada componente, habrá una carpeta con el nombre del componente, y estarán todas dentro de Components, dentro de Shared, dentro de Views.

Para el controlador, necesitamos una carpeta ViewComponents en la carpeta raíz del proyecto

• Le pondremos el nombre siguiendo este patrón: [NombreComponente]ViewComponent. Nuestro componente será DropdownGenerosViewComponent.
• También podemos darle cualquier nombre y ponerle encima de la clase la decoración [ViewComponent], pero para el ejemplo hemos usado la primera opción

En nuestro ejemplo, hemos usado una Base de Datos con géneros musicales y autores, y pretendemos hacer un menú desplegable para poder acudir al género que queramos dentro de los que haya. Teniendo un context, el repositorio y los modelos, comenzamos.

Lo primero, el Controller tiene que heredar de ViewComponent para poder funcionar, y deberemos haber configurado la inyección del Repository con sus métodos, Configurado las opciones del DbContext para poder atacar a la base de datos y hecho los modelos (en este caso, serán Genero, con IdGenero y Nombre, y Autor, con IdAutor, Nombre, e IdGenero). Por tanto solo quedaría inyectar en el constructor el Repository y empezar a trabajar.

Dentro del Controller para el componente, tendremos un método asíncrono que devolverá un Task<IViewComponentResult> al que llamaremos InvokeAsync() para luego poder llamarle desde el _Layout.

Dentro del método, tendremos que llamar al método del repository que nos devuelva los géneros, para guardarlos en un List<Genero> y poder enviarlos a la vista como Modelo

El controller quedará de esta manera:

Nos faltaría crear la vista, siguiendo la estructura que véis a la derecha en la anterior foto.

Dentro de esa vista, definiremos qué model va a recibir, en este caso un List<Genero>, y sólo hace falta dibujarlo. Ya que va a ser un dropdown para la vista del Layout, crearemos el elemento <li> y recorreremos la lista, dibujando un <a> por cada posición de la lista de géneros. Quedará algo tal que así

Después, tendremos que crear el IActionResult AutoresGenero en el controller Home, que reciba el idgenero, para luego buscarlo a través de un método en el Repository (previamente creado por nosotros) que filtra los autores por IdGenero, y la vista AutoresGenero, también dentro de la carpeta Home, dentro de Views, para mostrar los autores por género.

Y para terminar, deberemos hacer la llamada asíncrona desde el Layout a través del método InvokeAsync de la clase Component, precedido de un await, y con el nombre de la vista a la que queremos llamar:

Mi controller ha quedado así:

Y este será nuestro resultado Final: un desplegable dinámico para un menú de navegación.

Espero que viendo el vídeo, la documentación y los recursos que hemos utilizado podáis darle más funcionalidades a vuestros proyectos!

Un saludo grande, y GRACIAS por dedicarme estos tan preciados minutos!

Nos vemos en el próximo Tutorial!

---

Autor/a: Gabriel Macias Fernandez

Curso: Desarrollo Web Full Stack, MultiCloud y Multiplataforma

Centro: Tajamar

Año académico: 2020-2021

Código / recursos utilizados / Otros datos de interés: https://github.com/MaciVK/VistasParciales.git