本篇內(nèi)容主要講解“DevExpress怎么創(chuàng)建Blazor Dashboard應(yīng)用”，感興趣的朋友不妨來看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“DevExpress怎么創(chuàng)建Blazor Dashboard應(yīng)用”吧!

創(chuàng)新互聯(lián)的客戶來自各行各業(yè)，為了共同目標(biāo)，我們?cè)诠ぷ魃厦芮信浜?，從?chuàng)業(yè)型小企業(yè)到企事業(yè)單位，感謝他們對(duì)我們的要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來驚喜。專業(yè)領(lǐng)域包括網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站建設(shè)、電商網(wǎng)站開發(fā)、微信營(yíng)銷、系統(tǒng)平臺(tái)開發(fā)。

重要提示：請(qǐng)注意，沒有Blazor的本地Dashboard UI組件，您只能將客戶端JavaScript Dashboard控件集成到Blazor應(yīng)用程序中。

本教程描述了如何將JavaScript Dashboard控件集成到Blazor應(yīng)用程序中。

先決條件

• 帶有ASP.NET和Web開發(fā)工作負(fù)載的Visual Studio 2019

• .NET Core 3.1 或更高版本

• DevExpress Universal Subscription v20.2

創(chuàng)建Blazor應(yīng)用程序

此解決方案使用ASP.NET Core后端（服務(wù)器端Blazor）來處理來自JavaScript儀表板的請(qǐng)求，客戶端定義了此組件的UI以及響應(yīng)UI更新所需的邏輯。

1. 創(chuàng)建一個(gè)名為BlazorDashboardApp的新Blazor應(yīng)用程序。 選擇Blazor WebAssembly App模板，并啟用ASP.NET Core hosted復(fù)選框。

Alternative. Run dotnet new blazorwasm -n BlazorDashboardApp --hosted command.

配置服務(wù)器部分

1. 安裝以下NuGet軟件包：

• DevExpress.AspNetCore.Dashboard

• Microsoft.AspNetCore.Mvc.NewtonsoftJson

2. 創(chuàng)建App_Data / Dashboards文件夾來存儲(chǔ)儀表板。

3. 打開Startup.cs文件，并按如下所示更新ConfigureServices方法：

cs

using DevExpress.AspNetCore;
using DevExpress.DashboardAspNetCore;
using DevExpress.DashboardCommon;
using DevExpress.DashboardWeb;
using DevExpress.DataAccess.Json;
using Microsoft.Extensions.FileProviders;
using System;
// ...
public Startup(IConfiguration configuration, IWebHostEnvironment hostingEnvironment) {
Configuration = configuration;
FileProvider = hostingEnvironment.ContentRootFileProvider;
}

public IConfiguration Configuration { get; }
public IFileProvider FileProvider { get; }

public void ConfigureServices(IServiceCollection services) {
services.AddResponseCompression(opts => {
opts.MimeTypes = ResponseCompressionDefaults.MimeTypes.Concat(
new[] { "application/octet-stream" });
});
services.AddDevExpressControls();
services.AddMvc()
.AddDefaultDashboardController(configurator => {
// Register Dashboard Storage
configurator.SetDashboardStorage(new DashboardFileStorage(FileProvider.GetFileInfo("App_Data/Dashboards").PhysicalPath));
// Create a sample JSON data source
DataSourceInMemoryStorage dataSourceStorage = new DataSourceInMemoryStorage();
DashboardJsonDataSource jsonDataSourceUrl = new DashboardJsonDataSource("JSON Data Source (URL)");
jsonDataSourceUrl.JsonSource = new UriJsonSource(
new Uri("https://raw.githubusercontent.com/DevExpress-Examples/DataSources/master/JSON/customers.json"));
jsonDataSourceUrl.RootElement = "Customers";
jsonDataSourceUrl.Fill();
dataSourceStorage.RegisterDataSource("jsonDataSourceUrl", jsonDataSourceUrl.SaveToXml());
configurator.SetDataSourceStorage(dataSourceStorage);
});
services.AddControllersWithViews();
services.AddRazorPages();
}

4. 在同一文件中，按以下順序?qū)pp.UseDevExpressControls() 和 EndpointRouteBuilderExtension.MapDashboardRoute()方法調(diào)用添加到Configure方法中：

cs

// ...
public void Configure(IApplicationBuilder app, IWebHostEnvironment env) {
// ... 
app.UseStaticFiles();
app.UseDevExpressControls();
app.UseRouting();

app.UseEndpoints(endpoints => {
EndpointRouteBuilderExtension.MapDashboardRoute(endpoints, "api/dashboard");
// ...
});
}

配置客戶端部分

1. 添加npm配置文件（package.json）并列出儀表板組件所需的以下npm軟件包：

json

{
"dependencies": {
// ...
"devexpress-dashboard": "~20.2.6"
"@devexpress/analytics-core": "~20.2.6",
"devextreme": "~20.2.6",
"jquery-ui-dist": "1.12.1"
},
// ...
}

2. 右鍵單擊創(chuàng)建的package.json文件，然后選擇Restore Packages。

Alternative. Run npm install to install these packages.

3. 在Pages文件夾中，創(chuàng)建Dashboard Razor組件（Dashboard.razor），并添加以下代碼來呈現(xiàn)Web Dashboard：

razor

@page "/dashboard"
@inject IJSRuntime JSRuntime
@implements IDisposable