.NetCore 實現分頁控件（URL分頁）實戰

上一篇文章介紹了分頁控件的具體實現方式，接下來我們就來做一個分頁控件

后台數據處理就過度的介紹，下面針對URL分頁中的下面幾點做說明：

1、搜索條件的狀態保持

2、點擊分頁需要帶上搜索條件

3、頁碼的邏輯顯示

下面就來實現分頁控件

首先按照上一篇文章中 我們建立了一個UosoPagerOption 分頁參數類，這里我沒有准備太多的參數

 public class UosoPagerOption
    {
        public int PageIndex { get; set; }
        public int PageSize { get; set; }

        public int CountNum { get; set; }
        public int ItemCount { get; set; }
        public int TotalPage
        {
            get
            {
                return ItemCount % PageSize > 0 ? (ItemCount / PageSize + 1) : ItemCount / PageSize;
            }
        }
        public string Url { get; set; }

        public IQueryCollection Query { get; set; }
    }

Query：主要還是用來接收url參數

CountNum：顯示的頁面個數

PageIndex：當前頁

PageSize：每頁數據條數

ItemCount：總數據條數

TotalPage：總頁數

Url：分頁請求的地址

然后我們就是擴展控件了（TagHelper）,整理類UosoPagerTagHelper

public class UosoPagerTagHelper : TagHelper
    {
        public UosoPagerOption UosoPagerOption { get; set; }

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



            output.TagName = "div";
            if (UosoPagerOption.CountNum < 1)
            {
                UosoPagerOption.CountNum = 5;
            }
            if (UosoPagerOption.PageIndex < 1)
            {
                UosoPagerOption.PageIndex = 1;
            }
            if (UosoPagerOption.PageIndex > UosoPagerOption.TotalPage)
            {
                UosoPagerOption.PageIndex = UosoPagerOption.TotalPage;
            }
            if (UosoPagerOption.TotalPage <= 1)
            {
                return;
            }
            var queryarr = UosoPagerOption.Query.Where(c => c.Key != "pageindex" && c.Key != "pagesize").ToList();
            string queryurl = string.Empty;
            foreach (var item in queryarr)
            {
                queryurl += "&" + item.Key + "=" + item.Value;
            }

            output.Content.AppendFormat("<a class=\"prev\" href=\"{0}?pageindex={1}&pagesize={2}{3}\">首頁</a>", UosoPagerOption.Url, 1, UosoPagerOption.PageSize, queryurl);
            output.Content.AppendFormat("<a class=\"prev\" href=\"{0}?pageindex={1}&pagesize={2}{3}\">上一頁</a>", UosoPagerOption.Url, UosoPagerOption.PageIndex - 1, UosoPagerOption.PageSize, queryurl);

            #region 分頁邏輯
            if (UosoPagerOption.PageIndex == 1)
            {
                for (int i = UosoPagerOption.PageIndex; i <= UosoPagerOption.PageIndex + UosoPagerOption.CountNum - 1; i++)
                {
                    if (i <= UosoPagerOption.TotalPage)
                    {
                        if (UosoPagerOption.PageIndex == i)
                        {
                            output.Content.AppendFormat("<span class=\"current\">{0}</span>", i);
                        }
                        else
                        {
                            output.Content.AppendFormat("<a class=\"num\" href=\"{0}?pageindex={1}&pagesize={2}{3}\">{1}</a>", UosoPagerOption.Url, i, UosoPagerOption.PageSize, queryurl);

                        }
                    }
                }
            }

            else if (UosoPagerOption.PageIndex % UosoPagerOption.CountNum == 0)
            {
                for (int i = UosoPagerOption.PageIndex - (UosoPagerOption.CountNum / 2); i <= UosoPagerOption.PageIndex +  UosoPagerOption.CountNum / 2; i++)
                {
                    if (i <= UosoPagerOption.TotalPage)
                    {
                        if (UosoPagerOption.PageIndex == i)
                        {
                            output.Content.AppendFormat("<span class=\"current\">{0}</span>", i);
                        }
                        else
                        {
                            output.Content.AppendFormat("<a class=\"num\" href=\"{0}?pageindex={1}&pagesize={2}{3}\">{1}</a>", UosoPagerOption.Url, i, UosoPagerOption.PageSize, queryurl);

                        }
                    }
                }
            }
            else
            {
                int startindex = UosoPagerOption.CountNum * (UosoPagerOption.PageIndex / UosoPagerOption.CountNum) + 1;
                for (int i = startindex; i <= startindex + UosoPagerOption.CountNum - 1; i++)
                {
                    if (i <= UosoPagerOption.TotalPage)
                    {
                        if (UosoPagerOption.PageIndex == i)
                        {
                            output.Content.AppendFormat("<span class=\"current\">{0}</span>", i);
                        }
                        else
                        {
                            output.Content.AppendFormat("<a class=\"num\" href=\"{0}?pageindex={1}&pagesize={2}{3}\">{1}</a>", UosoPagerOption.Url, i, UosoPagerOption.PageSize, queryurl);

                        }
                    }
                }

            }

            #endregion

            //for (int i = 1; i <= UosoPagerOption.TotalPage; i++)
            //{


            //    if (UosoPagerOption.PageIndex == i)
            //    {
            //        output.Content.AppendFormat("<span class=\"current\">{0}</span>", i);
            //    }
            //    else
            //    {
            //        output.Content.AppendFormat("<a class=\"num\" href=\"{0}?pageindex={1}&pagesize={2}{3}\">{1}</a>", UosoPagerOption.Url, i, UosoPagerOption.PageSize, queryurl);

            //    }

            //}
            output.Content.AppendFormat("<a class=\"next\" href=\"{0}?pageindex={1}&pagesize={2}{3}\">下一頁</a>", UosoPagerOption.Url, UosoPagerOption.PageIndex + 1, UosoPagerOption.PageSize, queryurl);
            output.Content.AppendFormat("<a class=\"next\" href=\"{0}?pageindex={1}&pagesize={2}{3}\">尾頁</a>", UosoPagerOption.Url, UosoPagerOption.TotalPage, UosoPagerOption.PageSize, queryurl);

            base.Process(context, output);
        }
    }

這里包含了頁碼的邏輯顯示以及參數組裝，寫好了主要需要導入你的控件引用哦

下面在頁面中使用控件

這里沒有真實的數據，我在Controller中模擬了分頁參數信息

ViewBag.Option = new UosoPagerOption()
            {
                ItemCount = 100,
                PageSize = pagesize, //5
                PageIndex = pageindex,
                CountNum = 5,
                Url = Request.Path.Value,
                Query = Request.Query
            };

接下來請求頁面看下具體效果

鼠標放在監控下頁碼的地址鏈接，可以看到每頁5條，第2頁的參數

當我們使用查詢后搜索下，同時監控頁碼參數可以看到保留對應的搜索條件

接下里就是搜索條件狀態的保持了，解決方案可以寫一個js插件處理url參數並賦值到對應的控件（根據key值找到對應的name的控件）

 根據這個我們可以繼續擴展哦  如分頁信息的顯示以及 自定義的 GO PageIndex 轉到某一頁 或者自定義每頁顯示的PageSize