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替代品中。

有用的資源：

更多產品資訊及授權，歡迎來電咨詢：023-68661681

關于慧都科技

慧都是?家?業數字化解決?案公司，專注于軟件、?油與?業領域，以深?的業務理解和?業經驗，幫助企業實現智能化轉型與持續競爭優勢。

慧都是DevExpress的中國區的合作伙伴，DevExpress作為用戶界面領域的優秀產品，幫助企業高效構建權限管理、數據可視化（如網格/圖表/儀表盤）、跨平臺系統（WinForms/ASP.NET/.NET MAUI）及行業定制解決方案，加速開發并強化交互體驗。