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>