View Component as a Tag Helper does not get Invoke

问题:

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.

回答1:

This doesn't address your specific situation, but it's closely related, so I figured I'd leave 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 still fail to render if you don't include all parameters from the InvokeAsync() method. This may seem self-evident, but it can be initially confusing since it doesn't respond with an exception, nor is there any (obvious) design-time validation built into Visual Studio for this.

Note: There actually is design-time validation built into Visual Studio. In the code editor, properly 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 would compile without warning, and your page would run without exception—but the view component wouldn't be rendered, and would instead be injected into the source of the page.

In fact, this would even happen if you made the view component parameter value optional, as the tag helper syntax doesn't honor optional parameters:

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

Note: Microsoft has committed to honoring optional parameters on View Components when calling them as Tag Helpers in ASP.NET 5.0 (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 up against 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.

回答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>