如何触发MudDataGrid的分页、搜索等事件？

核心问题分析 #

1. 搜索功能未实现过滤逻辑：仅绑定了搜索框的值，但未根据输入内容过滤数据源，导致输入后网格无响应。
2. 分页功能缺少必要配置：未设置PageSize参数，且未确保分页状态与过滤后的数据源同步。
3. 未保留原始数据源：每次操作都可能重复查询数据库，且无法正确恢复全量数据。

解决方案代码修改 #

1. 更新 Home.razor 代码

页面部分

<MudDataGrid T="LogEntity" Items="@listLogs" HeaderClass="mud-table-header" SortMode="SortMode.Single" PageSize="10">
    <ToolBarContent>
        <MudText Typo="Typo.h6">Application Logs</MudText>
        <MudSpacer />
        <MudTextField @bind-Value="SearchString" Placeholder="Search" Adornment="Adornment.Start" Immediate="true"
                      AdornmentIcon="@Icons.Material.Filled.Search" IconSize="Size.Medium" Class="mt-0"></MudTextField>
    </ToolBarContent>
    <Columns>
        <PropertyColumn Property="i => i.LogDate" Title="Log DateTime" />
        <PropertyColumn Property="i => i.Message" Sortable="false" />
        <PropertyColumn Property="i => i.LogType" Title="Log Type" />
    </Columns>
    <PagerContent>
        <MudDataGridPager T="LogEntity" />
    </PagerContent>
</MudDataGrid>

代码逻辑部分

@code  {
    private readonly IConfiguration? _config = new ConfigurationBuilder().AddJsonFile("appsettings.json").AddEnvironmentVariables().Build();

    private List<LogEntity> _allLogs = new List<LogEntity>(); // 存储全量原始日志
    private List<LogEntity> listLogs = new List<LogEntity>();
    private string _searchString = string.Empty;

    // 绑定搜索框，触发过滤逻辑
    private string SearchString
    {
        get => _searchString;
        set
        {
            _searchString = value;
            FilterLogs();
        }
    }

    protected override async Task OnInitializedAsync()
    {
        var userAdminGroup = _config.GetValue<string>("UsersAdminGroupName");
        var storageConnection = _config.GetValue<string>("StorageConnection");
        var loggingTableName = _config.GetValue<string>("LoggingTableName");

        TableClient tableClient = new(storageConnection, loggingTableName);
        var queryResultsLINQ = tableClient.Query<LogEntity>(ent => ent.PartitionKey == "UsersAdmin");

        foreach (var item in queryResultsLINQ)
        {
            var log = new LogEntity();
            log.PartitionKey = item.PartitionKey;
            log.RowKey = item.RowKey;
            log.Timestamp = item.Timestamp;
            log.Message = item.Message;
            log.LogType = item.LogType;
            log.LogDate = ConvertLogDate(item.RowKey);
            log.LogTime = decimal.Parse(item.RowKey.Substring(9,8));

            _allLogs.Add(log);
        }

        FilterLogs(); // 初始化过滤列表
    }

    // 实现日志过滤逻辑
    private void FilterLogs()
    {
        var filtered = _allLogs.AsQueryable();

        if (!string.IsNullOrEmpty(_searchString))
        {
            filtered = filtered.Where(log => 
                log.Message.Contains(_searchString, StringComparison.OrdinalIgnoreCase) ||
                log.LogType.Contains(_searchString, StringComparison.OrdinalIgnoreCase) ||
                log.LogDate.ToString().Contains(_searchString, StringComparison.OrdinalIgnoreCase));
        }

        listLogs = filtered.OrderByDescending(o => o.LogDate).ToList();
        StateHasChanged(); // 通知组件更新UI
    }
}

2. 优化 Program.cs 配置（可选）

AddMudServices()已包含对话框服务，可移除重复注册：

builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents();
builder.Services.AddMudServices();

修改说明 #

• 原始数据源存储：用_allLogs保存全量日志，避免重复查询数据库，提升搜索效率。
• 搜索触发逻辑：通过SearchString属性的setter实时触发过滤，确保输入搜索词后立即更新网格。
• 分页配置：添加PageSize="10"启用客户端分页，当数据量超过设定值时，分页器将正常响应。
• UI更新通知：调用StateHasChanged()确保组件感知数据变化，同步更新界面。

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