Tag Helpers

What are Tag Helpers?

Tag Helpers are server-side components that participate in HTML rendering. They provide a more HTML-friendly way to generate dynamic content.

Common Tag Helpers

Anchor Tag Helper

<a asp-page="/Products/Details" asp-route-id="5">
    View Product
</a>

// Outputs: <a href="/Products/Details/5">View Product</a>

Form Tag Helper

<form asp-page="/Products/Create" method="post">
    <!-- Form fields -->
</form>

// Outputs: <form action="/Products/Create" method="post">

Input Tag Helper

<input asp-for="Product.Name" />
<input asp-for="Product.Price" />
<textarea asp-for="Product.Description"></textarea>

// Generates appropriate input types with value binding

Label Tag Helper

<label asp-for="Product.Name"></label>
// Outputs: <label for="Product_Name">Name</label>

Select Tag Helper

<select asp-for="Product.CategoryId" asp-items="Model.Categories">
</select>

Validation Tag Helpers

<span asp-validation-for="Product.Name" class="text-danger"></span>
<div asp-validation-summary="ModelOnly" class="text-danger"></div>

Custom Tag Helpers

// TagHelpers/EmailTagHelper.cs
public class EmailTagHelper : TagHelper
{
    public string Address { get; set; }
    
    public override void Process(TagHelperContext context, TagHelperOutput output)
    {
        output.TagName = "a";
        output.Attributes.SetAttribute("href", $"mailto:{Address}");
        output.Content.SetContent(Address);
    }
}

// Usage
<email address="support@example.com"></email>