MudBlazor - MudGrid 和使用 Blazor 进行数据分页

Question

我刚刚开始在 MudBlazor 组件集中使用 MudDataGrid，并且正在尝试让服务器端数据检索和分页正常工作。

我在这里找到了一个很好的例子

Mudgrid 和服务器端数据

通过遵循它，我成功地使该功能正常工作。不过，我确实有一个问题，不知为何，前进/后退/第一个/最后一个按钮始终被禁用！我检查了 html，这就是我看到的

<button type="button" disabled class="mud-button-root mud-icon-button mud-ripple mud-ripple-icon mud-flip-x-rtl" _bl_9bb473ae-a2b8-457a-8564-cc4d1a6ca9c7=""><span class="mud-icon-button-label"><!--!--><svg class="mud-icon-root mud-svg-icon mud-icon-size-medium" focusable="false" viewBox="0 0 24 24" aria-hidden="true"><!--!--><path d="M18.41 16.59L13.82 12l4.59-4.59L17 6l-6 6 6 6zM6 6h2v12H6z"></path><path d="M24 24H0V0h24v24z" fill="none"></path></svg></span></button>

这是我的网格设置，它工作完美，只是没有启用分页按钮

<MudDataGrid ServerData="LoadGridData" T="AgencyGridViewModel" @ref="_dataGrid">
    <ToolBarContent>
        <MudText Typo="Typo.h6">Agencies</MudText>
        <MudSpacer />
        <MudTextField @bind-Value="_searchString" Placeholder="Search" Adornment="Adornment.Start" Immediate="true"
                      AdornmentIcon="@Icons.Material.Filled.Search" IconSize="MudBlazor.Size.Medium" Class="mt-0"></MudTextField>
    </ToolBarContent>
    <Columns>
        <PropertyColumn Property="x => x.AgencyName" Title="Agency Name" />
        <PropertyColumn Property="x => x.AgencyAdd1" Title="Address 1" />
        <PropertyColumn Property="x => x.AgencyAdd2" Title="Address 2" />
        <PropertyColumn Property="x => x.AgencyTown_City" Title="Town/City" />
        <PropertyColumn Property="x => x.AgencyPostcode" Title="Postcode" />
    </Columns>
    <PagerContent>
        <MudDataGridPager T="AgencyGridViewModel" Disabled="false" />
    </PagerContent>
</MudDataGrid>

这是一个已知问题，还是我遗漏了什么，希望有人能给出答案

**更新 我花了一天的大部分时间在这上面，但没有任何进展，所有示例都显示这是实现分页控制的方法，但它不起作用，用于移动页面的按钮始终被禁用

<PagerContent>
    <MudDataGridPager T="AgencyGridViewModel" Disabled="false" />
</PagerContent>

我很欣赏这个免费组件库所做的所有工作，但我找不到这个问题的解决方案，如果我无法解决这个问题，我现在面临着寻找替代数据网格的问题。这是我用来检索数据并填充 DataGrid 的代码

private async Task<GridData<AgencyGridViewModel>> LoadGridData(GridState<AgencyGridViewModel> state)
{
    var result = await AgencyService.GetPagedAsync(new PagedMessageRequest() { Page = state.Page, PageSize = state.PageSize }, this.CancelToken);
    Agencies = Mapper.Map<IEnumerable<AgencyDto>, IEnumerable<AgencyGridViewModel>>(result.Result);
    GridData<AgencyGridViewModel> data = new()
    {
        Items = Agencies.AsQueryable(),
        TotalItems = result.PageCount
    };
   return data;
}

这是数据网格分页按钮的屏幕截图，您可以看到，尽管网格具有数据和多个页面，但它们已被禁用 有人可以帮忙吗？

Answer 1

噢！！！刚刚意识到问题是什么！ DataGrid 根据页面大小和总记录数进行自己的页码计算，我还手动完成了该计算并将值分配给 TotalItems 属性，我更改了代码，现在它可以工作了！

GridData<AgencyGridViewModel> data = new()
{
    Items = Agencies.AsQueryable(),
    TotalItems = result.Count //-> NOT my manually calculated PageCount property
};