DevExpress怎么创建BlazorDashboard应用

本篇内容主要讲解“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