我正在使用 Blazor Web App .NET 8 和最新的 MudBlazor 服务。设置 Filterable = true 后，过滤器图标出现在我的表格上，但是单击时，没有显示任何内容。我正在按照 MudBlazor 网站上的示例进行操作。谁能帮我？我是不是错过了什么？
我已按照将 MudBlazor 服务安装到我的项目中的步骤进行操作。我什至在使用和不使用 Bootstraps 样式表的情况下测试了它，看看是否存在冲突。我使用了 Blazor Web App 中的默认天气表，并更改为使用 MudDataGrid。也许我没有在 onclick 之后添加处理过滤器的功能。但根据我在 MudBlazor 文档中看到的示例，他们只需设置 Filterable = "true" 并且过滤器就可以工作。
_进口.razor
@using System.Net.Http
@using System.Net.Http.Json
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using static Microsoft.AspNetCore.Components.Web.RenderMode
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.JSInterop
@using MudBlazorTest
@using MudBlazorTest.Components
@using MudBlazor
App.razor
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<base href="/" />
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
<link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />
<link rel="stylesheet" href="app.css" />
<link rel="stylesheet" href="MudBlazorTest.styles.css" />
<link rel="icon" type="image/png" href="favicon.png" />
<HeadOutlet />
</head>
<body>
<Routes />
<script src="_framework/blazor.web.js"></script>
<script src="_content/MudBlazor/MudBlazor.min.js"></script>
</body>
</html>
程序.cs
using MudBlazorTest.Components;
using MudBlazor.Services;
var builder = WebApplication.CreateBuilder(args);
// Add services to the container.
builder.Services.AddMudServices();
builder.Services.AddRazorComponents()
.AddInteractiveServerComponents();
var app = builder.Build();
// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
app.UseExceptionHandler("/Error", createScopeForErrors: true);
// The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
app.UseHsts();
}
app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseAntiforgery();
app.MapRazorComponents<App>()
.AddInteractiveServerRenderMode();
app.Run();
MainLayout.razor
@inherits LayoutComponentBase
<MudThemeProvider />
<MudDialogProvider />
<MudSnackbarProvider />
<div class="page">
<div class="sidebar">
<NavMenu />
</div>
<main>
<div class="top-row px-4">
<a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
</div>
<article class="content px-4">
@Body
</article>
</main>
</div>
<div id="blazor-error-ui">
An unhandled error has occurred.
<a href="" class="reload">Reload</a>
<a class="dismiss">🗙</a>
</div>
天气.剃刀
@page "/weather"
@attribute [StreamRendering]
@rendermode InteractiveServer
@using MudBlazor
<PageTitle>Weather</PageTitle>
<h1>Weather</h1>
<p>This component demonstrates showing data.</p>
@if (forecasts == null)
{
<p><em>Loading...</em></p>
}
else
{
<MudDataGrid Items="@forecasts.Take(Range.All)" Class="custom-bordered" RowClass="custom-hover" Filterable="true" FilterMode="@FilterMode">
<Columns>
<PropertyColumn Property="x => x.Date" Title="Date">
</PropertyColumn>
<PropertyColumn Property="x => x.TemperatureC" />
<PropertyColumn Property="x => x.TemperatureF" />
<PropertyColumn Property="x => x.Summary" Title="Summary">
</PropertyColumn>
</Columns>
</MudDataGrid>
}
@code {
private WeatherForecast[]? forecasts;
DataGridFilterMode FilterMode = DataGridFilterMode.ColumnFilterMenu;
protected override async Task OnInitializedAsync()
{
// Simulate asynchronous loading to demonstrate streaming rendering
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 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);
}
}
github上已经有人帮我回答这个问题了。链接是这里