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
See installation instructions and file issues at GitHub.
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="..." />
:
template-name
attribute to override the template used to render the model.html-field-name
attribute to override the HTML field name used to render the model.view-data-*
and view-data
attributes to provide additional ViewData
to the template.
When using <any-element asp-display-for="...">
or
<any-element asp-editor-for="...">
:
asp-template-name
attribute to override the template used to render the model.asp-html-field-name
attribute to override the HTML field name used to render the model.asp-view-data-*
and asp-view-data
attributes to provide additional ViewData
to the template.
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.
<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>
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.
The Customer description is: <span asp-description-for="Customer"><span>
[BindProperty,
Display(Name="Customer", Description = "The Customer Name")]
public Customer Customer { get; set; }
Use <markdown>
to render markdown in the page/view.
Greetings Elizabeth, from markdown!
<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.
<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.
Greetings *Elizabeth*, from **markdown**!
- This is a list
- Of things you could do
- With this Tag Helper
<markdown preserve-indentation> Greetings *Elizabeth*, from **markdown**! - This is a list - Of things you could do - With this Tag Helper </markdown>
Use <script src="..." asp-inline="true">
to inline the contents of the referenced JavaScript file in the
element body.
<script src="~/js/site.js" asp-inline="true"></script>
Use <any-element asp-authz="true|false" asp-authz-policy="...">
to specify authoriziation requirements that
must be satisified for this element to be rendered.
<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>
Use <any-element asp-if="...">
to condtionally suppress an element and its content when
the provided expression is false
.
<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>
Remember, you can compose certain Tag Helpers together on the same element, assuming they all apply to the specific element name.
<render-partial name="_Even" asp-if="(DateTime.UtcNow.Second % 2) == 0" /> <render-partial name="_Odd" asp-if="(DateTime.UtcNow.Second % 2) != 0" />