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

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

DevExpress技术交流群11：749942875      欢迎一起进群讨论

全新的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编辑器关联的字段外键值。

定义字段

您可以完全控制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>

自定义值编辑器

虽然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>

配置外键编辑

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

Razor

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

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

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

您可以将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);
}
}

旧组件——已弃用

旧数据网格、组合框、标签框和列表框不再可用

为了简化发行版，DevExpress从v25.1更新中删除了以下旧组件：

• DxDataGrid
• DxComboBoxLegacy
• DxTagBoxLegacy
• DxListBoxLegacy

为了避免问题，请检查您的项目中是否有来自DevExpress.Blazor.Legacy命名空间的组件，并迁移到新的DevExpress替代品中。

有用的资源：

• Migrate from Data Grid to Grid
• Legacy component deprecation details

更多产品资讯及授权，欢迎来电咨询：023-68661681

更多DevExpress线上公开课、中文教程资讯请上中文网获取

关于慧都科技

慧都是⼀家⾏业数字化解决⽅案公司，专注于软件、⽯油与⼯业领域，以深⼊的业务理解和⾏业经验，帮助企业实现智能化转型与持续竞争优势。

慧都是DevExpress的中国区的合作伙伴，DevExpress作为用户界面领域的优秀产品，帮助企业高效构建权限管理、数据可视化（如网格/图表/仪表盘）、跨平台系统（WinForms/ASP.NET/.NET MAUI）及行业定制解决方案，加速开发并强化交互体验。