In the process of making blog, we need a paging control

The implementation code:

using Microsoft.AspNetCore.Razor.TagHelpers;
using System;
using System.Collections;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace Zdy.Blog.TagExtends
{
    public class PagerOption
    {
        public int PageIndex { get; set; }
        public int TotalCount { get; set; }
        public int PageSize { get; set; }
        public string RouteUrl { get; set; }
        public int PagerCount { get; set; } = 4;
    }

    public class PagerTagHelper : TagHelper
    {

        public PagerOption PagerOption { get; set; }


        public override void Process(TagHelperContext context, TagHelperOutput output)
        {

            output.TagName = "div";

            if (PagerOption.PageSize <= 0) { PagerOption.PageSize = 15; }
            if (PagerOption.PageIndex <= 0) { PagerOption.PageIndex = 1; }
            if (PagerOption.TotalCount <= 0) { return; }

            //Calculate Pagination
            var totalPage = PagerOption.TotalCount / PagerOption.PageSize + (PagerOption.TotalCount % PagerOption.PageSize > 0 ? 1 : 0);
            if (totalPage <= 0) { return; }

            var pageNumbers = new ArrayList();
            int start = 1;
            int end = PagerOption.PagerCount;
            bool isShowStart = false;
            bool isShowEnd = false;
            if (PagerOption.PageIndex >= PagerOption.PagerCount)
            {
                start = PagerOption.PageIndex - PagerOption.PagerCount / 2;
                isShowStart = true;
            }
            else
            {
                isShowStart = false;
            };
            end = start + PagerOption.PagerCount - 1;
            if (end > totalPage)
            {
                end = totalPage;
                isShowEnd = false;
            }
            else
            {
                isShowEnd = true;
            };
            for (var i = start; i <= end; i++)
            {
                pageNumbers.Add(i);
            };

            //Current routing address
            if (string.IsNullOrEmpty(PagerOption.RouteUrl))
            {

                //PagerOption.RouteUrl = helper.ViewContext.HttpContext.Request.RawUrl;
                if (!string.IsNullOrEmpty(PagerOption.RouteUrl))
                {

                    var lastIndex = PagerOption.RouteUrl.LastIndexOf("/");
                    PagerOption.RouteUrl = PagerOption.RouteUrl.Substring(0, lastIndex);
                }
            }
            PagerOption.RouteUrl = PagerOption.RouteUrl.TrimEnd('/');

            //Structure paging style
            var pagerBuilder = new StringBuilder(string.Empty);
            pagerBuilder.Append("<nav class=\"pagination\">");

            if (isShowStart)
            {
                pagerBuilder.AppendFormat("<a class=\"page-number\" href=\"{0}/{1}\" aria-label=\"Previous\"><i class=\"icon-arrow-left\"></i></a>",
                   PagerOption.RouteUrl,
                   PagerOption.PageIndex - 1 <= 0 ? 1 : PagerOption.PageIndex - 1);
            }

            foreach (var i in pageNumbers)
            {
                if (Convert.ToInt32(i) == PagerOption.PageIndex)
                {
                    pagerBuilder.AppendFormat("<span class=\"page-number current\">{0}</span>",
                    i,
                    PagerOption.RouteUrl);
                }
                else
                {
                    pagerBuilder.AppendFormat("<a class=\"page-number\" href=\"{1}/{0}\">{0}</a>",
                    i,
                    PagerOption.RouteUrl);
                }
            }

            if (isShowEnd)
            {
                pagerBuilder.AppendFormat("<a class=\"page-number\" href=\"{0}/{1}\" aria-label=\"Next\"><i class=\"icon-arrow-right\"></i></a>",
                  PagerOption.RouteUrl,
                  PagerOption.PageIndex + 1 > totalPage ? PagerOption.PageIndex : PagerOption.PageIndex + 1);
            }

            pagerBuilder.Append("</nav>");

            output.Content.SetHtmlContent(pagerBuilder.ToString());
        }

    }
}

Usage:

  1. Add declaration tag in the header of. Cshtml file
@addTagHelper "Zdy.Blog.TagExtends.PagerTagHelper,Zdy.Blog"
  1. Configure pageoption in controller
[Route("/{pageIndex:int?}")]
public async Task<IActionResult> Index(int pageIndex = 1)
{
    var posts = await _repository.FindAsync<Post, DateTime>(t => t.IsPublished, t => t.PubDate, int.Parse(_config["blog:pageSize"]), pageIndex, out int count);

    var pageOption = new PagerOption
    {
        PageIndex = pageIndex,
        PageSize = int.Parse(_config["blog:pageSize"]),
        TotalCount = count,
        RouteUrl = "/"
    };

    ViewBag.PagerOption = pageOption;

    return View(posts);
}
  1. Mark the paging control as HTML
 <pager pager-option="@ViewBag.PagerOption"></pager>

Reference for reference

Code Example

All Comments

Leave a Reply Cancel Reply

Tips: Your email address will not be disclosed!

If you can't see clearly,please click to change...

Popular Posts

Collections