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

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

DevExpress技術交流群11：749942875      歡迎一起進群討論

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

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

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

 處理事件來上傳所選文件，對于每個文件，事件提供一個流，您可以打開它來讀取文件內(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應用程序之前，請確保制定必要的安全相關流程（以避免風險并控制未經(jīng)授權的文件操作）。

全新的Drawer組件

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

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

全新的Toast（通知）組件

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

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

您可以在標記中放置DxToast組件并調用方法來顯示它。

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

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

全新的Progress Bar（進度條）

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

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

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

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

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

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