0

0

Blazor 数据列表分页逻辑实现教程

星降

星降

发布时间:2026-01-02 10:11:02

|

436人浏览过

|

来源于php中文网

原创

blazor中实现数据列表分页需定义currentpage、pagesize、totalitems和paginateddata,通过skip/take切片获取当前页数据,计算totalpages并渲染页码导航,支持首页、上一页、下一页、末页跳转。

blazor 数据列表分页逻辑实现教程

Blazor 中实现数据列表分页,核心是控制每页显示数量、当前页码、总条数,并配合 UI 触发页码切换。不依赖第三方组件也能轻松完成,关键是把“数据切片”和“页码状态管理”理清楚。

一、基础分页参数定义

在组件(.razor)的 @code 块中声明几个必要字段:

  • currentPage:当前页码(从 1 开始更符合用户直觉)
  • pageSize:每页显示条数(如 10、20)
  • totalItems:数据总条数(通常来自 API 或服务)
  • paginatedData:当前页要展示的数据子集(计算属性或方法返回)

二、计算当前页数据(切片逻辑)

用 C# 的 skiptake 最直接:

private List<Item> PaginatedData =>
    AllItems
        .Skip((currentPage - 1) * pageSize)
        .Take(pageSize)
        .ToList();

注意:AllItems 是完整数据源(可来自服务、内存列表或异步加载结果)。如果数据量大,建议后端分页;前端分页仅适用于总数可控(比如 ≤ 5000 条)的场景。

通用产品企业网站(.NET2.0)1.0
通用产品企业网站(.NET2.0)1.0

1、系统采用.net2.0开发,数据库access2、三层架构,数据层、逻辑层和表示层分离3、系统完全使用div+css布局,可以灵活处理界面4、技术特点: 使用模板页,大大减少代码量 动态生成竖向导航菜单 ul li实现表格 各种自定义用户空间 Reapter等数据控件的灵活运用

下载

三、生成页码导航 UI

用循环渲染页码按钮,常见做法是显示「首页、上一页、123…、下一页、末页」。简化版可先做连续页码:

  • 算出总页数:int totalPages = (int)Math.Ceiling(totalItems / (double)pageSize);
  • @for (int i = 1; i 渲染按钮
  • 每个按钮绑定点击事件:@onclick="() => GoToPage(i)"
  • GoToPage(int page) 方法里校验范围并更新 currentPage,再触发重新渲染

四、支持跳转与边界处理

用户可能输入页码或点「上/下一页」,需加防护:

  • 跳转前判断:if (page totalPages) page = totalPages;
  • 「上一页」逻辑:currentPage = Math.Max(1, currentPage - 1);
  • 「下一页」逻辑:currentPage = Math.Min(totalPages, currentPage + 1);
  • 修改 currentPage 后,Blazor 会自动重绘 PaginatedData 和页码栏

基本上就这些。不需要额外库,几行逻辑 + 简单 UI 就能跑起来。重点是把“页码→索引→切片”的映射写对,其余都是围绕它展开的交互补充。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
string转int
string转int

在编程中,我们经常会遇到需要将字符串(str)转换为整数(int)的情况。这可能是因为我们需要对字符串进行数值计算,或者需要将用户输入的字符串转换为整数进行处理。php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

1010

2023.08.02

int占多少字节
int占多少字节

int占4个字节,意味着一个int变量可以存储范围在-2,147,483,648到2,147,483,647之间的整数值,在某些情况下也可能是2个字节或8个字节,int是一种常用的数据类型,用于表示整数,需要根据具体情况选择合适的数据类型,以确保程序的正确性和性能。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

611

2024.08.29

c++怎么把double转成int
c++怎么把double转成int

本专题整合了 c++ double相关教程,阅读专题下面的文章了解更多详细内容。

334

2025.08.29

C++中int的含义
C++中int的含义

本专题整合了C++中int相关内容,阅读专题下面的文章了解更多详细内容。

235

2025.08.29

c++怎么把double转成int
c++怎么把double转成int

本专题整合了 c++ double相关教程,阅读专题下面的文章了解更多详细内容。

334

2025.08.29

C++中int、float和double的区别
C++中int、float和double的区别

本专题整合了c++中int和double的区别,阅读专题下面的文章了解更多详细内容。

106

2025.10.23

go语言 数组和切片
go语言 数组和切片

本专题整合了go语言数组和切片的区别与含义,阅读专题下面的文章了解更多详细内容。

55

2025.09.03

C# ASP.NET Core微服务架构与API网关实践
C# ASP.NET Core微服务架构与API网关实践

本专题围绕 C# 在现代后端架构中的微服务实践展开,系统讲解基于 ASP.NET Core 构建可扩展服务体系的核心方法。内容涵盖服务拆分策略、RESTful API 设计、服务间通信、API 网关统一入口管理以及服务治理机制。通过真实项目案例,帮助开发者掌握构建高可用微服务系统的关键技术,提高系统的可扩展性与维护效率。

9

2026.03.11

Go高并发任务调度与Goroutine池化实践
Go高并发任务调度与Goroutine池化实践

本专题围绕 Go 语言在高并发任务处理场景中的实践展开,系统讲解 Goroutine 调度模型、Channel 通信机制以及并发控制策略。内容包括任务队列设计、Goroutine 池化管理、资源限制控制以及并发任务的性能优化方法。通过实际案例演示,帮助开发者构建稳定高效的 Go 并发任务处理系统,提高系统在高负载环境下的处理能力与稳定性。

22

2026.03.10

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Node.js 教程
Node.js 教程

共57课时 | 13.2万人学习

CSS3 教程
CSS3 教程

共18课时 | 7万人学习

Vue 教程
Vue 教程

共42课时 | 9.5万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号