Noundry.TagHelpers Documentation

Quick Start

1. Register Tag Helpers

Add to _ViewImports.cshtml:

@addTagHelper *, Noundry.TagHelpers

2. Optional: Register Services

Required for form-group, validation-message, display, and editor helpers:

builder.Services.AddNoundryTagHelpers();

Conditional Rendering

asp-if / asp-unless

Conditionally render any HTML element based on boolean expressions.

<!-- Render when condition is true -->
<div asp-if="Model.IsVisible">Content shown when true</div>

<!-- Render when condition is false -->
<div asp-unless="Model.IsHidden">Content shown when false</div>

<!-- With expressions -->
<span asp-if="@(Model.Count > 0)">Has items</span>

asp-authz

Authorization-based conditional rendering with policy support.

<!-- Authenticated users only -->
<nav asp-authz="true">Dashboard</nav>

<!-- Unauthenticated users only -->
<div asp-authz="false">Please log in</div>

<!-- ALL policies required (AND logic) -->
<div asp-authz-policy="AdminPolicy,SuperUserPolicy">Admin content</div>

<!-- ANY policy required (OR logic) -->
<div asp-authz-policy-any="AdminPolicy,ModeratorPolicy">Staff content</div>

asp-enabled

Enable or disable form elements based on conditions.

<button asp-enabled="Model.CanSubmit" type="submit">Submit</button>
<input asp-enabled="@(!Model.IsReadOnly)" type="text" />

UI Components

form-group

Generate complete Tailwind CSS form groups with label, input, help text, and validation message.

<form method="post">
 <form-group asp-for="FirstName" label="First Name" required="true" />
 <form-group asp-for="Email" input-type="email" help-text="We'll never share your email" />
 <form-group asp-for="Password" input-type="password" placeholder="8+ characters" />
 <button type="submit">Submit</button>
</form>

Attribute	Default	Description
asp-for	-	Model property binding (required)
label	DisplayName	Custom label text
help-text	null	Help text below input
input-type	auto	HTML input type override
placeholder	null	Input placeholder text
required	auto	Override required state
show-validation	true	Show validation messages

alert

Tailwind CSS alert components with dismiss, auto-dismiss, and icon support.

<alert alert-type="success">Operation completed!</alert>
<alert alert-type="error">An error occurred.</alert>
<alert alert-type="warning" dismissible="true">Please review your input.</alert>
<alert alert-type="info" auto-dismiss="5000">Disappears in 5 seconds.</alert>

asp-auto-hide

Automatically hide elements after a delay with fade, slide-up, or scale animations.

<div asp-auto-hide="true"
 asp-auto-hide-delay="3"
 asp-auto-hide-effect="slide-up"
 class="fixed top-4 right-4 bg-green-500 text-white p-4 rounded-lg">
 File uploaded successfully!
</div>

Data Display Helpers

<display>

Render display templates for model properties.

<display for="CreatedDate" />

<display-name>

Render display name from model metadata.

<display-name for="Email" />

<editor>

Render editor templates for model properties.

<editor for="Email" />

asp-description-for

Render description from [Description] attribute.

<p asp-description-for="Email"></p>

validation-message

Styled validation messages with list support.

<validation-message asp-validation-for="Email" />

asp-display-for

Append display template output to any element.

<span asp-display-for="Name"></span>

Content Helpers

asp-markdown

Render Markdown content to HTML. Uses Markdig with sanitization via HtmlSanitizer for safe output.

asp-truncate

Truncate text to a specified character length with an optional suffix (default: "...").

asp-time-ago

Display dates as relative time strings like "5 minutes ago" or "2 days ago".

asp-highlight

Highlight search terms within text content with customizable highlighting styles.

Complete Example

<!-- Registration form with all tag helpers -->
<alert asp-if="TempData[\"Success\"] != null"
 alert-type="success"
 dismissible="true"
 asp-auto-hide="true"
 asp-auto-hide-delay="6">
 @TempData["Success"]
</alert>

<form method="post">
 <form-group asp-for="FirstName" required="true" />
 <form-group asp-for="LastName" required="true" />
 <form-group asp-for="Email" input-type="email" />
 <form-group asp-for="Password" input-type="password" help-text="8+ characters" />
 <button asp-enabled="Model.CanSubmit" type="submit"
 class="bg-blue-600 text-white px-4 py-2 rounded">Register</button>
</form>

<!-- Admin-only section -->
<div asp-authz-policy="AdminPolicy">
 <h2>Admin Panel</h2>
 <p>Created: <span asp-time-ago="Model.CreatedDate"></span></p>
</div>

Noundry.TagHelpers