Tag Helper Pack Samples

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

Supported on ASP.NET Core 3.1, 5.0, & 6.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 6.0.7 on .NET 6.0.7 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 <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="...">

Example

123

Customer Orders
Placed on Placed By Total
02/04/2017 15:22:00 Edwards, Elizabeth ¤342.39
03/21/2017 11:04:00 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" />
        <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-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"></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>
    </div>
</form>

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 odd mintues.

Source

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

If combined with Partial

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!

Source

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