View Componentes: La mejor alternativa a Vistas Parciales en MVC.

Pero, para mi sorpresa, dicho elemento está ya en desuso y no existe más en el marco ASP.NET Core. Así que, continuando con mi búsqueda, encontré el concepto de Componentes de Vista (View Component) que al parecer no sólo hace la misma funcionalidad sino que además ofrece mucho mayores ventajas, ya que no depende de Model Bindings sino simplemente de los datos que se pasan al invocar al componente, dándole autonomía, re-usabilidad y separación de intereses, además de ser un elemento auto contenido.

Un View Component renderiza una sección de una vista y no necesariamente la respuesta completa a una petición HTTP. Puede contener lógica de negocio de Interfaz de Usuario, y pasar parámetros en su llamada.

En otras palabras, posee la misma funcionalidad de un Componente Blazor, pero en una aplicación MVC con los beneficios hallados entre las Vistas y sus Controladores.

Caso de uso:

Supongamos que estamos desarrollando un módulo contable para administrar ingresos y costos, con el fin de llevar el control financiero empleando diversos informes y consultas.

Para ello, usemos un grupo de botones estilizados con Bootstrap que simulan la funcionalidad de una barra de menú:

Dos posibles opciones fueron resolverlo con un Layout particular para el módulo de Contabilidad, o bien, a través de una vista parcial. La solución óptima fue definiendo un ViewComponent.

Características:

1.- Se tiene que definir una clase que contenga un método para invocarla de forma asíncrona que retorna IViewComponentResult. Esta clase puede injectar dependencias y pasar parámetros. La clase puede alojarse en cualquier sitio del árbol de la aplicación. En nuestro caso no se requiere parámetros por lo que queda definida de la siguiente manera:

    using Microsoft.AspNetCore.Mvc;
     
    namespace App.Mvc.Components;
     
    public partial class MnuContabViewComponent : ViewComponent
    {
        public IViewComponentResult Invoke()
        {
            return View();
        }
    }

El nombre de la clase debe llevar el sufijo ViewComponent, en nuestro caso, es “MnuContabViewComponent.cs”.

2.- Crear la vista. Por defecto la Vista es un archivo razor de nombre “Default.cshtml”:

Nótese que la vista incluye las etiquetas <header></header>, sin que esto sea obligatorio. En esta caso, el archivo quedó guardado en la ruta:

Views>Shared>Components>{MnuContab}>Default.cshtml.

El nombre entre llaves: “MnuContab” debe coincidir coincidir con el nombre del componente sin el sufijo.

3.-Por último, el componente se llama con la instrucción:

    Component.InvokeAsync("ComponentName", new { param1 = value1 })

Desde cualquier Vista Razor. En nuestro caso:

    @await Component.InvokeAsync("MnuContab") 

El componente se renderiza de la misma forma que un componente Blazor:

Conclusión:

Esta maravillosa funcionalidad en aplicaciones MVC enriquece el empleo de renderización parcial del lado del servidor (Server Side Rendering) , misma que puede aprovecharse en un sin fin de casos como barras de menús verticales u horizontales, o la creación de menús dinámicos, entre otros.