DevExpressv20.2フルバージョンをダウンロードする
DevExpress中国語のWebサイトにアクセスして、最新の製品情報を直接入手してください。
DevExpress Universalには、600を超えるUIコントロール、レポートプラットフォーム、DevExpress Dashboard eXpressAppフレームワーク、CodeRush for Visual Studio、一連の補助ツールなど、.NET開発に必要なすべてのプラットフォームコントロールがあります。
重要な注意:このチュートリアルを使用するには、Reactの基本的な概念とパターンに精通している必要があります。これらの概念を表示するには、angular.ioにアクセスしてください 。
手順2.サーバーアプリケーションを作成する
データを表示するカスタムサーバーアプリケーションを作成するには、次の手順に従ってください。
1. Visual Studioで、ASP.NET Core 3.1アプリケーションを作成し、[空のテンプレート]を選択します。
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>
手順3.ビューアモードに切り替えます
ダッシュボードを作成して保存した後、ダッシュボードデザイナをビューアモードに切り替えることができます。
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 Technical Exchange Group 2:775869749グループディスカッションへようこそ