.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