Download DevExpress v20.2 full version
Go to DevExpress Chinese website to get first-hand latest product information!
DevExpress Universal has all the platform controls needed for .NET development, including more than 600 UI controls, reporting platforms, DevExpress Dashboard eXpressApp framework, CodeRush for Visual Studio and a series of auxiliary tools.
Important note : To use this tutorial, you need to be familiar with the basic concepts and patterns of React. To view these concepts, please visit angular.io .
Step 2. Create server application
To create a custom server application to display your data, please follow these steps:
1. In Visual Studio, create an ASP.NET Core 3.1 application and select Empty template.
2. Create the App_Data / Dashboards folder where the dashboard will be stored.
3. Replace the contents of the Startup.cs file with the following code:
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. Run the following command to start the server:
cmd
dotnet run
5. To use this server in a client application, jump to the app.component.html file. Set the following URL as the endpoint: 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. Switch to Viewer mode
After creating and saving the dashboard, you can switch the dashboard designer to Viewer mode.
1. Open the app.component.html file and set the workingMode property to 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 Welcome to join the group discussion