Ant Design Pagination 中前进和后退按钮不起作用且页面大小下拉列表为空

Question

当我向 Blazor Server App razor 组件添加分页时，它会在视觉上显示，但前进和后退按钮不起作用。显示页面大小的下拉列表也显示为空。

分页

这是我的代码：

@using AntDesign
@using AntDesign.TableModels

<GridRow>
    <GridCol Span="14"></GridCol>
    <GridCol Span="1"></GridCol>
    <GridCol Span="8">

        <Pagination ShowSizeChanger
                    OnShowSizeChange="OnShowSizeChange"
                    Current="1"
                    PageSize="@pageSize"
                    Total="@paginationList.TotalRecords"
                    ShowTotal="@showTotal" />
    </GridCol>
</GridRow>

<div style="height: 50px;"></div>
<GridRow Justify="center">
    @* My headers *@
</GridRow>
<AntList DataSource="@paginationList.Data">
    <ChildContent Context="item">
        <AntDesign.GridRow Justify="center">
           @* My data *@
        </AntDesign.GridRow>
    </ChildContent>
</AntList>


@code {

 Func<PaginationTotalContext, string> showTotal = ctx => $"{ctx.Range.Item1}-{ctx.Range.Item2} of {ctx.Total} items";

 PaginationList<OrderDto> paginationList;

 protected override async Task OnInitializedAsync()
 {
     paginationList = new(orderList, pageNumber, pageSize, total);

     orderDto.PageNumber = pageNumber;
     orderDto.PageSize = pageSize;

     var urlString = "myUrl";

     paginationList = await urlString.PostJsonAsync(orderDto).ReceiveJson<PaginationList<OrderDto>>();    
 }

 private void OnShowSizeChange(PaginationEventArgs args)
 {
    pageSize = args.PageSize;
    pageNumber = args.Page;
 }

}

我尝试了 Antdesign 文档上的其他示例，但它无法正常工作。

Answer 1

原来这都是 Javascript。当我将以下脚本引用添加到 App.razor 时，它起作用了：

<script src="_content/AntDesign/js/ant-design-blazor.js"></script>

我还将渲染模式设置如下：

<Routes @rendermode="RenderMode.InteractiveServer" />

这个链接帮助我解决了问题。