PaginationTagHelper.AspNetCore

A paging tag helper for ASP.NET Core 2.0 with ajax support and Bootstrap 4.0 generated markup.

Installation

The Pagination Tag Helper is available as a NuGet package.

To install from the package manager

PM> Install-Package PaginationTagHelper.AspNetCore

To install from the .NET CLI

> dotnet add package PaginationTagHelper.AspNetCore

Usage

In your ASP.NET Core Web Application add the following line to _ViewImports.cshtml

@addTagHelper *, PaginationTagHelper.AspNetCore

Add a <pager>/<pager> tag to your view. For example:

<pager link-url="/home/index" page="1" page-size="10" total-items="100"></pager>

Please refer to the sample PaginationTagHelper.AspNetCore.Web application in this repo for an example on how you can use this tag helper in your own projects.

The sample web project currently uses Bootstrap 3.3.

Pager tag helper attributes (required)

Sample Markup

To be added to the view.

<pager link-url="/home/index"
       page="Model.CurrentPage"
       page-size="Model.PageSize"
       total-items="Model.TotalItems">
</pager>

Optional attributes

The following attributes are automatically rendered with a default value and can be overridden by adding them to the <pager> tag.

Accessibility attributes

The following ARIA attributes are automatically rendered with a default value and can be overridden by adding them to the <pager> tag.

Note: {0} will be replaced with the page number if present.

Ajax attributes

To use ajax nest an <ajax-options> tag helper inside the <pager> tag helper and add the required data-ajax-* attributes.

Sample markup

<pager link-url="/home/ajaxpager"
       page="Model.CurrentPage"
       page-size="Model.PageSize"
       total-items="Model.TotalItemCount">
       <ajax-options update-target-id="pagedContent"
           on-begin="showAjaxLoader()"
           on-complete="hideAjaxLoader()">
       </ajax-options>
</pager>