Blazor .NET8中MudDataGrid设Filterable=true却不显示筛选面板

问题描述 #

基于.NET 8的Blazor Web App + 最新版MudBlazor，MudDataGrid设置Filterable="true"后筛选图标正常显示，但点击后无任何弹窗弹出。已排查Bootstrap样式冲突，按官网示例配置仍无效。

问题根源 #

你的WeatherForecast类是Weather.razor组件内的private类，MudBlazor在生成筛选菜单时需要通过反射获取属性元数据，private类的访问权限限制导致无法正常读取属性信息，进而无法渲染筛选弹窗。

解决方案 #

将WeatherForecast类改为public类，可选择以下两种方式：

方式1：在组件内修改访问修饰符 #

修改Weather.razor的@code块：

@code {
    private WeatherForecast[]? forecasts;
    DataGridFilterMode FilterMode = DataGridFilterMode.ColumnFilterMenu;

    protected override async Task OnInitializedAsync()
    {
        // 原有逻辑不变
        await Task.Delay(500);

        var startDate = DateOnly.FromDateTime(DateTime.Now);
        var summaries = new[] { "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching" };
        forecasts = Enumerable.Range(1, 5).Select(index => new WeatherForecast
        {
            Date = startDate.AddDays(index),
            TemperatureC = Random.Shared.Next(-20, 55),
            Summary = summaries[Random.Shared.Next(summaries.Length)]
        }).ToArray();
    }

    // 将private改为public
    public class WeatherForecast
    {
        public DateOnly Date { get; set; }
        public int TemperatureC { get; set; }
        public string? Summary { get; set; }
        public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
    }
}

方式2：移至公共类文件 #

在项目根目录新建WeatherForecast.cs文件，内容如下：

namespace MudBlazorTest;

public class WeatherForecast
{
    public DateOnly Date { get; set; }
    public int TemperatureC { get; set; }
    public string? Summary { get; set; }
    public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
}

之后在Weather.razor中移除原有的private类定义，确保引用该公共类。

验证 #

修改完成后重新运行项目，点击MudDataGrid的筛选图标，即可正常弹出筛选菜单。

内容的提问来源于stack exchange，提问作者Amirul.gg