Nota: Este post ha sido realizado con versiones previas de ASP.NET 5 y de Visual Studio 2015, lo aquí escrito puede variar con versiones finales de la plataforma.
Los ViewConponents son una de las muchas novedades que nos trae MVC 6. Sustituyen a las PartialViews y podemos verlos como un widget o mini-controlador con su propia vista (Para los que venís de WebForms como un control de usuario ascx).
Podemos usarlos en varios escenarios de nuestras aplicaciones como pueden ser:
- Últimas noticias.
- Artículo destacados.
- Información de login.
- Nube de tags…
Los ViewComponents se componen de 2 partes:
- Una clase que puede ser creada:
- Heredando de ViewComponent.
- Decorándola con el atributo [ViewComponent] (Luego veremos para que sirve).
- Que nuestra clase termine con el sufijo ViewComponent.
- Una vista que será renderizada por el método Invoke de nuestro ViewComponent.
Vamos a ver todo esto con un ejemplo práctico.
Lo primero de todo es crear un nuevo proyecto ASP.NET 5 con Visual Studio 2015 y en mi caso voy a utilizar la plantilla de Starter Web
A continuación vamos a añadir una clase a la carpeta Models que será nuestro modelo:
News
[snippet id=»178″]
Vamos a crear un servicio que nos devuelva una lista de las noticias más populares. Nos creamos una carpeta llamada Services y añadimos las siguientes clases:
INewsService
[snippet id=»179″]
NewsService
[snippet id=»180″]
Ahora nos vamos a crear una carpeta llamada ViewComponents donde añadiremos nuestra clase. Los ViewComponents pueden estar en la carpeta que tu quieras pero tenemos que seguir una de las 3 convenciones que vimos anteriormente.
Lo siguiente será crearnos una clase llamada MostPopularNews y añadimos el siguiente código:
[snippet id=»177″]
Ya tenemos nuestro primer componente creado así pues vamos a crear su vista. Para ello nos vamos a la carpeta ViewsSharedComponentsMostPopularNews y creamos una vista llamada Default.cshtml tal cual se muestra en la imagen:
Esto es así por convención, es decir:
- Tenemos que crear la carpeta Components.
- Dentro otra carpeta que se llame igual que nuestro componente (Sin el sufijo ViewComponent en el caso de que hayamos adoptado esta convención). Si usamos el atributo [ViewComponent(Name = «MiComponente»)] de esta manera podemos cambiar el nombre de la carpeta por el nombre de la propiedad Name del atributo.
- Y por último crear una vista que por defecto se llame Default.cshtml. (Luego veremos como especificarle el nombre de la vista que queramos).
Así pues añadimos el siguiente código a la vista del componente:
[snippet id=»181″]
En la vista Index tenemos que añadir nuestro ViewComponent al igual que hacíamos antes con las vistas parciales. Para ello es necesario añadir la siguiente línea:
[snippet id=»184″]
Con la instrucción Component.Invoke(«Nombre del view component») renderizamos nuestro componente.
Por último para que todo funcione, nos falta registrar el servicio para que ASP.NET inyecte la dependencia en nuestro componente. Para ello, vamos a la clase Startup.cs y añadimos la siguiente línea al método ConfigureServices:
[snippet id=»182″]
Ya podemos probar nuestro ejemplo:
Antes comentamos que el nombre de la vista tenía que ser por defecto Default.cshtml pero podemos indicarle al método View que vista queremos renderizar:
[snippet id=»183″]
Otra cosa importante es que el método Invoke de nuestro ViewComponent es síncrono y para este ejemplo podría ser válido. ¿Pero que pasa si estamos haciendo una llamada a base de datos, un servicio de terceros o cualquier llamada I/O? Pues que es una mala practica usar la versión síncrona porque lo que estamos haciendo es un bloqueo del hilo y no dejar a nuestro servidor que atienda a otras peticiones.
Para ello también disponemos de la versión asíncrona del método Invoke:
[snippet id=»185″]
Y en la vista Index:
[snippet id=»186″]
Además si queréis se pueden añadir parámetros tanto a Invoke como InvokeAsync:
[snippet id=»187″]
Y en la vista Index le pasamos los valores al método Invoke:
[snippet id=»188″]
Conclusión: Como habéis podido observar los ViewComponents son mucho más potentes y flexibles que las vistas parciales de MVC 5 por la separación de responsabilidades que además nos permiten poder realizar tests sobre ellos de manera unitaria.
Un saludo y hasta la próxima entrega.