Comment on page
TagHelpers
This part contains number of tag-helpers that could be used in many different situations.
- AppendClassTagHelper - add needed css-classes to target element dynamically regarding provided condition;
An
AnchorTagHelper
implementation that adds CSS class to target <a>
element when current Area, Controller and Action RouteData
values correspond to specified ones.Property name | Property type | Description |
---|---|---|
MatchClass | string | A CSS class to add to html element. |
<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).A
TagHelper
implementation that adds CSS class to target element when "asp-append-if" is set to true
.Property name | Property type | Description |
---|---|---|
Append | bool | A condition that determines whenever class should or shouldn't be added. |
Class | bool | A CSS class to add to html element. |
<a asp-action="Index" asp-controller="Departments" asp-append-if='@(controller == "Departments")' asp-append-class="active" class="dropdown-item">Departments list</a>
A
TagHelper
implementation allowing to organize info-text about pagination in a simple manner.Property name | Property type | Description |
---|---|---|
Options | PageInfoOptions | Options to be used while creating info-text about pagination. |
The
PageInfoOptions
are:Property name | Property type | Description |
---|---|---|
PagedList | IPagedList | An instance of Structr.Collections.IPagedList to get information about pagination from. |
Format | string | Info-text format string. It uses string-interpolation with following 5 parameters: 0 - page number, 1 - total pages, 2 - first item on page, 3 - last item on page, 4 - total items. |
<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>
A
TagHelper
implementation that creates dropdown menu for page size changing.Property name | Property type | Description |
---|---|---|
Options | PageSizeOptions | Options influencing appearance of dropdown menu. |
The
PageSizeOptions
are:Property name | Property type | Description |
---|---|---|
AllItemsFormat | string | A text to show for menu element corresponding to visualizing of all items. |
DropdownMenuAlign | PageSizeDropdownMenuAlign | Align of dropdown menu elements. |
ContainerCssClass | string | Css class for controls container. |
DropdownCssClass | string | Css class for div container of dropdown defining count of elements on page. |
DropdownToggleCssClass | string | Css class for button of dropdown defining count of elements on page. |
DropdownToggleAttribute | string | Name of html-attribute to identify a dropdown. |
ItemsPerPage | IEnumerable<int> | List of possible values of page sizes. |
PageSizeRouteParamName | string | Name of route parameter containing the page size value. |
DefaultPageSize | int | Page size by default. |
<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>
A
TagHelper
implementation creating an array of buttons and other elements forming UI pagination controls without boring manual work.Property name | Property type | Description |
---|---|---|
Options | PaginationOptions | Options influencing appearance of UI pagination controls. |
The
PaginationOptions
are:Property name | Property type | Description |
---|---|---|
PagedList | IPagedList | An instance of Structr.Collections.IPagedList to get information about pagination from. |
PageUrlGenerator | Func<int, string> | Factory intended for generation of urls to different pages. |
Display | PaginationDisplayMode | Determines display mode for all pagination controls. |
DisplayLinkToFirstPage, etc. | PaginationDisplayMode | Determines display mode for different buttons. |
DisplayLinkToIndividualPages | bool | Determines whenever buttons to specific pages should be displayed or not. Default value is true . |
MaximumPageNumbersToDisplay | bool | Maximum count of buttons with page numbers to display. Default value is 3. |
DisplayEllipsesWhenNotShowingAllPageNumbers | bool | Determines whenever to display ellipses between sets of buttons or not. |
EllipsesFormat | string | Format of ellipsis displayed between sets of page buttons. Default value is " ... ". |
LinkToFirstPageFormat, etc. | string | Format of buttons redirecting to first and other pages respectively. Default values are «« , « , etc. |
FunctionToDisplayEachPageNumber | Func<int, string> | Allows to transform output of page numbers allowing to build for example something like "First", "Second", etc. |
DelimiterBetweenPageNumbers | string | Delimiter strings to place between page numbers. |
FunctionToTransformEachPageLink | string | Method allowing to format HTML for li and a inside of paging controls, using TagBuilders. |
PageNumberRouteParamName | string | Route parameter name for page number. Default value is page . |
<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>
A
TagHelper
implementation creating sorting controls for UI.Property name | Property type | Description |
---|---|---|
Sort | string | Name of Model field to sort by. When value of field equals DefaultSort then sorting will be performed. |
DefaultSort | string | Value of field to sort by, taken from query (url). For example @Model.Query.Sort . |
DefaultOrder | SortOrder? | Sort order to be used, taken from query (url). For example @Model.Query.Order . |
Options | SortOptions | Options influencing appearance of sorting controls. |
The
SortOptions
are:Property name | Property type | Description |
---|---|---|
LinkCssCLass | string | Css class for links. Default value is sort . |
ActiveCssClass | string | Css class for active element. Default value is active . |
SortRouteParamName | string | Name of route parameter containing name of field to sort by. Default value is sort . |
OrderRouteParamName | string | Route parameter name for sort order. Default value is order . |
<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>
Method name | Return type | Description |
---|---|---|
AddClass | void | Adds specified class to TagHelper output using using built-in instance of the System.Text.Encodings.Web.HtmlEncoder . |
RemoveClass | void | Removes specified class from TagHelper output using built-in instance of the System.Text.Encodings.Web.HtmlEncoder . |
Last modified 1yr ago