Tag Helper Pack Samples

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

Supported on ASP.NET Core 2.1, 3.1, & 5.0 (This site running on ASP.NET Core 5.0.2 on .NET 5.0.2)

Installation & Issues

See installation instructions and file issues at GitHub.

Examples

Field Template & Data Annotation 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.

Example

123

First name

Last name

Birth date

Customer Orders
Placed on	Total
2/4/2017 3:22:00 PM	$342.39
3/21/2017 11:04:00 AM	$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" />
        <span asp-validation-for="LastName" 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>
    <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].Total"></th>
            </tr>
        </thead>
        <tbody>
            @foreach (var order in Model.Orders)
            {
                <tr>
                    <td asp-display-for="@order.PlacedOn"></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

Source

<markdown>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

Log out

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 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" />