How to create a page navigation partial view?
I have solution for using tag helpers
public class PaginationTagHelper : TagHelper
{
[HtmlAttributeName("onclick-method-name")]
public string OnClick { get; set; }
[HtmlAttributeName("current-page-index")]
public int CurrentPage { get; set; }
[HtmlAttributeName("end-page")]
public int EndPage { get; set; }
[HtmlAttributeName("start-page")]
public int StartPage { get; set; }
[HtmlAttributeName("total-page-count")]
public int TotalPages { get; set; }
/// <summary>
/// Process
/// </summary>
/// <param name="context"></param>
/// <param name="output"></param>
public override void Process(TagHelperContext context, TagHelperOutput output)
{
var onclickMethodFormat = OnClick + "({0})"; // 0 - pagenumber .
var onclickMethod = string.Empty;
StringBuilder content = new StringBuilder();
content.Append("<nav aria-label=\"Page navigation example\" class=\"pagin-holder clearfix\"> <ul class=\"pagination pagination-sm\">");
if (EndPage > 1)
{
if (CurrentPage > 1)
{
onclickMethod = string.Format(onclickMethodFormat, CurrentPage - 1);
content.Append("<li class=\"page-item\"> <a href=\"#\" class=\"page-link\" onclick=\"" + onclickMethod + "\">Previous</a></li>");
}
for (var page = StartPage; page <= EndPage; page++)
{
onclickMethod = string.Format(onclickMethodFormat, page);
if (page == CurrentPage)
{
content.Append("<li class=\"page-item active\"><a href=\"#\" class=\"page-link\"onclick=\"" + onclickMethod + "\">").Append(page).Append(" </a>");
}
else
{
content.Append("<li class=\"page-item\"><a href=\"#\" class=\"page-link\"onclick=\"" + onclickMethod + "\">").Append(page).Append(" </a>");
}
}
if (CurrentPage < TotalPages)
{
onclickMethod = string.Format(onclickMethodFormat, CurrentPage + 1);
content.Append("<li class=\"page-item\"> <a href=\"#\" class=\"page-link\" onclick=\"" + onclickMethod + "\">Next</a> </li>");
}
}
output.Content.AppendHtml(content.ToString());
}
}
This is my custom pagination class
public class PagingInfo
{
public int PageIndex { get; set; }
public int PageSize { get; set; }
public string SortOrder { get; set; }
public byte SortColumn { get; set; }
public string SortColumnName { get; set; }
public int TotalRecords { get; set; }
public string SearchText { get; set; }
public byte FilterByColumn { get; set; }
public string FilterByColumnName { get; set; }
}
public class Pager
{
public Pager(long totalItems, int? page, int pageSize = 10)
{
// calculate total, start and end pages
var totalPages = (int)Math.Ceiling((decimal)totalItems / (decimal)pageSize);
var currentPage = page != null ? (int)page : 1;
var startPage = currentPage - 5;
var endPage = currentPage + 4;
if (startPage <= 0)
{
endPage -= (startPage - 1);
startPage = 1;
}
if (endPage > totalPages)
{
endPage = totalPages;
if (endPage > 10)
{
startPage = endPage - 9;
}
}
TotalItems = totalItems;
CurrentPage = currentPage;
PageSize = pageSize;
TotalPages = totalPages;
StartPage = startPage;
EndPage = endPage;
}
public long TotalItems { get; set; }
public int CurrentPage { get; set; }
public int PageSize { get; set; }
public int TotalPages { get; set; }
public int StartPage { get; set; }
public int EndPage { get; set; }
}
Added tag helper in view:
<Pagination onclick-method-name="Index" current-page-index="Model.PagingInfo.CurrentPage" end-page="Model.PagingInfo.EndPage"
start-page="Model.PagingInfo.StartPage" total-page-count="Model.PagingInfo.TotalPages"></Pagination>