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

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

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

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

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

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

 處理事件來上傳所選文件，對于每個文件，事件提供一個流，您可以打開它來讀取文件內(nèi)容。讀取操作完成后，您可以將文件發(fā)送到其他目的地、保存到文件系統(tǒng)或在網(wǎng)頁上顯示文件內(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)用程序之前，請確保制定必要的安全相關(guān)流程（以避免風(fēng)險并控制未經(jīng)授權(quán)的文件操作）。

全新的Drawer組件

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

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

全新的Toast（通知）組件

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

• 危險
• 信息
• 重要
• 成功
• 警告

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

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."
});
}
}

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

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

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

• 水平、垂直和圓形布局
• 四個狀態(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ù)顯示為圓形條形，其中每個條形表示單個值。該組件具有以下功能：

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

更多產(chǎn)品更新咨詢，請