MudDataGrid не отображает параметры фильтра в приложении Blazor, несмотря на то, что для параметра Filterable установлено значение true

Я использую Blazor Web App .NET 8 с последней версией сервиса MudBlazor. После установки Filterable = true на моей таблице появляется значок фильтра, но при нажатии ничего не отображается. Я следую примеру на сайте MudBlazor. Я что-то пропустил?

Я выполнил шаги по установке службы MudBlazor в свой проект. Я даже протестировал его с таблицей стилей Bootstrap и без нее, чтобы увидеть, есть ли конфликты. Я использовал таблицу погоды по умолчанию из веб-приложения Blazor и перешел на MudDataGrid. Возможно, я не добавляю функцию обработки фильтра после клика. Но, судя по примеру, который я вижу в документации MudBlazor, они просто устанавливают Filterable = «true», и фильтр просто работает.

_Imports.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

Приложение.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);
    }
}

Кто-нибудь нашел способ решить эту проблему? Я все еще работаю над этим. Возможно, нужна помощь более широкого сообщества :(

— 21.05.2024 04:46

Вам следует добавить <MudPopoverProvider /> после <MudThemeProvider />

— 21.05.2024 21:54

это было решено здесь

— 21.05.2024 23:15

c# asp.net datagrid blazor mudblazor

21.04.2024 07:24

Стоит ли изучать PHP в 2023-2024 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

165

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Кто-то уже помог мне ответить на этот вопрос на github. ссылка здесь

Обновлено: решение состоит в том, чтобы добавить это в файл MainLayout.razor, поскольку я установил для своей страницы «Погода» режим рендеринга интерактивного сервера.

<MudThemeProvider @rendermode = "InteractiveServer"/>
<MudDialogProvider @rendermode = "InteractiveServer"/>
<MudSnackbarProvider @rendermode = "InteractiveServer"/>

Хотя эта ссылка может ответить на вопрос, лучше включить сюда основные части ответа и предоставить ссылку для справки. Ответы, содержащие только ссылки, могут стать недействительными, если связанная страница изменится. - Из отзыва

— 27.05.2024 09:18

Спасибо, что сообщили мне @kamentk. Я уже обновил свой ответ.

— 27.05.2024 14:26

23.05.2024 12:19