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.
This will only render if the user is authenticated and authorized via the "AdminPolicy" policy.

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 odd seconds. I have been rendered 4432 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 odd partial! I have been rendered 4434 times!

Source

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