下載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. 現在可以使用設計器應用程序，生成并運行項目。
您的應用程序應如下所示：
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模式僅通過支持XML for Analysis（XMLA），使用靜態屬性來指定XMLA數據提供程序。
-
如果將ASP.NET Core Dashboard控件用于非Windows平臺，則需要另外配置該控件。 詳細信息：。
DevExpress技術交流群3：700924826 歡迎一起進群討論
標簽：
本站文章除注明轉載外，均為本站原創或翻譯。歡迎任何形式的轉載，但請務必注明出處、不得修改原文相關鏈接，如果存在內容上的異議請郵件反饋至chenjj@ke049m.cn
文章轉載自：慧都網
半島外圍網上直營 
21次
相關產品
正式授權
最新文章 
半島外圍網上直營相關的文章 
微信
在線咨詢
渝公網安備
50010702500608號
客服熱線