Blazor寻呼机概述

的Blazor寻呼机组件将允许您在Blazor应用程序中为数据添加分页。我们在Grid和ListView等组件中使用它，您也可以将它作为独立组件用于您自己的模板和数据。

寻呼机为用户提供了更改页面的UI。对于开发人员，它提供了页面索引，以便您只能呈现相关的数据部分和事件你可以用它来实现按需负荷．

寻呼机组件是Blazor的Telerik UI，一个专业级的UI库，包含100个本地组件，用于构建现代和功能丰富的应用程序。想要试用它，可以注册一个30天的免费试用期。

下载免费试用

创建Blazor寻呼机

1. 添加TelerikPager标记到Razor文件。

2. 设置总计属性设置为数据源中的项数。

3. 设置页大小参数确定所需的数据子集。它支持双向绑定。

4. 设置页面(单向或双向绑定)参数int对象。页面索引是基于1的。

< TelerikPager总= " @Games。计数" PageSize="@PageSize" @bind- page ="@ page "> @{//获取并渲染基于pager信息var pageData = Games的相关数据部分。Skip((Page - 1) * PageSize).Take(PageSize).ToList();@foreach (Game Game in pageData) {
}} @code {public int PageSize {get;设置;} = 3;公共int页面{获取;设置;} = 1;public List Games {get;设置; } protected override void OnInitialized() { Games = new List(); for (int i = 1; i < 20; i++) { Games.Add(new Game() { GameId = i, GameName = $"Game {i}" }); } } public class Game { public int GameId { get; set; } public string GameName { get; set; } } }

事件

Blazor寻呼机公开PageChanged和PageSizeChanged事件，您可以处理这些事件并进一步自定义其行为。阅读更多关于Blazor寻呼机事件．

寻呼机参数

Blazor寻呼机提供了各种参数，允许您配置组件:

例子

按需负载

一次性加载所有数据可能是一项代价高昂的操作。在这种情况下，使用PageChanged事件，以获取要呈现的新数据子集。重要的是始终提供正确的总计将整个数据源中的项数统计给组件，以便它能够呈现正确数量的页面按钮。

@{
 @foreach (Game Game Game in PagedDataToRender) {
 
 
@游戏。GameName
 
@游戏。GameId
 
发行于:@game.ReleaseDate.ToShortDateString() 
 
 
} 
}   @code {int TotalGames {get;设置;} int CurrPage {get;设置;} = 1;//页面索引是基于1的int PageSize {get;设置;} = 5;公共列表< int ?> GamesPerPage = new List { 5, 10, 20, null }; List PagedDataToRender { get; set; } protected override async Task OnInitializedAsync() { await LoadDataOnDemand(); } async Task PageChangedHandler(int page) { CurrPage = page; await LoadDataOnDemand(); } async Task LoadDataOnDemand() { TotalGames = await GetCountFromService(); PagedDataToRender = await GetPagedDataFromService(CurrPage - 1, PageSize); } // simulate a service below private List _allData { get; set; } = Enumerable.Range(1, 100).Select(x => new Game { GameName = $"Game {x}", GameId = x, ReleaseDate = DateTime.Now.AddDays(-x) }).ToList(); public async Task GetCountFromService() { return await Task.FromResult(_allData.Count); } public async Task> GetPagedDataFromService(int pageIndex, int pageSize) { var pagedData = _allData.Skip(pageIndex * pageSize).Take(pageSize); return await Task.FromResult(pagedData.ToList()); } // In real-case scenario this model should be in a separate file public class Game { public int GameId { get; set; } public string GameName { get; set; } public DateTime ReleaseDate { get; set; } } }

双向绑定

的页面参数支持双向绑定，因此它可以响应来自其他元素的更改，也可以更新其他元素。这是该组件最直接的用法。作为替代，使用PageChanged事件来实现对数据分页时的附加逻辑，例如按需加载．

这个例子展示了当从外部输入选择页面时，寻呼机是如何反应的。*@ 
 选择页面:  
  @code {public int PageSize {get;设置;} = 3;公共int页面{获取;设置;} = 1;｝

下一个步骤

• 探索寻呼机事件

另请参阅

• 实时寻呼机演示
• 寻呼机API参考
• 如何增加寻呼机下拉列表宽度