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