Crear Menús dinámicos con ViewComponent

Un ViewComponent es una vista que nos permite poder incrustar código del Servidor con su ActionResult dentro de un _Layout.

Un componente de vista consta de dos partes: la clase (normalmente derivada de ViewComponent) y el resultado que devuelve (por lo general, una vista). Al igual que los controladores, un componente de vista puede ser un POCO, pero la mayoría de los desarrolladores prefieren aprovechar las ventajas que ofrecen los métodos y las propiedades disponibles al derivar de ViewComponent.

Se utiliza sobre todo para poder integrar en nuestro proyectos menús dinámicos en base de datos dentro de la plantilla principal de dicho proyecto. Aunque también lo podemos emplear para nube de etiquetas, panel de inicio de sesión, carro de la compra, artículos publicados recientemente, contenido de la barra lateral de un blog típico.

Crear un componente de vista

Esta sección contiene los requisitos de alto nivel para crear un componente de vista. Más adelante en el artículo examinaremos cada paso en detalle y crearemos un componente de vista.

La clase de componente de vista

Es posible crear una clase de componente de vista mediante una de las siguientes acciones:

Derivar de ViewComponent
Decorar una clase con el atributo [ViewComponent] o derivar de una clase con el atributo [ViewComponent]
Crear una clase cuyo nombre termina con el sufijo ViewComponent.

Métodos de componente de vista

Un componente de vista define su lógica en un método InvokeAsync que devuelve un elemento Task<IViewComponentResult> o en un método Invoke sincrónico que devuelve un elemento IViewComponentResult. Los parámetros proceden directamente de la invocación del componente de vista, no del enlace de modelos. Un componente de vista nunca controla directamente una solicitud. Por lo general, un componente de vista inicializa un modelo y lo pasa a una vista mediante una llamada al método View. En resumen, los métodos de componente de vista:

Defina un método InvokeAsync que devuelva un elemento Task<IViewComponentResult> o un método Invoke sincrónico que devuelva un elemento IViewComponentResult.
Por lo general, inicializa un modelo y lo pasa a una vista mediante una llamada al método ViewComponentView.
Los parámetros provienen del método que realiza la llamada y no de HTTP. No hay ningún enlace de modelos.
No son accesibles directamente como punto de conexión HTTP. Se invocan desde el código (normalmente en una vista). Un componente de vista nunca controla una solicitud.
Se sobrecargan en la firma, en lugar de los detalles de la solicitud HTTP actual.

Ejemplo de ViewComponent

En este paso crearemos un menú dinámico, en el cual crearemos un menú desplegable en el que saldrán los nombres de ciertos equipos de fútbol.

Para ello lo primero que haremos será crear una clase llamada Equipo, dentro de la carpeta de Model de nuestro proyecto.

Crearemos la clase con dichas propiedades.

Dentro de nuestro proyecto crearemos una carpeta llamada Repository en donde crearemos un clase llamada RepositoryEquipos.

En donde definiremos los Equipos, que visualizaremos en el menú, con su datos.

Dentro de la clase RepositoryEquipos, es donde vamos a crear nuestros métodos, GetEquipos y FindEquipo.

Estos dos métodos nos ayudarán, para poder devolver todos los equipos con su información y para buscar cada equipo por su ID.

A continuación lo que haremos será crear una carpeta llamada ViewComponents, en dicha carpeta crearemos una clase llamada MenuEquiposViewComponent.

En la clase MenuEquiposViewComponent vamos a heredar de ViewComponent, también vamos a inyectar el repositorio para poder acceder a los datos de los equipos anteriormente creados.

Crearemos un método llamado InvokeTask, el cual nos devolverá los equipos que mostraremos en el menú desplegable.

Dentro de la carpeta de Views, accederemos a la carpeta Shared y dentro de ella crearemos una carpeta llamada Components en la cual tendrá una carpeta llamada MenuEquipos, en está ultima carpeta crearemos una vista llamada Default.cshtml, la cual contendrá el menú desplegable.

Vista Default.cshtml, en donde recibiremos la lista de equipos y pintaremos su información, hemos creado un vista detalles, en la cual enviaremos el id de cada equipo para que nos muestre el contenido de cada uno de ellos.

Crearemos un Controlador, llamado EquipoController, dentro de la carpeta Controller.

En este controlador inyectaremos el repositorio y crearemos la vista de details, la cual recibirá el id de cada equipo, llamaremos al método FindEquipo y mostraremos la información del equipo solicitado.