Menu
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))
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);
}
}
248
Tag Helpers are attached to HTML elements inside your Razor views and can help you write markup that is both cleaner and easier to read than the traditional HTML Helpers. HTML Helpers, on the other hand, are invoked as methods that are mixed with HTML inside your Razor views.
The view component supports two methods to call a view component is Invoke and InvokeAsync . + Invoke Asynchronously: Example of a View Component that uses the InvokeAsync method. + Invoke Synchronously: Example of a View Component that uses the Invoke method. Or Invoke() method with parameters.
The opt-out character (“!”) is used to disable the Tag Helper at the element level. With the opt-out character, the HTML will not be generated for the label tag in the above case. We can use this opt-out character if we want to conditionally control rendering of the HTML elements.
To create custom tag helper, the first step is to create a class that inherits from "TagHelper" class. This class has a virtual method to generate HTML tags. It contains both synchronous (Process) and asynchronous (ProcessAsync) implementation of the virtual method.
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" />
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With