如何在Mud Blazor中按页码从服务器获取指定数据

要实现点击页码时从API加载对应页数据，核心是利用MudTable内置的服务端分页回调机制，无需手动给页码绑定点击事件，框架会自动处理页码切换时的逻辑触发。具体实现步骤如下：

1. 组件核心配置 #

给MudTable设置关键属性，开启服务端模式：

• ServerData：绑定数据加载回调方法，页码切换、排序、过滤时都会自动触发该方法
• TotalItems：设置总数据量，用于渲染正确的分页页码数
• PageSize：定义每页显示的数据条数（比如你示例中的50条）

<MudTable T="YourDataModel" 
          ServerData="@LoadServerData" 
          TotalItems="@totalItems" 
          PageSize="50" 
          Hover="true">
    <HeaderContent>
        <MudTh>字段1</MudTh>
        <MudTh>字段2</MudTh>
        <!-- 根据你的数据模型添加其他表头 -->
    </HeaderContent>
    <RowTemplate>
        <MudTd>@context.Field1</MudTd>
        <MudTd>@context.Field2</MudTd>
        <!-- 根据你的数据模型添加其他列内容 -->
    </RowTemplate>
</MudTable>

2. 后端逻辑实现 #

在组件的C#代码中实现数据加载回调方法，处理API调用逻辑：

private int totalItems;
private readonly HttpClient _httpClient;

// 构造函数注入HttpClient
public YourComponent(HttpClient httpClient)
{
    _httpClient = httpClient;
}

// 服务端数据加载回调，点击页码时自动触发
private async Task<TableData<YourDataModel>> LoadServerData(TableState state)
{
    // 计算当前页的起始/结束索引（TableState.Page从0开始计数）
    var startIndex = state.Page * state.PageSize;
    var endIndex = startIndex + state.PageSize;

    // 调用后端API，传递分页、排序参数
    var apiResponse = await _httpClient.GetFromJsonAsync<ApiPageResponse>(
        $"your-api-url?start={startIndex}&end={endIndex}&sortField={state.SortLabel}&sortDir={state.SortDirection}");

    if (apiResponse == null)
    {
        return new TableData<YourDataModel> { Items = new List<YourDataModel>(), TotalItems = 0 };
    }

    // 更新总数据量，用于分页器渲染
    totalItems = apiResponse.TotalCount;
    // 返回当前页数据和总条数
    return new TableData<YourDataModel> 
    { 
        Items = apiResponse.CurrentPageData, 
        TotalItems = totalItems 
    };
}

// 自定义数据模型（根据你的业务定义）
public class YourDataModel
{
    public string Field1 { get; set; }
    public string Field2 { get; set; }
    // 其他业务字段
}

// API返回的分页响应模型
public class ApiPageResponse
{
    public List<YourDataModel> CurrentPageData { get; set; }
    public int TotalCount { get; set; }
}

3. 关键说明 #

• TableState参数包含当前页码、每页条数、排序字段、排序方向等信息，可直接传递给API做对应的数据筛选处理
• 点击页码时，MudTable会自动调用LoadServerData方法，无需手动绑定页码点击事件
• 后端API需要返回当前页的数据列表和总数据量，确保分页器能正确渲染页码范围，表格能展示对应数据

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