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@code { protected override void OnAfterRender(bool firstRender) { JSRuntime.InvokeAsync
注意:您应该调用仪表板组件的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
BlazorDashboardApp Loading...
.NET Core 3.1
BlazorDashboardApp Loading...
7. 在Shared / NavMenu.razor文件中,向列表中添加一个新的NavLink组件,来在导航菜单中显示Web Dashboard项:
razor
Web Dashboard
运行项目来查看结果:
到此,相信大家对“DevExpress怎么创建Blazor Dashboard应用”有了更深的了解,不妨来实际操作一番吧!这里是创新互联网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!
当前名称:DevExpress怎么创建BlazorDashboard应用
分享路径:http://scyanting.com/article/pdioih.html