Tag Helper Pack Samples

A set of useful, and possibly opinionated, Tag Helpers for ASP.NET Core.

Supported on ASP.NET Core 6.0, & 7.0. Also supported on ASP.NET Core 2.1 when run on .NET Framework 4.7.1 or higher.

This site running on ASP.NET Core 7.0.20 on .NET 7.0.20 on Linux

Installation & Issues

See installation instructions and file issues at GitHub.

Examples

Field Template, Data Annotation, & Model Tag Helpers

Use <any-element asp-display-for="..."> or <display for="..."> to render a model value using the relevant field display template.

Use <any-element asp-editor-for="..."> or <editor for="..."> to render a model value using the relevant field editor template.

Use <any-element asp-display-name-for="..."> or <display-name for="..."> to render a model property's display name using the relevant field display template.

Use <any-element asp-description-for="..."> to display the content of a description from the DisplayAttribute instance decorating a Model property. Works on any empty HTML element.

Use <label asp-for="..."> to include the model property's description in the title attribute.

When using <display for="..." /> or <editor for="..." />:

When using <any-element asp-display-for="..."> or <any-element asp-editor-for="...">:

Use <datalist asp-list="..."> to render a <datalist> element containing <option> elements representing each of the values from the specified list. Set input elements to use the list using the list attribute, e.g. <input asp-for="..." list="countries" /><datalist id="countries" asp-list="...">

Use <button asp-enabled="..."> to disable/enable button.

Example

123

The customer's country.
Customer Orders
Placed on Placed By Total
2017-02-04 Edwards, Elizabeth ¤342.39
2017-03-21 Edwards, Elizabeth ¤1,983.44

Source

<form method="post">
    <div class="form-group">
        <label asp-for="Id"></label>
        <p class="form-control-static" asp-display-for="Id"></p>
    </div>
    <div class="form-group">
        <label asp-for="FirstName"></label>
        <editor for="FirstName" view-data="@(new Dictionary<string, object>{ ["color"] = "red" })" view-data-font-style="@("italic")" />
        <span asp-validation-for="FirstName" class="text-danger"></span>
    </div>
    <div class="form-group">
        <label asp-for="LastName"></label>
        <editor for="LastName" template-name="String2" />
        <span asp-validation-for="LastName" class="text-danger"></span>
    </div>
    <div class="form-group">
        <label asp-display-name-for="LastName" for="CustomerLastName"></label>
        <editor for="LastName" html-field-name="CustomerLastName" />
        <span asp-validation-for="LastName" data-valmsg-for="CustomerLastName" class="text-danger"></span>
    </div>
    <div class="form-group">
        <label asp-for="BirthDate"></label>
        <editor for="BirthDate" />
        <span asp-validation-for="BirthDate" class="text-danger"></span>
    </div>
    <div class="form-group">
        <label asp-for="Customer.Country"></label>
        <input asp-for="Customer.Country" class="form-control" list="countries" />
        <datalist id="countries" asp-list="@Models.Customer.Countries"><option value="GB" /></datalist>
        <span asp-description-for="Customer.Country" class="help-block"></span>
        <span asp-validation-for="Customer.Country" class="text-danger"></span>
    </div>
    <table class="table table-bordered table-condensed">
        <caption>Customer Orders</caption>
        <thead>
            <tr>
                <th asp-display-name-for="Orders[0].PlacedOn"></th>
                <th asp-display-name-for="Orders[0].Customer"></th>
                <th asp-display-name-for="Orders[0].Total"></th>
            </tr>
        </thead>
        <tbody>
            @foreach (var order in Model.Orders)
            {
                <tr>
                    <td asp-display-for="@order.PlacedOn" asp-view-data-format="@("yyyy-MM-dd")"></td>
                    <td asp-display-for="@order.Customer" asp-template-name="CustomerName"></td>
                    <td asp-display-for="@order.Total"></td>
                </tr>
            }
        </tbody>
    </table>
    <div class="form-group">
        <div class="text-danger" asp-validation-summary="ModelOnly"></div>
        <button type="submit" class="btn btn-primary">Save</button>
        <button type="submit" class="btn btn-primary" asp-enabled="false">Disabled Button</button>
    </div>
</form>

Description For Tag Helper

Use <any-element asp-description-for="..."> to display the content of a Description from the DisplayAttribute instance decorating a Model property. Works on any empty HTML element.

Example

The Customer description is: The Customer Name

Source

Razor Syntax
The Customer description is: <span asp-description-for="Customer"><span>
C# Model

[BindProperty, 
 Display(Name="Customer", Description = "The Customer Name")]
public Customer Customer { get; set; }

Markdown Tag Helper

Use <markdown> to render markdown in the page/view.

Example

Greetings Elizabeth, from markdown!

  • This is a list
  • Of things you could do
  • With this Tag Helper
Works on my machine

Source

<markdown allow-html="true">
    Greetings *Elizabeth*, from **markdown**!

    - This is a list
    - Of things you could do
    - With this Tag Helper</markdown>

    <img src="/images/works-on-my-machine.png" alt="Works on my machine" />
</markdown>

By default, indentation is normalized, which is why the previous example renders correctly. To turn off indentation normalization, set preserve-indentation to true. If you do so, you'll need to remove leading whitespace between the <markdown> tag and the content.

Source

<markdown allow-html="true" preserve-indentation>Greetings *Elizabeth*, from **markdown**!

- This is a list
- Of things you could do
- With this Tag Helper</markdown>

<img src="/images/works-on-my-machine.png" alt="Works on my machine" />

If you don't, you might end up with unexpected code blocks.

Example

        Greetings *Elizabeth*, from **markdown**!

        - This is a list
        - Of things you could do
        - With this Tag Helper

Source

<markdown preserve-indentation>
        Greetings *Elizabeth*, from **markdown**!

        - This is a list
        - Of things you could do
        - With this Tag Helper
</markdown>

Script Inlining Tag Helper

Use <script src="..." asp-inline="true"> to inline the contents of the referenced JavaScript file in the element body.

Example

Source

<script src="~/js/site.js" asp-inline="true"></script>

AuthZ Tag Helper

Use <any-element asp-authz="true|false" asp-authz-policy="..."> to specify authoriziation requirements that must be satisified for this element to be rendered.

Example

This will only render if the user is authenticated.

Source

<div asp-authz>This will only render if the user is authenticated.</div>
<div asp-authz="false">This will only render when the user is <strong>*not*</strong> authenticated.</div>
<div asp-authz-policy="AdminPolicy">This will only render if the user is authenticated and authorized via the "AdminPolicy" policy.</div>

If Tag Helper

Use <any-element asp-if="..."> to condtionally suppress an element and its content when the provided expression is false.

Example

This paragraph will only render during even seconds. I have been rendered 1832 times.

Source

<div asp-if="(DateTime.UtcNow.Second % 2) == 0">This paragraph will only render during <strong>even</strong> seconds.</div>
<div asp-if="(DateTime.UtcNow.Second % 2) == 1">This paragraph will only render during <strong>odd</strong> seconds.</div>

If combined with RenderPartial

Remember, you can compose certain Tag Helpers together on the same element, assuming they all apply to the specific element name.

Example

Greetings from this even partial! I have been rendered 1832 times!

Source

<render-partial name="_Even" asp-if="(DateTime.UtcNow.Second % 2) == 0" />
<render-partial name="_Odd" asp-if="(DateTime.UtcNow.Second % 2) != 0" />