Ant Design Pagination前后按钮失效且页尺寸下拉为空问题求助

一、检查双向绑定与回调配置 #

Ant Design分页组件的交互逻辑依赖正确的参数绑定和回调处理，这是最常见的问题根源：

• 必须显式给PageSizeOptions赋值，否则页尺寸下拉框会为空
• 确保当前页（CurrentPage）和每页条数（PageSize）的双向绑定或回调更新正常
• 开启ShowSizeChanger="true"才能显示页尺寸下拉控件

正确代码示例：

<Pagination 
    Total="100"
    @bind-CurrentPage="@_currentPage"
    @bind-PageSize="@_pageSize"
    PageSizeOptions="@_pageSizeOptions"
    ShowSizeChanger="true"
    OnPageChange="HandlePageChange"
    OnPageSizeChange="HandlePageSizeChange"
/>

@code {
    private int _currentPage = 1;
    private int _pageSize = 10;
    // 必须初始化页尺寸选项列表
    private List<int> _pageSizeOptions = new() { 10, 20, 50, 100 };

    private void HandlePageChange(int page)
    {
        // 这里写翻页后的业务逻辑，比如重新加载数据
        _currentPage = page;
    }

    private void HandlePageSizeChange(int size)
    {
        // 页尺寸变更后通常要重置当前页为第一页
        _currentPage = 1;
        _pageSize = size;
    }
}

二、排查数据初始化时机 #

如果页尺寸选项是异步获取的，要确保在组件渲染前完成赋值，比如在OnInitializedAsync中处理：

@code {
    private List<int> _pageSizeOptions;

    protected override async Task OnInitializedAsync()
    {
        // 模拟从后端获取页尺寸配置
        await Task.Delay(100);
        _pageSizeOptions = new List<int> { 10, 20, 50 };
    }
}

如果初始化太晚，组件首次渲染时PageSizeOptions为null，下拉框就会显示为空。

三、检查版本兼容性 #

Ant Design Blazor和.NET版本必须匹配，否则会出现交互失效：

• 1.x及以上版本对应.NET 7/8
• 0.2.x-0.12.x对应.NET 6
• 0.1.x对应.NET 5
  打开NuGet包管理器，确认当前安装的Ant Design Blazor版本和项目的.NET版本匹配，不匹配就更新到对应版本。

四、验证服务注册与命名空间 #

1. 在_Imports.razor中确认引入了Ant Design命名空间：

@using AntDesign

2. 在Program.cs中确认注册了Ant Design服务：

builder.Services.AddAntDesign();

如果服务未注册，组件只会渲染UI，无法处理点击、下拉等交互逻辑。

内容的提问来源于stack exchange，提问作者derya