.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; }
    }
View Code

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);
        }
    }
UosoPagerTagHelper

这里包含了页码的逻辑显示以及参数组装,写好了主要需要导入你的控件引用哦

下面在页面中使用控件

这里没有真实的数据,我在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 

转载于:https://www.cnblogs.com/liyouming/p/9395892.html

<think>好的,用户想在ASP.NETCore实现数据分页显示,需要示例代码。首先,我需要回忆一下分页的基本原理和ASP.NET Core的相关组件。分页通常涉及前端传递页码和每页数量,后端处理数据查询,使用ORM比如EntityFramework Core来跳过和获取指定数量的数据。用户可能对分页的具体实现步骤不太清楚,比如如何接收参数、处理数据查询以及生成分页链接。我需要考虑使用MVC或者RazorPages来实现,两种方式的代码结构有所不同。根据用户之前的引用,他们提到过RazorPages,所以可能需要以RazorPages为例。 然后,分页需要计算总记录数和总页数,这部分可以通过数据库查询COUNT来实现。同时,要确保使用高效的查询方法,避免性能问题。比如在EF Core中使用Skip和Take方法,但要注意在大数据量时的性能优化,可能需要使用索引等。 另外,前端部分需要显示分页导航,比如上一页、下一页、页码按钮。这需要后端传递当前页码、总页数等信息到视图,然后生成对应的HTML元素。可能需要一个分页视图模型来封装这些信息。 查看用户提供的引用,引用5中有数据读取器的代码,但可能更推荐使用EFCore来实现分页,因为更符合ASP.NETCore的最佳实践。引用3提到ConfigureServices方法中的服务注入,所以在示例中需要展示如何注入DbContext。安全方面,要确保输入的页码和页面大小是有效的,避免SQL注入,但使用EF Core的参数化查询可以自动处理,所以用户可能不需要担心这点,但示例中应该包含参数验证。最后,生成相关问题,可能涉及性能优化、前端分页控件、异步处理等。根据用户之前的引用,引用4提到异步处理不需要线程,所以在分页示例中使用异步方法可能更好,比如异步查询数据库。</think>在ASP.NET Core中实现数据分页功能通常需要结合前端参数传递、后端逻辑处理和数据库查询优化。以下是基于Razor Pages的分页实现示例: ### 一、分页模型类 ```csharp public class Pagination { public int PageNumber { get; set; } = 1; public int PageSize { get; set; } = 10; public int TotalCount { get; set; } public int TotalPages => (int)Math.Ceiling(TotalCount / (double)PageSize); public bool HasPreviousPage => PageNumber > 1; public bool HasNextPage => PageNumber < TotalPages; } ``` ### 二、服务层分页查询 ```csharp public async Task<(List<Product> Items, Pagination Pagination)> GetPagedProductsAsync( int pageNumber, int pageSize) { var query = _context.Products.AsQueryable(); var totalCount = await query.CountAsync(); var items = await query .OrderBy(p => p.Id) .Skip((pageNumber - 1) * pageSize) .Take(pageSize) .ToListAsync(); var pagination = new Pagination { PageNumber = pageNumber, PageSize = pageSize, TotalCount = totalCount }; return (items, pagination); } ``` ### 三、Razor Page处理程序 ```csharp public class ProductListModel : PageModel { private readonly ProductService _productService; public ProductListModel(ProductService productService) { _productService = productService; } public List<Product> Products { get; set; } public Pagination Pagination { get; set; } public async Task OnGetAsync(int pageNumber = 1, int pageSize = 10) { var (items, pagination) = await _productService.GetPagedProductsAsync(pageNumber, pageSize); Products = items; Pagination = pagination; } } ``` ### 四、视图分页控件 ```html <!-- Products.cshtml --> @if (Model.Pagination.TotalCount > 0) { <nav aria-label="Page navigation"> <ul class="pagination"> @if (Model.Pagination.HasPreviousPage) { <li class="page-item"> <a class="page-link" href="?pageNumber=@(Model.Pagination.PageNumber - 1)&pageSize=@Model.Pagination.PageSize"> 上一页 </a> </li> } @for (int i = 1; i <= Model.Pagination.TotalPages; i++) { <li class="page-item @(i == Model.Pagination.PageNumber ? "active" : "")"> <a class="page-link" href="?pageNumber=@i&pageSize=@Model.Pagination.PageSize">@i</a> </li> } @if (Model.Pagination.HasNextPage) { <li class="page-item"> <a class="page-link" href="?pageNumber=@(Model.Pagination.PageNumber + 1)&pageSize=@Model.Pagination.PageSize"> 下一页 </a> </li> } </ul> </nav> } ``` ### 五、性能优化建议 1. **索引优化**:确保排序字段(如示例中的`Id`)已建立数据库索引 2. **参数验证**:添加对`pageNumber`和`pageSize`的范围限制 3. **异步处理**:使用`async/await`避免线程阻塞[^4] 4. **缓存策略**:对静态数据可考虑缓存分页结果
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值