DevExpress怎么創建Blazor Dashboard應用

本篇內容主要講解“DevExpress怎么創建Blazor Dashboard應用”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“DevExpress怎么創建Blazor Dashboard應用”吧!

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

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

先決條件

• 帶有ASP.NET和Web開發工作負載的Visual Studio 2019

• .NET Core 3.1 或更高版本

• DevExpress Universal Subscription v20.2

創建Blazor應用程序

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

1. 創建一個名為BlazorDashboardApp的新Blazor應用程序。 選擇Blazor WebAssembly App模板，并啟用ASP.NET Core hosted復選框。

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

配置服務器部分

1. 安裝以下NuGet軟件包：

• DevExpress.AspNetCore.Dashboard

• Microsoft.AspNetCore.Mvc.NewtonsoftJson

2. 創建App_Data / Dashboards文件夾來存儲儀表板。

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. 在同一文件中，按以下順序將app.UseDevExpressControls() 和 EndpointRouteBuilderExtension.MapDashboardRoute()方法調用添加到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. 右鍵單擊創建的package.json文件，然后選擇Restore Packages。

Alternative. Run npm install to install these packages.

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

razor

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

<div id="web-dashboard" >
</div>

@code {
protected override void OnAfterRender(bool firstRender) {
JSRuntime.InvokeAsync<object>("JsFunctions.InitWebDashboard");
}

public void Dispose() {
JSRuntime.InvokeAsync<string>("JsFunctions.DisposeWebDashboard");
}
}

注意：您應該調用儀表板組件的OnAfterRender方法進行初始化，并調用Dispose方法釋放未使用的內存。

4. 在wwwroot文件夾中，創建index.js文件，并實現初始化和處理組件的邏輯：

javascript

window.JsFunctions = {
InitWebDashboard: function () {
this.dashboardControl = new DevExpress.Dashboard.DashboardControl(document.getElementById("web-dashboard"), {
endpoint: "/api/dashboard"
});
this.dashboardControl.render();
},
DisposeWebDashboard: function () {
this.dashboardControl.dispose();
}
};

5. 安裝BuildBundlerMinifier NuGet軟件包，創建bundleconfig.json文件來捆綁Web儀表板所需的腳本和樣式：

javascript

[
{
"outputFileName": "wwwroot/site/styles.css",
"inputFiles": [
"node_modules/devextreme/dist/css/dx.light.css",
"node_modules/@devexpress/analytics-core/dist/css/dx-analytics.common.css",
"node_modules/@devexpress/analytics-core/dist/css/dx-analytics.light.css",
"node_modules/@devexpress/analytics-core/dist/css/dx-querybuilder.css",
"node_modules/devexpress-dashboard/dist/css/dx-dashboard.light.min.css"
],
"minify": {
"enabled": false,
"adjustRelativePaths": false
}
},
{
"outputFileName": "wwwroot/site/bundle.js",
"inputFiles": [
"./index.js",
"node_modules/jquery/dist/jquery.min.js",
"node_modules/jquery-ui-dist/jquery-ui.min.js",
"node_modules/knockout/build/output/knockout-latest.js",
"node_modules/ace-builds/src-min-noconflict/ace.js",
"node_modules/ace-builds/src-min-noconflict/ext-language_tools.js",
"node_modules/ace-builds/src-min-noconflict/theme-dreamweaver.js",
"node_modules/ace-builds/src-min-noconflict/theme-ambiance.js",
"node_modules/devextreme/dist/js/dx.all.js",
"node_modules/@devexpress/analytics-core/dist/js/dx-analytics-core.min.js",
"node_modules/@devexpress/analytics-core/dist/js/dx-querybuilder.min.js",
"node_modules/devexpress-dashboard/dist/js/dx-dashboard.min.js"
],
"minify": {
"enabled": false
},
"sourceMap": false
}
]

6. 在wwwroot文件夾中，打開index.html文件，并引用以下腳本和樣式表：

• site/styles.css

• site/bundle.js

• index.js

.NET 5

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>BlazorDashboardApp</title>
<base href="/" />
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="css/app.css" rel="stylesheet" />
<link href="BlazorDashboardApp.Client.styles.css" rel="stylesheet" />
<link href="site/styles.css" rel="stylesheet" />
</head>

<body>
<div id="app">Loading...</div>

<div id="blazor-error-ui">
An unhandled error has occurred.
<a href="" class="reload">Reload</a>
<a class="dismiss">????</a>
</div>
<script src="_framework/blazor.webassembly.js"></script>
<script src="site/bundle.js"></script>
<script src="index.js"></script>
</body>

</html>

.NET Core 3.1

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>BlazorDashboardApp</title>
<base href="/" />
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="css/app.css" rel="stylesheet" />
<link href="site/styles.css" rel="stylesheet" />
</head>

<body>
<app>Loading...</app>

<div id="blazor-error-ui">
An unhandled error has occurred.
<a href="" class="reload">Reload</a>
<a class="dismiss">????</a>
</div>
<script src="_framework/blazor.webassembly.js"></script>
<script src="site/bundle.js"></script>
<script src="index.js"></script>
</body>

</html>

7. 在Shared / NavMenu.razor文件中，向列表中添加一個新的NavLink組件，來在導航菜單中顯示Web Dashboard項：

razor

<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
<ul class="nav flex-column">
<!--...-->
<li class="nav-item px-3">
<NavLink class="nav-link" href="dashboard">
<span class="oi oi-list-rich" aria-hidden="true"></span> Web Dashboard
</NavLink>
</li>
</ul>
</div>

運行項目來查看結果：

到此，相信大家對“DevExpress怎么創建Blazor Dashboard應用”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！