CODEWITHSUNDEEP
c#asp.net-coreasp.net-core-viewcomponentasp.net-core-tag-helpers
Liero
Liero

Reputation: 27348

ViewComponent tag helpers not working

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);
    }
}

Upvotes: 16

Views: 9312

Answers (4)

WilliamK
WilliamK

Reputation: 1772

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" />

Upvotes: 4

Ramil Aliyev 007
Ramil Aliyev 007

Reputation: 5442

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

Upvotes: 7

Liero
Liero

Reputation: 27348

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" />

Upvotes: 5

wbarnard
wbarnard

Reputation: 59

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.

Upvotes: 4

Related Questions