Como sabemos, para invocar a un view component e incluir la vista parcial que retorna en el interior de otra vista, debemos utilizar desde ésta el helper @Component.Invoke() o su alternativa asíncrona @Component.InvokeAsync(), por ejemplo de la forma que vemos a continuación:
Y aunque no es especialmente incómodo ni difícil de implementar, es cierto que presenta algunos inconvenientes. En primer lugar, dado el helper @Component.Invoke() es el mismo para todos los view components, ni el entorno ni el compilador pueden ofrecernos ayuda en nombres o parámetros, ni validar que la llamada sea correcta. Cualquier fallo se detectará exclusivamente en tiempo de ejecución.

Asimismo, está claro que el código de las vistas es más legible y fluido si en lugar de utilizar sintaxis imperativa, como son las llamadas a helpers, se utiliza un enfoque declarativo, esto es, si utilizamos etiquetas como los célebres tag helpers.

En 2014, un miembro del equipo de desarrollo de ASP.NET Core registró un issue en Github proponiendo que debería proporcionarse una alternativa "automágica" basada en tag helpers para renderizar view components, de forma que una llamada como @await Component.InvokeAsync("MyViewComponent") pudiera codificarse más limpiamente como <myViewComponent /> sobre la vista:


Pues bien, la solución no ha sido implementada hasta la versión 1.1 de ASP.NET Core. A partir de ella, por cada view component del proyecto se creará automáticamente un tag helper con su mismo nombre que permitirá realizar este tipo de invocaciones.

Vamos a ver lo sencillo que es utilizar esta característica usando como ejemplo el siguiente view component:

public class ShoppingCartViewComponent: ViewComponent
{
    private readonly IShoppingCartServices _shoppingCartServices;   

    public ShoppingCartViewComponent(IShoppingCartServices shoppingCartServices)
    {
        _shoppingCartServices = shoppingCartServices;
    }   
    public async Task<IViewComponentResult> InvokeAsync(
        bool showImages, bool showButtons)
    {
        var vm = new CurrentCartViewModel()
        {
            Items = await _shoppingCartServices.GetCurrentCartItems(),
            ShowImages = showImages,
            ShowButtons = showButtons
        };
        return View(vm);
    }
}

En primer lugar, para que los tag helpers generados automáticamente estén disponibles en nuestras vistas, es necesario añadir al archivo de importaciones globales (_ViewImports.cshtml) la siguiente directiva, obviamente sustituyendo "MyWebApplication" por el nombre de vuestro proyecto:

@addTagHelper *, MyWebApplication

Tras ello, ya en las vistas tendremos nuestro componente disponible en forma de tag helper, por lo que podemos utilizarlo directamente:

<vc:Shopping-cart show-images="true" show-buttons="false"></vc:Shopping-cart>

Es muy importante tener en cuenta que:

• Los tag helpers de todos los view components definidos en el proyecto estarán disponibles usando el prefijo "vc:", como en el ejemplo anterior.
   
• El nombre del view component será usado como nombre de etiqueta. En el ejemplo anterior, el nombre sería "ShoppingCart" (sin el "ViewComponent" final).
   
• Todos los parámetros de su método InvokeAsync() serán usados como atributos de la etiqueta. En el ejemplo anterior, esto ocurriría con los parámetros showImages y showButtons.
   
• Los nombres serán transformados de forma que las mayúsculas intermedias habituales en el Pascal o Camel Casing serán utilizadas para identificar palabras distintas, que serán separadas por guiones "-" en el nombre de la etiqueta y sus atributos.
   
• En las versiones actuales del IDE, con el tooling aún en prerelease, aún no funciona bien del todo el intellisense y otras ayudas en tiempo de diseño, pero en un futuro próximo nos ofrecerá ayuda de autocompletado y validación de tipos sobre la marcha.

Espero que os resulte útil :)

Publicado en Variable not found.