TagHelpers in ASP.NET Core are used to generate HTML or other markups for a web page. They provide a way to create custom HTML elements, with their own attributes and behavior, that can be used in Razor views. By using TagHelpers, you can create reusable UI components that can be easily integrated into your application.
To create a custom TagHelper in ASP.NET Core, you need to follow these steps:
- Create a new class that inherits from the TagHelper base class.
using System.Text.Encodings.Web;
using Microsoft.AspNetCore.Razor.TagHelpers;
namespace MyApplication.TagHelpers
{
public class MyTagHelper : TagHelper
{
private readonly HtmlEncoder _htmlEncoder;
public MyTagHelper(HtmlEncoder htmlEncoder)
{
_htmlEncoder = htmlEncoder;
}
public override void Process(TagHelperContext context, TagHelperOutput output)
{
output.TagName = "div";
output.Attributes.SetAttribute("class", "my-tag-helper");
output.Content.SetHtmlContent($"<p>Hello, {Name}!</p>");
}
public string Name { get; set; }
}
}
- In the ConfigureServices method of the Startup class, register your TagHelper with the
TagHelperComponentCollection:
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.TagHelpers;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;
using MyApplication.TagHelpers;
namespace MyApplication
{
public class Startup
{
// ...
public void ConfigureServices(IServiceCollection services)
{
// ...
services.AddSingleton<MyTagHelper>();
services.AddSingleton<ITagHelperComponent, MyTagHelperComponent>();
}
// ...
}
}
- Create a TagHelperComponent to register the custom TagHelper:
using Microsoft.AspNetCore.Razor.TagHelpers;
using Microsoft.Extensions.DependencyInjection;
namespace MyApplication.TagHelpers
{
public class MyTagHelperComponent : TagHelperComponent
{
public override int Order => 0;
public override void Init(TagHelperContext context)
{
context.TagHelpers.Add(
new MyTagHelper(
context.GetServices<HtmlEncoder>().FirstOrDefault()));
}
}
}
- Use your custom TagHelper in a Razor view:
<my-tag-helper name="John"></my-tag-helper>
When you run your application, the custom TagHelper will be executed and will generate the following HTML:
<div class="my-tag-helper"><p>Hello, John!</p></div>
By using TagHelpers, you can create powerful and reusable UI components that can be easily integrated into your ASP.NET Core application.