Blazor Radzen 过滤和排序无法工作/交互

Question

有一个非常奇怪的问题，我有一个使用 blazor 和 radzen 设置的基本 Web 应用程序，它从 Mssql 检索数据并显示它。

问题在于过滤和排序。 通过简单地放置“允许过滤器”和“允许排序”标签，页面上会弹出选项，但它们不起作用。我所说的“不工作”是指我什至无法与选项交互。

所以我尝试了另一种方式，添加一个简单的过滤方法：

这是基于 Blazors 指南的。我什至无法与“和”框的下拉菜单进行交互。

什么可能导致这样的问题？我在日志中没有看到任何有关 javascript 或类似问题的内容。

我被难住了：D

有什么建议吗？

代码：

@page "/assessmentresults"
@using NotificationGUI.Web.Components.Interfaces
@using Radzen.Blazor
@using NotificationGUI.Web.Components.DataModel.Schemas.Calc
@using Microsoft.EntityFrameworkCore
@using System.Linq
@using Microsoft.AspNetCore.Mvc;
@using BlazorDownloadFile;

@attribute [StreamRendering]
@inject EMIRAssessmentResultsDbContext dbContext

<PageTitle>Assessment Results</PageTitle>

<h1>Assessment Results</h1>

<div style="display: flex; align-items: center; margin-bottom: 16px">
    <div style="white-space:nowrap; margin-right: 16px">Logical filter operator:</div>
    <RadzenDropDown @bind-Value="@logicalFilterOperator" TextProperty="Text" ValueProperty="Value" Change=@(args => grid.Reload())
                    Data="@(Enum.GetValues(typeof(Radzen.LogicalFilterOperator)).Cast<Radzen.LogicalFilterOperator>().Select(t => new { Text = $"{t}", Value = t }))" />
    <div style="white-space:nowrap; margin-left: 16px;margin-right: 16px">Filter case sensitivity:</div>
    <RadzenDropDown @bind-Value="@filterCaseSensitivity" TextProperty="Text" ValueProperty="Value" Change=@(args => grid.Reload())
                    Data="@(Enum.GetValues(typeof(Radzen.FilterCaseSensitivity)).Cast<Radzen.FilterCaseSensitivity>().Select(t => new { Text = $"{t}", Value = t }))" />
</div>
<RadzenDataGrid TItem="EMIR_AssementResults" Data="@notificationData" AllowFiltering="true" AllowSorting="true" AllowColumnResize="true" FilterMode="Radzen.FilterMode.Simple" @ref="grid"
                FilterCaseSensitivity="@filterCaseSensitivity" LogicalFilterOperator="@logicalFilterOperator">
    <Columns>
        <RadzenDataGridColumn TItem="EMIR_AssementResults" Property="AssessmentDateTime" Title="Assessment Date Time" MinWidth="200px" />
        <RadzenDataGridColumn TItem="EMIR_AssementResults" Property="RBLKey" Title="RBL" MinWidth="50px"/>
        <RadzenDataGridColumn TItem="EMIR_AssementResults" Property="AllThresholdsExceeded" Title="Notify NCA" MinWidth="100px" />
        <RadzenDataGridColumn TItem="EMIR_AssementResults" Property="EntityResponsibleForReportingLEI" Title="Notify ERR" MinWidth="230px">
            <Template Context="data">
                @if (data.EntityResponsibleForReportingLEI != "F3JS33DEI6XQ4ZBPTN86")
                {
                    <span>No</span>
                }
                else if (string.IsNullOrWhiteSpace(data.EntityResponsibleForReportingLEI))
                {
                    <span>No Value</span>
                }
                else
                {
                    <span>Yes</span>
                }
            </Template>
        </RadzenDataGridColumn>
        <RadzenDataGridColumn TItem="EMIR_AssementResults" Property="NumOfAffReports" Title="Num Of Aff Reports" MinWidth="150px" />
        <RadzenDataGridColumn TItem="EMIR_AssementResults" Property="ThresholdConstantX" Title="Threshold Constant X" MinWidth="170px" />
        <RadzenDataGridColumn TItem="EMIR_AssementResults" Property="ThersholdConstantY" Title="Threshold Constant Y" MinWidth="170px" />
        <RadzenDataGridColumn TItem="EMIR_AssementResults" Property="AverageMontlyNum" Title="Average Montly Num" MinWidth="170px" />
        <RadzenDataGridColumn TItem="EMIR_AssementResults" Property="NumOfAffReports_AverageMontlyNum" Title="Calculated percentage" MinWidth="180px" />
        <RadzenDataGridColumn TItem="EMIR_AssementResults" Property="EntityResponsibleForReportingLEI" Title="ERRs" MinWidth="100px" />
    </Columns>
</RadzenDataGrid>

@code {

    List<EMIR_AssementResults> notificationData;
    RadzenDataGrid<EMIR_AssementResults> grid;

    Radzen.LogicalFilterOperator logicalFilterOperator = Radzen.LogicalFilterOperator.And;
    Radzen.FilterCaseSensitivity filterCaseSensitivity = Radzen.FilterCaseSensitivity.CaseInsensitive;

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();
        // Retrieve data for RadzenDataGrid
        notificationData = await dbContext.EMIR_AssessmentResultsData.ToListAsync();

    }

}

在此输入代码

Answer 1

万一其他人遇到这个问题，答案是默认的 Blazor 模板没有启用交互性，这让很多开发人员感到困惑（包括我）。按钮单击事件处理程序等基本内容不再起作用，并且没有警告或异常。

这意味着您必须在页面中选择一种交互类型，例如 InteractiveServer 或 InteractiveWebAssembly 或 InteractiveAuto（如果继承父交互性），否则 Blazor 事件将不起作用。

例如： @rendermode InteractiveServer