ViewComponent tag helpers not working

Question

I have updated my asp.net core web application from 1.0.1 to 1.1.0, but tag helpers for my viewcomponents are not working:

<vc:login-form />

it outputs the tag. It works using old syntax: @await Component.InvokeAsync(typeof(LoginFormViewComponent))

What am I missing?

package.json:

{
  "title": "DevPortal.Web",
  "version": "0.1.0",
  "language": "",
  "dependencies": {
    "Microsoft.NETCore.App": {
      "version": "1.1.0",
      "type": "platform"
    },
    "Microsoft.AspNetCore.StaticFiles": "1.1.0",
    "Microsoft.AspNetCore.Server.IISIntegration": "1.1.0",
    "Microsoft.AspNetCore.Server.Kestrel": "1.1.0",
    "Microsoft.AspNetCore.Mvc": "1.1.0",
    "NuGet.CommandLine": "3.5.0",
  },

  "tools": {
    "Microsoft.AspNetCore.Server.IISIntegration.Tools": "1.0.0-preview2-final",
    "Microsoft.AspNetCore.Razor.Tools": "1.1.0-preview4-final"
  },

  "frameworks": {
    "netcoreapp1.1": {
      "imports": [
        "dotnet5.6",
        "portable-net45+win8"
      ]
    }
  },

  "buildOptions": {
    "emitEntryPoint": true,
    "preserveCompilationContext": true
  },

  "runtimeOptions": {
    "configProperties": {
      "System.GC.Server": true
    }
  },

  "scripts": {
    "prepublish": [ "bower install"],
    "postpublish": [ "dotnet publish-iis --publish-folder %publish:OutputPath% --framework %publish:FullTargetFramework%" ]
  },
  "userSecretsId": "aspnet-DevPortal.Web-20161230052130"
}

I have added this to _ViewImports.cshtml:

@addTagHelper "*, DevPortal"

and my assembly name is DevPortal.dll

[ViewComponent(Name ="LoginForm")]
public class LoginFormViewComponent: ViewComponent
{
    public IViewComponentResult Invoke(LoginFormViewModel model = null)
    {
        if (model == null) model = new LoginFormViewModel();
        return View(model);
    }
}

Rooftree

Not sure if you've found out why this is happening, but I'm experiencing the same issue. I'm going to hop over onto the GitHub repo and report the issue to see if anyone has this is a break list anywhere. – Alienee

Answer 1

In this case, problem was also with the parameter with default value. This issue us being tracked on github, but currently ViewComponents cannot have parameters with default values

This should work:

<vc:login-form model="null" />    

Rooftree

This problem still exists in .NET Core 2.2 and, good news, this answer still works too. – Lontson

Answer 2

I have an ASP.NET Core 5.0 Web Application. I faced same issue, but I resolved this issue.

For example:

If my project's name is MyProject and my view components located at Components folder, I added below code to _ViewImport.cshtml and it is working for me

 @addTagHelper *, MyProject  

For more details, you can see this video: Kudvenkat - ASP NET Core view component tag helper

Bidding

This worked very good for .NET Core 5. Thanks for sharing it. – Muskogee

I missed that it is an AssemblyName, not a Namespace of the current assembly. – Commutator

Answer 3

Old question, but had the same issue.

As per this link, it seems _ViewImports or _GlobalImports isn't automatically applied inside ViewComponents. Try adding the @addTagHelper line in the ViewComponent View.

Depolymerize

Please disregard the conversation from the link above. It's all bad - bad syntax in _ViewImports, bad file structure, bad files content and bad answer :) _ViewImports DOES automatically applies to all views (pages for Razor) to which it is a root. Note, each Area has its own _ViewImports. THAT might be a problem. – Piaffe

Answer 4

Everyone still having issues with that ViewComponents using <vc:my-view-component /> TagHelpers, it can happen also if you don't use correct minus/hyphens in attribute names.

For example, if you have an Invoke method with these parameters in camelCase:

public IViewComponentResult Invoke(int itemCount, bool showActions)

💥 This will NOT work:

<vc:product-list itemCount="5" showActions="false" />

✅ This will work:

<vc:product-list item-count="5" show-actions="false" />

Barnstorm