TagHelpers

This part contains number of tag-helpers that could be used in many different situations.

Contents

AnchorMatchTagHelper

An AnchorTagHelper implementation that adds CSS class to target <a> element when current Area, Controller and Action RouteData values correspond to specified ones.

<a asp-action="Details" asp-route-id="@user.Id" asp-match-class="active" class="nav-link">Details</a>
<a asp-action="Contracts" asp-route-id="@user.Id" asp-match-class="active" class="nav-link">Contracts</a>
<a asp-action="Statistics" asp-route-id="@user.Id" asp-match-class="active" class="nav-link">Statistics</a>

Each of links above will be highlighted by adding active css class only when user currently located on corresponding page (which means required area, controller and action).

AppendClassTagHelper

A TagHelper implementation that adds CSS class to target element when "asp-append-if" is set to true.

<a asp-action="Index" asp-controller="Departments" asp-append-if='@(controller == "Departments")' asp-append-class="active" class="dropdown-item">Departments list</a>

PageInfoTagHelper

A TagHelper implementation allowing to organize info-text about pagination in a simple manner.

The PageInfoOptions are:

<page-info asp-options='new PageInfoOptions { PagedList = Model.Items, Format = "Page {0} of {1}. Showing items {2} through {3} of {4}." }' />

After rendering it will give:

<div class="page-info">Page 7 of 12. Showing items 61 through 70 of 116.</div>

PageSizeTagHelper

A TagHelper implementation that creates dropdown menu for page size changing.

The PageSizeOptions are:

<page-size asp-options='@(new PageSizeOptions { ItemsPerPage = Model.Query.ItemsPerPage, DefaultPageSize = Model.Query.PageSize, AllItemsFormat = "Show all", DropdownToggleCssClass = "btn btn-outline-secondary bd bd-grey-300" })' />

After rendering it will give:

<div class="page-size dropdown dropup">
    <button class="btn btn-outline-secondary bd bd-grey-300 dropdown-toggle" data-toggle="dropdown" type="button">25</button>
    <div class="dropdown-menu-right dropdown-menu">
        <a class="dropdown-item" href="/ru/admin/bundles/?pagesize=25">25</a>
        <a class="dropdown-item" href="/ru/admin/bundles/?pagesize=50">50</a>
        <a class="dropdown-item" href="/ru/admin/bundles/?pagesize=100">100</a>
    </div>
</div>

PaginationTagHelper

A TagHelper implementation creating an array of buttons and other elements forming UI pagination controls without boring manual work.

The PaginationOptions are:

<pagination asp-options='@(new PaginationOptions {
    PagedList = Model.Items,
    UlElementCssClasses = new[] { "pagination", "pagination-basic", "pagination-primary", "mg-b-0" },
    LinkToFirstPageFormat = "«",
    LinkToLastPageFormat = "»"
})' />

After rendering it will give:

<div class="pagination-container">
    <ul class="mg-b-0 pagination-primary pagination-basic pagination">
        <li class="page-item first pagination-first"><a class="page-link" href="/admin/users/?page=1">«</a></li>
        <li class="page-item disabled pagination-ellipses"><a class="page-link">…</a></li>
        <li class="page-item"><a class="page-link" href="/admin/users/?page=3">3</a></li>
        <li class="page-item active"><a class="page-link">4</a></li>
        <li class="page-item"><a class="page-link" href="/admin/users/?page=5">5</a></li>
        <li class="page-item disabled pagination-ellipses"><a class="page-link">…</a></li>
        <li class="page-item last pagination-last"><a class="page-link" href="/admin/users/?page=256">»</a></li>
    </ul>
</div>

SortTagHelper

A TagHelper implementation creating sorting controls for UI.

The SortOptions are:

<li class="list-sort-item list-inline-item"
    asp-sort="Year"
    asp-default-sort="@Model.Query.Sort"
    asp-default-order="@Model.Query.Order">
    Sort by year
</li>

After rendering it will give:

<li class="list-sort-item list-inline-item">
    <a class="sort" href="/Books/?sort=Year&order=Asc">Sort by year</a>
</li>

TagHelperOutputExtensions

Last updated