欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-03-03 16:00:06
...

下载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. 打开NuGet Package Manager并将程序包源设置为All,安装以下npm软件包:

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. 现在可以使用设计器应用程序,生成并运行项目。

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

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

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

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仪表板应用程序
            
    
    
        DevExpressASP.NET CoreASP.NET仪表板 
限制

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


上DevExpress中文网,获取第一手最新产品资讯!

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