Mitc.Support.Taghelpers

A collection of utility tag helpers for ASP.NET Core Razor Pages and MVC applications.

Setup

Register the tag helpers in your _ViewImports.cshtml:

@addTagHelper *, Mitc.Support.Taghelpers

Tag Helpers

ConditionalClassTagHelper

Conditionally adds CSS classes to any element using maybe-{class} attributes bound to boolean expressions.

<div maybe-hidden="@Model.IsHidden" maybe-active="@Model.IsActive">...</div>

Renders as class="hidden active", class="active", etc. depending on which values are true. Preserves any existing class attribute.

IfAttributeTagHelper

Conditionally includes or excludes elements using include-if and exclude-if.

<div include-if="@Model.IsVisible">Only shown when visible</div>
<div exclude-if="@Model.IsAdmin">Hidden for admins</div>

When the condition suppresses the element, it is removed entirely from the rendered HTML — including its children.

ActiveLinkTagHelper

Adds an active CSS class to any element when the current route matches. Supports Razor Pages and MVC routing, with comma-separated values for matching multiple routes.

Razor Pages

<li active-page="/Products/Index">Products</li>
<li active-page="/Orders/Index, /Orders/Details">Orders</li>

MVC

{{!-- Match a specific action --}}
<li active-controller="Products" active-action="Index">Products</li>

{{!-- Match multiple actions --}}
<li active-controller="Products" active-action="Index, Details">Products</li>

{{!-- Match any action on a controller --}}
<li active-controller="Products">Products</li>

{{!-- Match an action across multiple controllers --}}
<li active-action="Dashboard" active-controller="Admin, Manager">Dashboard</li>

When both active-controller and active-action are specified, both must match. The active class is applied if the page match or the controller/action match succeeds.

Custom active class

<li active-page="/Products/Index" active-class="is-active">Products</li>

Defaults to active if active-class is not specified. Preserves any existing class attribute.

AlpineDataTagHelper

Serializes a server-side model to JSON and sets it as the Alpine.js x-data attribute.

<div x-data="@Model.ComponentData">...</div>

By default, property names are serialized in PascalCase. Use camel-case for camelCase output:

<div x-data="@Model.ComponentData" camel-case="true">...</div>

If a string is passed, it is written directly to x-data without serialization, enabling Alpine component function references:

<div x-data="myComponent()">...</div>

If the value is null, the x-data attribute is omitted entirely.

Target Frameworks

netcoreapp3.1, net5.0, net6.0, net7.0, net8.0, net9.0, net10.0