界面控件DevExpress Blazor UI v25.1新版亮点：全新的过滤器生成器（CTP）

原创于 2025-08-15 09:50:32 发布 · 873 阅读

CC 4.0 BY-SA版权

文章标签：

DevExpress Blazor UI组件使用了C#为Blazor Server和Blazor WebAssembly创建高影响力的用户体验，这个UI自建库提供了一套全面的原生Blazor UI组件（包括Pivot Grid、调度程序、图表、数据编辑器和报表等）。

DevExpress Blazor控件目前已经升级到v25.1版本了，此版本拥有全新的过滤器生成器、弃用了一些组件等，欢迎下载最新组件体验！

点击获取DevExpress Blazor v25.1正式版下载

全新的Blazor过滤器生成器（CTP）

新的DevExpress Blazor Filter Builder UI组件允许用户轻松创建复杂的过滤标准，Blazor Filter Builder组件（在我们的v25.1发布周期中作为社区技术预览版提供）使用流行的CriteriaOperator语言，可以连接到任何数据感知的DevExpress Blazor组件。

DevExpress Blazor Filter Builder提供以下特性/功能：

逻辑条件：支持“And”、“Or”、“Not And”和“Not Or”逻辑运算符，用于组合过滤条件。
嵌套规则：允许用户创建带有过滤条件的嵌套组，用于更复杂的过滤场景。
操作符种类：包括一元、二元、“Between”（用于范围）和“Any Of”（用于多个值）过滤操作符。
字段配置：允许您定义和配置用户可用的字段，可以显示自定义标题来提高清晰度。
分层字段：以树状结构显示分层字段。
特定于数据类型的编辑器：根据字段数据类型生成编辑器。
数据编辑器自定义：允许您使用EditSettings自定义自动生成的编辑器（类似于Blazor Grid组件）。
外键编辑：用有意义的文本替换与DevExpress Blazor ComboBox编辑器关联的字段外键值。

DevExtreme v25.1产品图集

定义字段

您可以完全控制DevExpress Blazor Filter Builder显示给用户的数据字段，在Razor标记中逐一声明字段：

Razor

<DxFilterBuilder>
<Fields>
<DxFilterBuilderField FieldName="Name" Caption="Subject" Type="typeof(string)" />
<DxFilterBuilderField FieldName="OwnerID" Caption="Assignee" Type="typeof(int)" />
<DxFilterBuilderField FieldName="Status" Caption="Status" Type="typeof(IssueStatus)" />
<DxFilterBuilderField FieldName="CreatedDate" Caption="Created" Type="typeof(DateTime)" />
<DxFilterBuilderField FieldName="FixedDate" Caption="Fixed" Type="typeof(DateTime)" />
</Fields>
</DxFilterBuilder>

或者遍历模型类属性并在循环中定义字段：

Razor

<DxFilterBuilder>
<Fields>
@foreach(var field in typeof(Invoice).GetProperties()){
<DxFilterBuilderField FieldName="@field.Name" Type="@field.PropertyType" />
}
</Fields>
</DxFilterBuilder>

创建分层字段

对于复杂的数据模型，可以将嵌套字段组织成树状结构。您还可以自定义显示在树（Caption）和结果过滤条件（CaptionFullPath）中的字段标题。

Razor

<DxFilterBuilder>
<Fields>
<DxFilterBuilderField FieldName="Order.ID" Caption="Order">
<Fields>
<DxFilterBuilderField FieldName="Order.Date" Caption="Date" CaptionFullPath="Order.Date" Type="typeof(DateTime)" />
<DxFilterBuilderField FieldName="Order.Shipped" Caption="Shipped" CaptionFullPath="Order.Shipped" Type="typeof(bool)" />
</Fields>
</DxFilterBuilderField>
</Fields>
</DxFilterBuilder>

DevExtreme v25.1产品图集

自定义值编辑器

虽然DevExpress Blazor Filter Builder会根据字段类型自动生成预配置的数据编辑器，但您可以覆盖用于任何字段的默认编辑器。使用EditSettings标签为字段指定DevExpress Blazor编辑器，并根据需要配置编辑器属性。例如，您可以对货币字段应用掩码来格式化相关值：

Razor

<DxFilterBuilderField FieldName="Total" Type="typeof(decimal)">
<EditSettings>
<DxSpinEditSettings Mask="c0" DisplayFormat="c0" />
</EditSettings>
</DxFilterBuilderField>

或者为枚举字段配置一个ComboBox编辑器：

Razor

<DxFilterBuilderField FieldName="Status" Type="typeof(IssueStatus)">
<EditSettings>
<DxComboBoxSettings Data="StatusList" />
</EditSettings>
</DxFilterBuilderField>

DevExtreme v25.1产品图集

配置外键编辑

对于外键字段，可以显示用户友好的文本，替代原始ID值。要显示用户友好的文本，请将DxComboBoxSettings放在EditSettings标记中，并指定编辑器数据源、值字段名称和文本字段名称。

Razor

<DxFilterBuilderField FieldName="OwnerID" Caption="Assignee" Type="typeof(int)">
<EditSettings>
<DxComboBoxSettings Data="UserList" ValueFieldName="ID" TextFieldName="FullName" />
</EditSettings>
</DxFilterBuilderField>

配置完成后，即使关闭了ComboBox编辑器，该字段也会显示文本值而不是底层ID。

DevExtreme v25.1产品图集

将过滤器生成器连接到数据感知组件

您可以将Blazor Filter Builder连接到支持CriteriaOperator语法的数据感知的DevExpress Blazor UI组件：

Grid
TreeList
Pivot Table
ListBox

对于双向过滤器同步，使用带有FilterCriteria属性的@bind指令：

Razor

<DxFilterBuilder @bind-FilterCriteria="gridFilter">
...
</DxFilterBuilder>

<DxButton Click="ApplyFilter">Apply Filter</DxButton>
<DxButton Click="ClearFilter">Clear Filter</DxButton>

<DxGrid @ref="Grid" FilterCriteriaChanged="OnFilterChanged" ShowFilterRow="true">
...
</DxGrid>

@code {
CriteriaOperator gridFilter;
IGrid Grid { get; set; }
void OnFilterChanged(GridFilterCriteriaChangedEventArgs e) {
gridFilter = e.FilterCriteria;
}
void ApplyFilter() {
Grid.SetFilterCriteria(gridFilter);
}
void ClearFilter() {
Grid.SetFilterCriteria(null);
}
}