翻譯|使用教程|編輯:龔雪|2021-04-19 10:25:28.740|閱讀 472 次
概述:本教程描述了如何將JavaScript Dashboard控件集成到Blazor應(yīng)用程序中。
# 界面/圖表報(bào)表/文檔/IDE等千款熱門(mén)軟控件火熱銷(xiāo)售中 >>
相關(guān)鏈接:
下載DevExpress v20.2完整版 DevExpress v20.2漢化資源獲取
重要提示:請(qǐng)注意,沒(méi)有Blazor的本地Dashboard UI組件,您只能將客戶(hù)端控件集成到Blazor應(yīng)用程序中。
本教程描述了如何將JavaScript Dashboard控件集成到Blazor應(yīng)用程序中。
此解決方案使用ASP.NET Core后端(服務(wù)器端Blazor)來(lái)處理來(lái)自JavaScript儀表板的請(qǐng)求,客戶(hù)端定義了此組件的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.
1. 安裝以下NuGet軟件包:
2. 創(chuàng)建App_Data / Dashboards文件夾來(lái)存儲(chǔ)儀表板。
3. 打開(kāi)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("http://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),并添加以下代碼來(lái)呈現(xiàn)Web Dashboard:
razor
@page "/dashboard"
@inject IJSRuntime JSRuntime
@implements IDisposable
<div id="web-dashboard" style="width: 100%; height: 600px; border: 1px solid rgb(221, 221, 221);">
</div>
@code {
protected override void OnAfterRender(bool firstRender) {
JSRuntime.InvokeAsync<object>("JsFunctions.InitWebDashboard");
}
public void Dispose() {
JSRuntime.InvokeAsync<string>("JsFunctions.DisposeWebDashboard");
}
}
注意:您應(yīng)該調(diào)用儀表板組件的OnAfterRender方法進(jìn)行初始化,并調(diào)用Dispose方法釋放未使用的內(nèi)存。
4. 在wwwroot文件夾中,創(chuàng)建index.js文件,并實(shí)現(xiàn)初始化和處理組件的邏輯:
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軟件包,創(chuàng)建bundleconfig.json文件來(lái)捆綁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文件夾中,打開(kāi)index.html文件,并引用以下腳本和樣式表:
.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文件中,向列表中添加一個(gè)新的NavLink組件,來(lái)在導(dǎo)航菜單中顯示W(wǎng)eb Dashboard項(xiàng):
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>
運(yùn)行項(xiàng)目來(lái)查看結(jié)果:
DevExpress技術(shù)交流群3:700924826 歡迎一起進(jìn)群討論
本站文章除注明轉(zhuǎn)載外,均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載,但請(qǐng)務(wù)必注明出處、不得修改原文相關(guān)鏈接,如果存在內(nèi)容上的異議請(qǐng)郵件反饋至chenjj@ke049m.cn
文章轉(zhuǎn)載自:慧都網(wǎng)