下載DevExpress v20.2完整版 DevExpress v20.2漢化資源獲取
DevExpress擁有.NET開(kāi)發(fā)需要的所有平臺(tái)控件，包含600多個(gè)UI控件、報(bào)表平臺(tái)、DevExpress Dashboard eXpressApp 框架、適用于 Visual Studio的CodeRush等一系列輔助工具。
本教程描述如何將Web Dashboard控件集成到ASP.NET Core Web應(yīng)用程序中。
先決條件
Steps 1. 配置ASP.NET Core Web應(yīng)用程序
1. 在Visual Studio中，創(chuàng)建一個(gè)新項(xiàng)目并在開(kāi)始頁(yè)面上選擇ASP.NET Core Web Application作為項(xiàng)目模板。
2. 指定.NET Core版本，選擇Web應(yīng)用程序(Model-View-Controller)，然后單擊OK。
3. 打開(kāi)并將程序包源設(shè)置為All，安裝以下npm軟件包：
-
DevExpress.AspNetCore.Dashboard
-
-
4. 在Solution Explorer中右鍵單擊該項(xiàng)目，然后從上下文菜單中選擇Add | New Folder，將創(chuàng)建的文件夾重命名為App_Data并在其中創(chuàng)建Dashboards文件夾。
5. 打開(kāi)Add New Item對(duì)話框(Ctrl+Shift+A)，將npm配置文件（package.json）添加到項(xiàng)目中，并添加以下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. 在根目錄中創(chuàng)建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. 在項(xiàng)目的根目錄中創(chuàng)建libman.json文件，并添加以下LibMan配置以將圖標(biāo)字體復(fù)制到應(yīng)用程序的靜態(tài)內(nèi)容文件夾中：
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. 打開(kāi)下面的路徑，然后將nwind.xml數(shù)據(jù)庫(kù)復(fù)制到項(xiàng)目的App_Data文件夾中。
C:\Users\Public\Documents\DevExpress Demos 20.2\Components\Data\nwind.xml
10. 打開(kāi)appsettings.json文件，創(chuàng)建ConnectionStrings對(duì)象，并添加nwind連接字符串以注冊(cè)數(shù)據(jù)連接：
json
{
"Logging": {
// ..
},
"ConnectionStrings": {
"nwind": "XpoProvider=InMemoryDataStore;Read Only=true;Data Source=App_Data\\nwind.xml;"
}
}
Steps 2.添加和配置Web Dashboard
11. 打開(kāi)Index.cshtml文件，并將其內(nèi)容替換為以下代碼：
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. 打開(kāi)Startup.cs文件并替換其內(nèi)容：
.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.創(chuàng)建Dashboard
13. 現(xiàn)在可以使用設(shè)計(jì)器應(yīng)用程序，生成并運(yùn)行項(xiàng)目。
您的應(yīng)用程序應(yīng)如下所示：
14. 在Web Dashboard中創(chuàng)建第一個(gè)儀表板。
Steps 4.切換到Viewer模式
創(chuàng)建并保存儀表板后，可以將Dashboard Designer應(yīng)用程序切換到Viewer模式。
15. 在項(xiàng)目中，打開(kāi)Views | Home | Index.cshtml文件，更新BuilderFactory.Dashboard幫助器方法的代碼，如下所示：
C#
@(Html.DevExpress().Dashboard("clientDashboardDesigner1")
.WorkingMode(WorkingMode.ViewerOnly)
.Width("100%")
.Height("100%")
)
16. 運(yùn)行應(yīng)用程序，ASP.NET Core Dashboard控件顯示 ~/App_Data/Dashboards中的儀表板。
限制
ASP.NET Core Dashboard控件具有以下限制：
-
OLAP模式僅通過(guò)支持XML for Analysis（XMLA），使用靜態(tài)屬性來(lái)指定XMLA數(shù)據(jù)提供程序。
-
如果將ASP.NET Core Dashboard控件用于非Windows平臺(tái)，則需要另外配置該控件。 詳細(xì)信息：。
DevExpress技術(shù)交流群3：700924826 歡迎一起進(jìn)群討論
標(biāo)簽：
本站文章除注明轉(zhuǎn)載外，均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載，但請(qǐng)務(wù)必注明出處、不得修改原文相關(guān)鏈接，如果存在內(nèi)容上的異議請(qǐng)郵件反饋至chenjj@fc6vip.cn
文章轉(zhuǎn)載自：慧都網(wǎng)
金喜正規(guī)買球 
27次
相關(guān)產(chǎn)品
正式授權(quán)
最新文章 
金喜正規(guī)買球相關(guān)的文章 
微信
在線咨詢
渝公網(wǎng)安備
50010702500608號(hào)
客服熱線