View Component as a Tag Helper does not get Invoked

Question

Invoking a View Component as a Tag Helper was introduced in ASP.NET Core 1.1. (See “Invoking a view component as a Tag Helper”). But the following only returns the Test for VC part of the view. It seems that <vc:annual-orders>…</vc:annual-orders> part does not get invoked at all.

Views\Shared\Components\AnnualOrders\Default.cshtml:

@{ 
    Layout = "";
}
<div>Test for VC</div>
<div>
    <vc:annual-orders>

    </vc:annual-orders>
</div>

myProj\ViewComponents\AnnualOrdersViewComponent.cs:

public class AnnualOrdersViewComponent : ViewComponent
{
    private readonly OrdersContext _context;

    public AnnualOrdersViewComponent(OrdersContext context)
    {
        _context = context;
    }

    public async Task<IViewComponentResult> InvokeAsync()
    {
        var lastOrders = _context.Where(t => t.orderType == "new");
        return View(await lastOrders);
    }
}

NOTE:

1. I'm using ASP.NET Core 1.1 and the View Components without Tag Helpers are working fine.
2. I also followed MSDN's official tutorial, “Invoking View Components as Tag Helpers” where it explains that PascalCase class names and method parameters for the Tag Helper are translated into their lower kebab-case.

Answer 1

This doesn't address your specific situation since your view component is parameterless, but as it's closely related, I’m leaving it here for anyone that needs to hear it:

Even if the tag helper is correctly registered in e.g. the _ViewStart.cshtml, as per @alan-savage's answer, it will not render unless you include all parameters from the InvokeAsync() method.

This may seem self-evident, but it can be confusing since it doesn't respond with an exception, nor is there any (obvious) design-time validation built into Visual Studio.

Note: There actually is design-time validation, it’s just not obvious. In the code editor, correctly referenced view components will show up with bold property names. But this is easy to miss if you're not looking for it. And there isn't e.g. a warning that shows up in the Error List panel, or as part of the build output.

So, for example, if you instead had:

public class AnnualOrdersViewComponent : ViewComponent 
{
    public async Task<IViewComponentResult> InvokeAsync(string labelName) 
    {
        … 
    }
}

And then called your tag helper as:

<vc:annual-orders></vc:annual-orders>

Your code will compile without warning, and your page will run without exception—but the view component will not be rendered.

In fact, prior to ASP.NET Core 6, this would even happen if you made the view component parameter optional, as the tag helper syntax didn’t honor optional parameters:

public class AnnualOrdersViewComponent : ViewComponent 
{
    public async Task<IViewComponentResult> InvokeAsync(string labelName = null) 
    {
        … 
    }
}

Note: As of ASP.NET Core 6 Preview 6, View Components called as Tag Helpers will now honor optional parameters (source).

Obviously, in either of the above examples, this could be fixed by simply including all parameters:

<vc:annual-orders label-name="Contrived Example"></vc:annual-orders>

Again, this doesn't address the specifics of your problem, but I imagine developers running into this issue will likely come across this thread, so I wanted to include this as another troubleshooting step in case the tag helper has already been correctly registered.

Answer 2

I have been struggling with this and finally managed to get tag helpers for view components to work.

The issue I had was that the tag helpers were not working on the views within Areas. To resolve this, I copied the _ViewImports.cshtml and _ViewStart.cshtml pages from the /Views directory into /Areas/<AreaName>/Views directory. The the tag helpers now work and Visual Studio is giving me IntelliSense on my properties.

Don't forget to add to the _ViewStart.cshtml files (where <AssemblyName> is the name of the assembly containing the View Components:

@addTagHelper *, <AssemblyName>