外围网上金喜网站

DevExpress使用教程：手把手教你创建ASP.NET Core Dashboard应用

翻译|使用教程|编辑：龚雪|2021-03-22 10:12:41.150|阅读 670 次

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

# 界面/图表报表/文档/IDE等千款热门软控件火热销售中 >>

相关链接：

下载DevExpress v20.2完整版    DevExpress v20.2汉化资源获取

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

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

先决条件
Steps 1. 配置ASP.NET Core Web应用程序

 1. 在Visual Studio中，创建一个新项目并在开始页面上选择ASP.NET Core Web Application作为项目模板。

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

3. 打开并将程序包源设置为All，安装以下npm软件包：

  • DevExpress.AspNetCore.Dashboard

 4. 在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": "wwwroot/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": "wwwroot/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": "wwwroot/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 Dashboard

11. 打开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 HTTP request pipeline.
public void Configure(IApplicationBuilder app, IWebHostEnvironment env) {
if(env.IsDevelopment()) {
app.UseDeveloperExceptionPage();
} else {
app.UseExceptionHandler("/Home/Error");
app.UseHsts();
}
app.UseHttpsRedirection();
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.创建Dashboard

13. 现在可以使用设计器应用程序，生成并运行项目。

DevExpress使用教程

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

DevExpress使用教程

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中的仪表板。

DevExpress使用教程
限制

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

  • OLAP模式仅通过支持XML for Analysis（XMLA），使用静态属性来指定XMLA数据提供程序。
  • 如果将ASP.NET Core Dashboard控件用于非Windows平台，则需要另外配置该控件。 详细信息：。

DevExpress技术交流群3：700924826      欢迎一起进群讨论

慧都高端UI界面开发
标签：

本站文章除注明转载外，均为本站原创或翻译。欢迎任何形式的转载，但请务必注明出处、不得修改原文相关链接，如果存在内容上的异议请邮件反馈至chenjj@ipmdipw.cn

文章转载自：慧都网

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
相关产品
DevExpress Universal Subscription

优秀的界面控件开发包，帮助企业构建卓越应用！

DevExpress DXperience Subscription

高性价比的企业级.NET用户界面套包，助力企业创建卓越应用！

DevExpress ASP.NET Controls

多款重量级ASP.NET用户界面组件套包，让您快速开发出完美、强大的应用程序！

DevExpress WinForms Subscription

为Windows Forms平台创建具有影响力的业务解决方案，高性价比WinForms界面控件套包。

DevExpress WPF Subscription

高效MVVM开发模式，WPF界面解决方案首选工具，帮助企业实现酷炫动效界面。

title
title
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP