DevExpress控件使用交流,DevExpress中国社区Dev联系电话 联系电话:023-68661681

界面控件DevExpress使用教程:创建一个Angular Dashboard应用(Part 2)

来源:   发布时间:2020-12-29   浏览:1047次

下载DevExpress v20.2完整版

DevExpress v20.2汉化资源获取

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

重要提示:使用本教程需要熟悉React的基本概念和模式,要查看这些概念,请访问angular.io

Step 2. 创建服务器应用程序

创建一个自定义服务器应用程序来显示您的数据,请按以下步骤操作:

1. 在Visual Studio中,创建一个ASP.NET Core 3.1应用程序,选择 Empty template。

2. 创建将存储仪表板的App_Data / Dashboards文件夹。

3. 用以下代码替换Startup.cs文件的内容:

using DevExpress.AspNetCore;
using DevExpress.DashboardAspNetCore;
using DevExpress.DashboardCommon;
using DevExpress.DashboardWeb;
using DevExpress.DataAccess.Json;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.FileProviders;
using System;

namespace AspNetCoreDashboardBackend {
public class Startup {
public Startup(IConfiguration configuration, IWebHostEnvironment hostingEnvironment) {
Configuration = configuration;
FileProvider = hostingEnvironment.ContentRootFileProvider;
}

public IConfiguration Configuration { get; }
public IFileProvider FileProvider { get; }

public void ConfigureServices(IServiceCollection services) {
services
// Configures CORS policies.
.AddCors(options => {
options.AddPolicy("CorsPolicy", builder => {
builder.AllowAnyOrigin();
builder.AllowAnyMethod();
builder.WithHeaders("Content-Type");
});
})
// Adds the DevExpress middleware.
.AddDevExpressControls()
// Adds controllers.
.AddControllers()
// Configures the dashboard backend.
.AddDefaultDashboardController(configurator => {
configurator.SetDashboardStorage(new DashboardFileStorage(FileProvider.GetFileInfo("App_Data/Dashboards").PhysicalPath));
configurator.SetDataSourceStorage(CreateDataSourceStorage());
configurator.ConfigureDataConnection += Configurator_ConfigureDataConnection;
});
}

public void Configure(IApplicationBuilder app, IWebHostEnvironment env) {
// Registers the DevExpress middleware.
app.UseDevExpressControls();
// Registers routing.
app.UseRouting();
// Registers CORS policies.
app.UseCors("CorsPolicy");
app.UseEndpoints(endpoints => {
// Maps the dashboard route.
EndpointRouteBuilderExtension.MapDashboardRoute(endpoints, "api/dashboard");
// Requires CORS policies.
endpoints.MapControllers().RequireCors("CorsPolicy");
});
}
public DataSourceInMemoryStorage CreateDataSourceStorage() {
DataSourceInMemoryStorage dataSourceStorage = new DataSourceInMemoryStorage();
DashboardJsonDataSource jsonDataSource = new DashboardJsonDataSource("Customers");
jsonDataSource.RootElement = "Customers";
dataSourceStorage.RegisterDataSource("jsonDataSourceSupport", jsonDataSource.SaveToXml());
return dataSourceStorage;
}
private void Configurator_ConfigureDataConnection(object sender, ConfigureDataConnectionWebEventArgs e) {
if (e.DataSourceName.Contains("Customers")) {
Uri fileUri = new Uri("https://raw.githubusercontent.com/DevExpress-Examples/DataSources/master/JSON/customers.json");
JsonSourceConnectionParameters jsonParams = new JsonSourceConnectionParameters();
jsonParams.JsonSource = new UriJsonSource(fileUri);
e.ConnectionParameters = jsonParams;
}
}
}
}

4. 运行以下命令来启动服务器:

cmd

dotnet run

5. 要在客户端应用程序中使用此服务器,请跳转到app.component.html文件。 将以下URL设置为端点:http:// localhost:5000 / api / dashboard

html

<dx-dashboard-control
style="display: block;width:100%;height:800px;"
endpoint='http://localhost:5000/api/dashboard'>
</dx-dashboard-control>

Step 3. 切换到Viewer模式

创建并保存仪表板后,您可以将仪表板设计器切换到Viewer模式。

1. 打开app.component.html文件,并将 workingMode属性设置为ViewerOnly:

html

<dx-dashboard-control
style="display: block;width:100%;height:800px;"
endpoint='http://localhost:5000/api/dashboard'
workingMode='ViewerOnly'>
</dx-dashboard-control>


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

DevExpress技术交流群2:775869749      欢迎一起进群讨论

慧都2020年终大促
本站文章除注明转载外,均为本站原创或翻译
欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果
转载请注明:文章转载自:DevExpress控件中文网 [https://www.devexpresscn.com/]
本文地址:https://www.devexpresscn.com/post/2127.html

相关产品: DevExpress Universal Subscription,

在线
客服
微信
QQ 电话
023-68661681
返回
顶部