connectionstrings:手把手教你创建ASP.NET Core仪表板应

 2021-06-30 5:55    77  

点击“了解更多”获取工具

connectionstrings:手把手教你创建ASP.NET Core仪表板应用程序

DevExpress拥有.NET开发需要的所有平台控件,包含600多个UI控件connectionstrings、报表平台、DevExpress Dashboard eXpressApp 框架、适用于 Visual Studio的CodeRush等一系列辅助工具。

connectionstrings:手把手教你创建ASP.NET Core仪表板应用程序

本教程描述如何将Web Dashboard控件集成到ASP.NET Core Web应用程序中connectionstrings。

connectionstrings:手把手教你创建ASP.NET Core仪表板应用程序

先决条件.NET Core SDKVisual Studio (基于目标.NET Core SDK版本的最低必需版本)Steps 1. 配置ASP.NET Core Web应用程序1. 在Visual Studio中connectionstrings,创建一个新项目并在开始页面上选择ASP.NET Core Web Application作为项目模板。

2. 指定.NET Core版本,选择Web应用程序(Model-View-Controller),然后单击OK。

3. 打开NuGet Package Manager并将程序包源设置为All,安装以下npm软件包:

DevExpress.AspNetCore.DashboardBuildBundlerMinifierMicrosoft.Web.LibraryManager.Build4. 在Solution Explorer中右键单击该项目,然后从上下文菜单中选择Add | New Folder,将创建的文件夹重命名为App_Data并在其中创建Dashboards文件夹。

5. 打开Add New Item对话框(Ctrl+Shift+A),将npm配置文件(package.json)添加到项目中,并添加以下npm包:

json

{"version": "1.0.0","name": "asp.net","private": true,"license": "MIT","devDependencies": {"devextreme": "20.2-next","@devexpress/analytics-core": "20.2-next","devexpress-dashboard": "20.2-next","jquery-ui-dist": "^1.12.1"}}6. 右键单击package.json,然后选择Restore Packages。

7. 在根目录中创建bundleconfig.json文件,并添加以下配置:

json

