DevExpress Blazor UI組件使用了C#為Blazor Server和Blazor WebAssembly創(chuàng)建高影響力的用戶體驗(yàn)，這個(gè)UI自建庫(kù)提供了一套全面的原生Blazor UI組件（包括Pivot Grid、調(diào)度程序、圖表、數(shù)據(jù)編輯器和報(bào)表等）。

DevExpress Blazor控件目前已經(jīng)升級(jí)到v25.1版本了，此版本擁有全新的過濾器生成器、棄用了一些組件等，歡迎下載最新組件體驗(yàn)！

DevExpress技術(shù)交流群11：749942875      歡迎一起進(jìn)群討論

全新的Blazor過濾器生成器（CTP）

新的DevExpress Blazor Filter Builder UI組件允許用戶輕松創(chuàng)建復(fù)雜的過濾標(biāo)準(zhǔn)，Blazor Filter Builder組件（在我們的v25.1發(fā)布周期中作為社區(qū)技術(shù)預(yù)覽版提供）使用流行的CriteriaOperator語(yǔ)言，可以連接到任何數(shù)據(jù)感知的DevExpress Blazor組件。

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

• 邏輯條件：支持“And”、“Or”、“Not And”和“Not Or”邏輯運(yùn)算符，用于組合過濾條件。
• 嵌套規(guī)則：允許用戶創(chuàng)建帶有過濾條件的嵌套組，用于更復(fù)雜的過濾場(chǎng)景。
• 操作符種類：包括一元、二元、“Between”（用于范圍）和“Any Of”（用于多個(gè)值）過濾操作符。
• 字段配置：允許您定義和配置用戶可用的字段，可以顯示自定義標(biāo)題來提高清晰度。
• 分層字段：以樹狀結(jié)構(gòu)顯示分層字段。
• 特定于數(shù)據(jù)類型的編輯器：根據(jù)字段數(shù)據(jù)類型生成編輯器。
• 數(shù)據(jù)編輯器自定義：允許您使用EditSettings自定義自動(dòng)生成的編輯器（類似于Blazor Grid組件）。
• 外鍵編輯：用有意義的文本替換與DevExpress Blazor ComboBox編輯器關(guān)聯(lián)的字段外鍵值。

定義字段

您可以完全控制DevExpress Blazor Filter Builder顯示給用戶的數(shù)據(jù)字段，在Razor標(biāo)記中逐一聲明字段：

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>

或者遍歷模型類屬性并在循環(huán)中定義字段：

Razor

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

創(chuàng)建分層字段

對(duì)于復(fù)雜的數(shù)據(jù)模型，可以將嵌套字段組織成樹狀結(jié)構(gòu)。您還可以自定義顯示在樹（Caption）和結(jié)果過濾條件（CaptionFullPath）中的字段標(biāo)題。

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會(huì)根據(jù)字段類型自動(dòng)生成預(yù)配置的數(shù)據(jù)編輯器，但您可以覆蓋用于任何字段的默認(rèn)編輯器。使用EditSettings標(biāo)簽為字段指定DevExpress Blazor編輯器，并根據(jù)需要配置編輯器屬性。例如，您可以對(duì)貨幣字段應(yīng)用掩碼來格式化相關(guān)值：

Razor

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

或者為枚舉字段配置一個(gè)ComboBox編輯器：

Razor

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

配置外鍵編輯

對(duì)于外鍵字段，可以顯示用戶友好的文本，替代原始ID值。要顯示用戶友好的文本，請(qǐng)將DxComboBoxSettings放在EditSettings標(biāo)記中，并指定編輯器數(shù)據(jù)源、值字段名稱和文本字段名稱。

Razor

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

配置完成后，即使關(guān)閉了ComboBox編輯器，該字段也會(huì)顯示文本值而不是底層ID。

將過濾器生成器連接到數(shù)據(jù)感知組件

您可以將Blazor Filter Builder連接到支持CriteriaOperator語(yǔ)法的數(shù)據(jù)感知的DevExpress Blazor UI組件：

• Grid
• TreeList
• Pivot Table
• ListBox

對(duì)于雙向過濾器同步，使用帶有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);
}
}

舊組件——已棄用

舊數(shù)據(jù)網(wǎng)格、組合框、標(biāo)簽框和列表框不再可用

為了簡(jiǎn)化發(fā)行版，DevExpress從v25.1更新中刪除了以下舊組件：

• DxDataGrid
• DxComboBoxLegacy
• DxTagBoxLegacy
• DxListBoxLegacy

為了避免問題，請(qǐng)檢查您的項(xiàng)目中是否有來自DevExpress.Blazor.Legacy命名空間的組件，并遷移到新的DevExpress替代品中。

有用的資源：

更多產(chǎn)品資訊及授權(quán)，歡迎來電咨詢：023-68661681

關(guān)于慧都科技

慧都是?家?業(yè)數(shù)字化解決?案公司，專注于軟件、?油與?業(yè)領(lǐng)域，以深?的業(yè)務(wù)理解和?業(yè)經(jīng)驗(yàn)，幫助企業(yè)實(shí)現(xiàn)智能化轉(zhuǎn)型與持續(xù)競(jìng)爭(zhēng)優(yōu)勢(shì)。

慧都是DevExpress的中國(guó)區(qū)的合作伙伴，DevExpress作為用戶界面領(lǐng)域的優(yōu)秀產(chǎn)品，幫助企業(yè)高效構(gòu)建權(quán)限管理、數(shù)據(jù)可視化（如網(wǎng)格/圖表/儀表盤）、跨平臺(tái)系統(tǒng)（WinForms/ASP.NET/.NET MAUI）及行業(yè)定制解決方案，加速開發(fā)并強(qiáng)化交互體驗(yàn)。