Server-Side Configuration (ASP.NET Core)

• Jan 25, 2021
• 4 minutes to read

The Web Dashboard consists of client and server parts:

Client

The client is a JavaScript application that supplies users with a UI to design and interact with a dashboard. The DashboardControl is the underlying control. The client communicates with the server using HTTP requests.

Server

The server is an ASP.NET Core or ASP.NET MVC application that handles client data requests and provides access to data sources, dashboard storage and other backend capabilities.

This document describes how to create and configure an ASP.NET Core application as a server-side solution.

You can download and use the example below as a ready-to-use backend:

View Example: ASP.NET Core backend for Web Dashboard

1. In Visual Studio, create a new project and select ASP.NET Core Web Application on the start page. Select the ASP.NET Core version in the dropdown, Empty as a template, and then select Create.

2. In the NuGet Package Manager, install the following package:

   • DevExpress.AspNetCore.Dashboard

3. In the Startup.cs file, add services for the DevExpress middleware and set controllers. Starting from ASP.NET Core 2.2, the .NET Core application supports two routing types: endpoint routing and routing at the MVC level.

   • ASP.NET Core 3.1+ uses endpoint routing.
   • ASP.NET Core 2.2 uses routing at the MVC level.

   Select the routing type according to the version of ASP.NET Core you use.

   The ConfigureServices method:

   using DevExpress.AspNetCore;
   // ...
   public void ConfigureServices(IServiceCollection services) {
       services
           .AddDevExpressControls()
           .AddControllers();
   }
   

   The Configure method:

   Endpoint Routing

   using DevExpress.AspNetCore;
   // ...
   public void Configure(IApplicationBuilder app, IWebHostEnvironment env) {
       app.UseDevExpressControls();
       app.UseRouting();
   }
   

   Routing at the MVC Level

   using DevExpress.AspNetCore;
   // ...
   public void Configure(IApplicationBuilder app, IHostingEnvironment env) {
       app.UseDevExpressControls();
   }
   

4. Set up cross-origin resource sharing (CORS) on your backend to configure access permissions for a server at a different origin.

   The ConfigureServices method:

   using DevExpress.DashboardAspNetCore;
   // ...
   public void ConfigureServices(IServiceCollection services) {
       services
           .AddCors(options => {
               options.AddPolicy("CorsPolicy", builder => {
                   builder.AllowAnyOrigin();
                   builder.AllowAnyMethod();
                   builder.WithHeaders("Content-Type");
               });
           })
           .AddDevExpressControls()
           .AddControllers()
   }
   

   The Configure method:

   Endpoint Routing

   public void Configure(IApplicationBuilder app, IWebHostEnvironment env) {
       app.UseDevExpressControls();
       app.UseRouting();
       app.UseCors("CorsPolicy");
       app.UseEndpoints(endpoints => {
           endpoints.MapControllers().RequireCors("CorsPolicy");
       });
   }
   

   Routing at the MVC Level

   public void Configure(IApplicationBuilder app, IHostingEnvironment env) {
       app.UseDevExpressControls();
       app.UseRouting();
       app.UseCors("CorsPolicy");
   }
   

   Note

   The server with these settings allows CORS requests from all origins with any scheme (http or https). It is insecure, because any website can make cross-origin requests to the app. We recommend you specify the client application’s URL directly to prohibit clients from getting access to your personal information on your server. See the following topic for more information: Cross-Origin Resource Sharing

5. Call the EndpointRouteBuilderExtension.MapDashboardRoute / RouteBuilderExtension.MapDashboardRoute method and specify a prefix (for example, api/dashboard).

   The Configure method:

   Endpoint Routing

   public void Configure(IApplicationBuilder app, IWebHostEnvironment env) {
       app.UseDevExpressControls();
       app.UseRouting();
       app.UseCors("CorsPolicy");
       app.UseEndpoints(endpoints => {
           EndpointRouteBuilderExtension.MapDashboardRoute(endpoints, "api/dashboard");
           endpoints.MapControllers().RequireCors("CorsPolicy");
       });
   }
   

   Routing at the MVC Level

   public void Configure(IApplicationBuilder app, IHostingEnvironment env) {app.UseDevExpressControls();
       app.UseRouting();
       app.UseCors("CorsPolicy");
       app.UseMvc(routes => {
           routes.MapDashboardRoute("api/dashboard");
       });
   }
   

   The api/dashboard prefix in the MapDashboardRoute method is used as a part of URL when you set the DashboardControlOptions.endpoint property on the client.

6. Set up the DashboardConfigurator. Use the following approaches to supply the server with data:

   • Prepare Dashboard Storage

     The Web Dashboard requires creating special dashboard storage. End users can save new dashboards to this storage and open existing dashboards.

   • Register Default Data Sources

     Supply end users with a default data source set.

   • Register Default Data Connections

     Provide a Web Dashboard with a predefined data connection set. The Dashboard Data Source Wizard displays these connections for end users when they create new data sources.

   The ConfigureServices method:

   public void ConfigureServices(IServiceCollection services) {
       services
           .AddCors(options => {
               options.AddPolicy("CorsPolicy", builder => {
                   builder.AllowAnyOrigin();
                   builder.AllowAnyMethod();
                   builder.WithHeaders("Content-Type");
               });
           })
           .AddDevExpressControls()
           .AddControllers()
           .AddDefaultDashboardController(configurator => {
               configurator.SetDashboardStorage(/*...*/);
               configurator.SetDataSourceStorage(/*...*/);
               configurator.SetConnectionStringsProvider(/*...*/);
               // ...
           });
   }
   

7. Run the following command to start the server:

   dotnet run
   

   To use this server in the client application, set the following URL as an endpoint: http://localhost:5000/api/dashboard

Next Steps

Refer to the following topics for information how to create a client-side Web Dashboard application:

• Create an Angular Dashboard Application
• Add a Web Dashboard to a React Application
• Dashboard Component for Vue
• Dashboard Control for JavaScript Applications (JQuery, Knockout, etc.)