[{"outputFileName": "/css/site.min.css","inputFiles": ["node_modules/devextreme/dist/css/dx.common.css","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": "/js/site.min.js","inputFiles": ["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}]8. 在项目的根目录中创建libman.json文件,并添加以下LibMan配置以将图标字体复制到应用程序的静态内容文件夹中:

json

{"version": "1.0","defaultProvider": "filesystem","libraries": [{"library": "node_modules/devextreme/dist/css/icons/","destination": "/css/icons/","files": ["dxicons.ttf","dxicons.woff","dxicons.woff2"]}]}9. 打开下面的路径,然后将nwind.xml数据库复制到项目的App_Data文件夹中。

C:\Users\Public\Documents\DevExpress Demos 20.2\Components\Data\nwind.xml

10. 打开appsettings.json文件,创建ConnectionStrings对象,并添加nwind连接字符串以注册数据连接:

json

{"Logging": {// ..},"ConnectionStrings": {"nwind": "XpoProvider=InMemoryDataStore;Read Only=true;Data Source=App_Data\\nwind.xml;"}}Steps 2.添加和配置Web Dashboard11. 打开Index.cshtml文件,并将其内容替换为以下代码:

cshtml

@{ Layout = null;}<!-- Add the following namespace usages: -->@using DevExpress.AspNetCore@using DevExpress.DashboardWeb@using DevExpress.DashboardAspNetCore<!DOCTYPE html><html lang="en"><head><!-- Add bundled resources. --><link href="~/css/site.min.css" rel="stylesheet" /><script src="~/js/site.min.js"></script></head><body><!-- Add the Web Dashboard with the "clientDashboardControl1" name to a View, specify its size, and set the Working Mode to Designer. --><div style="position: absolute; left:0;top:0;right:0;bottom:0;">@(Html.DevExpress().Dashboard("clientDashboardControl1").WorkingMode(WorkingMode.Designer).Width("100%").Height("100%"))</div></body></html>12. 打开Startup.cs文件并替换其内容:

.NET 5.0 和 .NET Core 3.1

using DevExpress.AspNetCore;using DevExpress.DashboardAspNetCore;using DevExpress.DashboardWeb;using Microsoft.AspNetCore.Builder;using Microsoft.AspNetCore.Hosting;using Microsoft.Extensions.Configuration;using Microsoft.Extensions.DependencyInjection;using Microsoft.Extensions.FileProviders;using Microsoft.Extensions.Hosting;namespace AspNetCoreDashboardWebApplication {public class Startup {public Startup(IConfiguration configuration, IWebHostEnvironment hostingEnvironment) {Configuration = configuration;FileProvider = hostingEnvironment.ContentRootFileProvider;}public IConfiguration Configuration { get; }public IFileProvider FileProvider { get; }// This method gets called by the runtime. Use this method to add services to the container.public void ConfigureServices(IServiceCollection services) {// Configures services to use the Web Dashboard Control.services.AddDevExpressControls().AddControllersWithViews().AddDefaultDashboardController(configurator => {configurator.SetDashboardStorage(new DashboardFileStorage(FileProvider.GetFileInfo("App_Data/Dashboards").PhysicalPath));configurator.SetConnectionStringsProvider(new DashboardConnectionStringsProvider(Configuration));});}// This method gets called by the runtime. Use this method to configure the pipeline.public void Configure(IApplicationBuilder app, IWebHostEnvironment env) {if(env.IsDevelopment()) {app.UseDeveloperExceptionPage();} else {app.UseExceptionHandler("/Home/Error");app.UseHsts();}app.Use();app.UseStaticFiles();// Registers the DevExpress middleware.app.UseDevExpressControls();app.UseRouting();app.UseAuthorization();app.UseEndpoints(endpoints => {// Maps the dashboard route.EndpointRouteBuilderExtension.MapDashboardRoute(endpoints, "api/dashboards");endpoints.MapControllerRoute(name: "default",pattern: "{controller=Home}/{action=Index}/{id?}");});}}}.NET Core 2.1

using DevExpress.AspNetCore;using DevExpress.DashboardAspNetCore;using DevExpress.DashboardWeb;using Microsoft.AspNetCore.Builder;using Microsoft.AspNetCore.Hosting;using Microsoft.Extensions.Configuration;using Microsoft.Extensions.DependencyInjection;using Microsoft.Extensions.FileProviders;namespace AspNetCoreDashboardWebApplication {public class Startup { public Startup(IConfiguration configuration, IHostingEnvironment hostingEnvironment) {Configuration = configuration;FileProvider = hostingEnvironment.ContentRootFileProvider;}public IConfiguration Configuration { get; }public IFileProvider FileProvider { get; }public void ConfigureServices(IServiceCollection services) {// Add a DashboardController class descendant with a specified dashboard storage// and a connection string provider.services.AddMvc().AddDefaultDashboardController(configurator => {configurator.SetDashboardStorage(new DashboardFileStorage(FileProvider.GetFileInfo("App_Data/Dashboards").PhysicalPath));configurator.SetConnectionStringsProvider(new DashboardConnectionStringsProvider(Configuration));});// services.AddDevExpressControls();}public void Configure(IApplicationBuilder app, IHostingEnvironment env) {if (env.IsDevelopment()) {app.UseDeveloperExceptionPage();} else {app.UseExceptionHandler("/Home/Error");}app.UseStaticFiles();// Register the DevExpress middleware.app.UseDevExpressControls();app.UseMvc(routes => {// Map dashboard routes.routes.MapDashboardRoute("api/dashboard");routes.MapRoute(name: "default",template: "{controller=Home}/{action=Index}/{id?}");});}}}Steps 3.创建Dashboard13. 现在可以使用设计器应用程序,生成并运行项目。

您的应用程序应如下所示:

14. 在Web Dashboard中创建第一个仪表板。

Steps 4.切换到Viewer模式创建并保存仪表板后,可以将Dashboard Designer应用程序切换到Viewer模式。

15. 在项目中,打开Views | Home | Index.cshtml文件,更新BuilderFactory.Dashboard帮助器方法的代码,如下所示:

C#

@(Html.DevExpress().Dashboard("clientDashboardDesigner1").WorkingMode(WorkingMode.ViewerOnly).Width("100%").Height("100%"))16. 运行应用程序,ASP.NET Core Dashboard控件显示 ~/App_Data/Dashboards中的仪表板。

限制ASP.NET Core Dashboard控件具有以下限制:

OLAP模式仅通过MSMDPUMP 支持XML for Analysis(XMLA),使用DashboardOlapDataSource.OlapDataProvider静态属性来指定XMLA数据提供程序。如果将ASP.NET Core Dashboard控件用于非Windows平台,则需要另外配置该控件。 详细信息:Linux and MacOS Specifics。

本文标签:应用程序手把手

原文链接:https://www.xgfox.com/jsyd/110.html

本文版权:如无特别标注,本站文章均为原创。