Server-Side Configuration (ASP.NET Core)

  • 5 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 3.1 backend for Web Dashboard

Create a New Application

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.

Add the NuGet Package

The ASP.NET Core Dashboard backend requires the DevExpress.AspNetCore.Dashboard package.

You can also refer to the following topic for information about how to use NuGet packages to install DevExpress controls: Install DevExpress Controls Using NuGet Packages.

Add a Dashboard Controller

Add a new empty DefaultDashboard controller to the project’s Controllers folder and inherit the DashboardController class:

using DevExpress.DashboardAspNetCore;
using DevExpress.DashboardWeb;
using Microsoft.AspNetCore.DataProtection;

namespace AspNetCoreDashboardBackend {
    public class DefaultDashboardController : DashboardController {
        public DefaultDashboardController(DashboardConfigurator configurator, IDataProtectionProvider dataProtectionProvider = null)
            : base(configurator, dataProtectionProvider) {
        }
    }
}

You can also derive a custom dashboard controller from RestrictedDashboardController to prevent inadvertent or unauthorized dashboard modifications and protect dashboards stored on a server.

Add Services

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:

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

Configure CORS Policy

Set up cross-origin resource sharing (CORS) policy 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:

public void Configure(IApplicationBuilder app, IWebHostEnvironment env) {
    app.UseDevExpressControls();
    app.UseRouting();
    app.UseCors("CorsPolicy");
    app.UseEndpoints(endpoints => {
        endpoints.MapControllers().RequireCors("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

Map Dashboard Routes

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

The Configure method:

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

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.

Register the Dashboard Configurator

Set up the DashboardConfigurator that defines dashboard storage, data source storage, and connection strings provider. Use the following approaches to supply the server with data:

  • Prepare Dashboard Storage

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

  • Register Default Data Sources

    Supply users with a default data source set.

  • Register Default Data Connections

    Supply 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.

Register the DashboardConfigurator as a service based on your requirements. The AddSingleton method registers the DashboardConfigurator service with the same service lifetime as AddDefaultDashboardController. However, we recommend that you use the AddScoped method as it can be used in more cases (for example, security-based scenarios like multi-tenancy dashboards).

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();
    services.AddScoped<DashboardConfigurator>((IServiceProvider serviceProvider) => {
        DashboardConfigurator configurator = new DashboardConfigurator();
        configurator.SetDashboardStorage(/*...*/);
        configurator.SetDataSourceStorage(/*...*/);
        configurator.SetConnectionStringsProvider(/*...*/);
        // ...
        return configurator;
    });
}

Start the Server

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:

See Also