The forward and back buttons do not work and the page size dropdown is empty in Ant Design Pagination

Question

When I add pagination to my Blazor Server App razor component, it appears visually but the forward and back buttons do not work. Also the dropdown that showing the page size comes up empty.

pagination

Here is my code:

@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;
 }

}

I tried the other examples on the Antdesign docs but it does not work properly.

Answer 1

Turns out it's all Javascript. When I add the following script reference to the App.razor, it worked:

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

I also set the rendermode as follows:

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

This link helped me to solve the problem.