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

DevExpress?Blazor控件目前已經(jīng)升級(jí)到v24.1版本了，此版本發(fā)布了全新文件輸入組件、Drawer組件、Toast組件等，歡迎下載最新組件體驗(yàn)！

DevExpress v24.1正式版下載

全新的File Input（文件輸入）組件

DevExpress?Blazor全新的File Input（文件輸入）組件允許您將文件上傳功能引入Blazor應(yīng)用程序，而無(wú)需使用上傳控制器創(chuàng)建單獨(dú)的Web API項(xiàng)目。

DevExpress?Blazor File Input控件支持多種上傳模式（即時(shí)和OnButtonClick），可以同時(shí)上傳多個(gè)文件，并允許您在客戶(hù)端和服務(wù)器上驗(yàn)證文件大小和擴(kuò)展名。

處理FilesUploading事件來(lái)上傳所選文件，對(duì)于每個(gè)文件，事件提供一個(gè)流，您可以打開(kāi)它來(lái)讀取文件內(nèi)容。讀取操作完成后，您可以將文件發(fā)送到其他目的地、保存到文件系統(tǒng)或在網(wǎng)頁(yè)上顯示文件內(nèi)容。

下面的代碼片段配置FileInput將文件上傳到指定的文件夾：

Razor

<DxFileInput FilesUploading="OnFilesUploading" />@code {
async Task OnFilesUploading(FilesUploadingEventArgs args) {
foreach (var file in args.Files) {
Stream? stream = default;
var filePath = "full path to the uploaded file";
FileStream fs = new(filePath, FileMode.Create);
try {
if(IsValidFile(file)) {
stream = file.OpenReadStream(int.MaxValue);
await stream.CopyToAsync(fs);
}
}
catch (Exception ex) {
if (file.CancellationTokenSource.IsCancellationRequested)
// Handle the cancel action here
}
finally {
await fs.FlushAsync();
fs.Close();
if (stream != null)
stream.Close();
}
}
}
}

注意：在將文件上傳功能添加到您的Blazor應(yīng)用程序之前，請(qǐng)確保制定必要的安全相關(guān)流程（以避免風(fēng)險(xiǎn)并控制未經(jīng)授權(quán)的文件操作）。

全新的Drawer組件

DevExpress?Blazor 全新的Drawer組件允許您在Web應(yīng)用程序中添加一個(gè)“可忽略的”導(dǎo)航側(cè)板，該控件包括以下功能：

• 左側(cè)和右側(cè)位置。
• 重疊和收縮顯示模式。
• 最小化drawer狀態(tài)。
• 頁(yè)眉、正文和頁(yè)腳模板。

全新的Toast（通知）組件

DevExpress?Blazor 全新的Toast組件允許您通知用戶(hù)有關(guān)進(jìn)程和事件的信息。通知消息可以保持可見(jiàn)，直到用戶(hù)單擊關(guān)閉按鈕或在預(yù)定的時(shí)間后自動(dòng)關(guān)閉。DevExpress Blazor Toast組件支持四種主題模式（深色、淺色、粉彩和飽和）和以下通知樣式：

• 危險(xiǎn)
• 信息
• 重要
• 成功
• 警告

您可以在標(biāo)記中放置DxToast組件并調(diào)用Show方法來(lái)顯示它。

Razor

<DxToastProvider Name="ToastContainer" />
<DxToast @ref=toast Text="The process has been completed." ProviderName="ToastContainer" />@code {
DxToast toast;protected override void OnAfterRender(bool firstRender) {
toast.Show();
}
}
</lang>
</code2><para>
Alternatively, use the notification service to create toasts at runtime.
</para><code2>
<lang brush="razor" name="Razor">
<DxToastProvider Name="ToastContainer" />@code {
[Inject] IToastNotificationService ToastService { get; set; }protected override void OnAfterRender(bool firstRender) {
ToastService.ShowToast(new ToastOptions {
ProviderName = "ToastContainer",
Text = "The process has been completed."
});
}
}

在這兩種情況下，都必須將DxToastProvider組件添加到頁(yè)面中。該組件用作通知容器，應(yīng)該在顯示通知的地方聲明。

全新的Progress Bar（進(jìn)度條）

DevExpress Blazor全新的Progress Bar（進(jìn)度條）組件允許您與最終用戶(hù)溝通正在進(jìn)行的進(jìn)程狀態(tài)，當(dāng)進(jìn)度無(wú)法估計(jì)時(shí)，組件可以顯示無(wú)限的移動(dòng)條。該控件包括以下綜合功能：

• 水平、垂直和圓形布局
• 四個(gè)狀態(tài)指示進(jìn)程狀態(tài)：InProgress、Warning、Error和Success
• 不確定的狀態(tài)
• 元素自定義：圖標(biāo)、標(biāo)簽和條的厚度

全新的Bar Gauge（量規(guī)）

DevExpress?Blazor 全新的Bar Gauge允許您將數(shù)據(jù)顯示為圓形條形，其中每個(gè)條形表示單個(gè)值。該組件具有以下功能：

• 幾何和布局配置
• 面板自定義
• 輸出和打印支持
• 實(shí)時(shí)數(shù)據(jù)更新
• 量規(guī)元素定制：標(biāo)簽、工具提示、圖例等。