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

最新推荐文章于 2022-06-26 17:07:30 发布
最新推荐文章于 2022-06-26 17:07:30 发布
阅读量408 收藏 1
点赞数 1
文章标签： asp.net devexpress c#
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/AABBbaby/article/details/115111885
版权

下载DevExpress v20.2完整版

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

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

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控件具有以下限制：

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

界面开发小八哥
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
asp.net c#实现仪表盘
10-10
生成线图、柱图、饼图、仪表盘等的C#类。
ASP.NET，仪表盘，难得的源码 Dundas Gauge for ASP.NET version 2.0
10-07
ASP.NET，仪表盘，难得的源码 Dundas Gauge for ASP.NET version 2.0 内有注册机，保证能安装使用
ASP.NET MVC实现仪表程序
weixin_34409703的博客
07-29 121
1.1.1 摘要 在大多数情况下，我们的Web程序不仅仅需要给用户提供具体数据，在一些情况下，我们还需要给高级的用户或管理者提供数据汇总和分析图表之类的功能。 如果我们不想显示一大堆烦心的数据，希望通过饼图或条形图来直观地显示数据，这是我们可以考虑使用图表控件显示。 大家在访问我的博客时，在左边都可以看到一个统计每天的访问人数的工具，这就是一个简单的数据仪表程序，我们可以通过它直观地知道当日...
手把手教你创建ASP.NET Web Forms 仪表盘应用
需要界面开发、IDE工具研发中文教程资料的小伙伴，记得私信我~
04-01 729
下载DevExpress v20.2完整版 DevExpress技术交流群3：700924826欢迎一起进群讨论 DevExpress拥有.NET开发需要的所有平台控件，包含600多个UI控件、报表平台、DevExpress Dashboard eXpressApp 框架、适用于 Visual Studio的CodeRush等一系列辅助工具。 本教程将为大家演示如何使用ASPxDashboard控件创建仪表板Web应用程序。 Steps 1-3. 添加Web仪表板控件 1. 在Visu...
【DevExpress v17.2新功能预告】DevExtreme ASP.NET MVC新的强类型HTML Helpers
evget20103088的专栏
11-07 175
在ASP.NET MVC中构建视图时，强类型HTML helpers非常有用。像@Html.TextBoxFor(m =&gt; m.FirstName)这样内置的Helper方法已经存在很长时间了，它们提供诸如视图编译时间检查、Razor支持等优点，并支持使用数据注释来自动配置重要的选项，如验证规则。 自从我们发布DevExtreme ASP.NET MVC控件以来，它们已经包含了一套H...
.net web 仪表盘图标demo
06-15
.net web 仪表盘图标demo,这个是JQUERY的。
使用ASP.NET Core，JavaScript，PostegreSql和ChartJs的动态仪表板Web应用程序
寒冰屋的专栏
03-18 413
目录 介绍 先决条件 创建项目架构 创建数据库 实现后端 一）创建DataAccess 1）创建实体和关系 2）设置数据库 3）创建存储库 II）实现应用逻辑 III）实现Web服务 IV）测试Web API 实现前端 运行应用程序 参考 通过本文，我们将使用.NET MVC Core项目从头开始构建一个漂亮的仪表板网页。在此处概述的步骤中，您将学习干净的体系结构，实体框架代码优先方法，开发Web服务以及使用chartjs。 下载源代码（RAR）-854.9 KB 介绍
手把手教你在.NET中创建Web服务实现方法
10-26
在Visual Studio .NET中，选择"新建项目"，然后在模板列表中找到"ASP.NET Web服务应用程序"。给项目起个名字，比如"WebServiceDemo"，然后点击"确定"。这将创建一个新的Web服务项目，包含一个默认的Web服务类（如...
手把手教你做ASP.NET留言本(初学者)
06-27
别舍不得这几分，学到东西才是最重要的，下载后 评价你会加6分，所以你不亏你还多加了1分 ...手把手教你做ASP.NET留言本 适合初学者的最好资源了 下载后 千万记得评价你会加11分，所以你不亏你还都加了1分
C#做的漂亮的仪表盘。(含源代码)
11-20
C#做的漂亮的仪表盘，拖动滚动条仪表盘自动变化，适合工业控制，此控件用来来显示仪表的状态。各个形状都有！
手把手教你构建Web应用程序-视频教程网盘链接提取码下载 .txt
03-31
pring Boot 在传统 Spring 框架的基础上做了创新和优化，具有快速开发、快速部署、方便配置等特性，提高了开发效率，降低了维护成本。越来越多的企业将其作为系统开发的首选框架，Spring Boot 已经成为 Java 工程师...
.net输出仪表盘图表（基于highcharts)
yw1688的专栏
01-07 975
首先引用highcharts的主脚本，此处略。 以下为封装的代码： /// /// 生成仪表盘脚本 /// /// 机组编号 /// 指针数据 /// 机组名称 /// 仪表标题 /// 单位 /// 仪表最小值 /// 机组最大值
ASP.NET Core可视化日志组件使用
Dotnet9的专栏
04-17 699
前言 今天站长推荐一款日志可视化组件LogDashboard，可以不用安装第三方进程，只需要在项目中安装相应的Nuget包，添加数行代码，就可以实现拥有带Web页面的日志管理面板，十分nice哦。 下面是官方介绍： 官方文档地址：https://doc.logdashboard.net/ LogDashboard是在github上开源的aspnetcore项目, 它旨在帮助开发人员排查项目运行中出现错误时快速查看日志排查问题 通常我们会在项目中使用nlog、log4net等日志组件,它们用于记录日志的功.
vue3 编写.netcore类库带dashboard
码农的专栏
06-26 518
一、打包vue项目 二、新建类库：ClassLibrary2将vue.js build目录拷贝到类库www目录下，并设置为嵌入资源 Class1.cs 三、项目中引用ClassLibrary2并在Startup.cs中添加一行 在浏览器输入：http://localhost:5000/index#/......
web 版本的汽车仪表盘，非常好看。还有各种图形
baobeituping的专栏
06-20 762
web 版本的汽车仪表盘，非常好看。还有各种图形
DevExpress ASP.NET Core Controls v18.2新功能详解
需要界面开发、IDE工具研发中文教程资料的小伙伴，记得私信我~
03-04 714
行业领先的.NET界面控件2018年第二次重大更新——DevExpress v18.2日前正式发布，本站将以连载的形式为大家介绍新版本新功能。本文将介绍了DevExpress ASP.NET Core Controls v18.2的新功能，新版30天免费试用！点击下载&gt;&gt; 全新的New ASP.NET Core Spreadsheet (CTP) 在新版本中，您可以非常轻松地将电...
【中间件】.net Core中使用HttpReports进行接口统计，分析, 可视化， 监控，追踪等
qq_43206083的博客
05-11 753
HttpReports 基于.Net Core 开发的APM监控系统，使用MIT开源协议，主要功能包括，统计, 分析, 可视化， 监控，追踪等，适合在微服务环境中使用。 官方地址：https://www.yuque.com/httpreports/docs/uyaiil 主要功能 接口调用指标分析 多服务节点数据聚合分析 慢请求，错误请求分析 接口调用日志查询 多类型预警监控 HTTP,Grpc 调用分析 ...
Apache SkyWalking 为.NET Core带来开箱即用的分布式追踪和应用性能监控
dotNET跨平台
05-24 1778
&#13; &#13; &#13; &#13; &#13; &#13; &#13; 在大型网站系统设计中，随着分布式架构，特别是微服务架构的流行，我们将系统解耦成更小的单元，通过不断的...
ASP.NET MVC音乐商店教程：一步步教你构建应用
在【ASP.NETMVC音乐商店-1创建项目】中，首先介绍了如何在Visual Studio中创建一个新的ASP.NET MVC3 Web应用程序项目。这涉及到选择合适的项目模板，并命名项目为`MvcMusicStore`。 【ASP.NETMVC音乐商店-2.控制器...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值