Server-Side Configuration (ASP.NET Core)

• Feb 08, 2024
• 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 6.0 backend for Web Dashboard

Create a New Application

In Visual Studio, create a new project and select ASP.NET Core Empty on the start page. Select the target framework version in the dropdown and create the application.

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

Add services and set controllers for the DevExpress middleware that is assembled into an application pipeline to handle requests and responses.

using DevExpress.AspNetCore;
// ...
builder.Services.AddDevExpressControls();
// ...
app.UseDevExpressControls();

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.

builder.Services.AddCors(options => {
    options.AddPolicy("CorsPolicy", builder => {
        builder.AllowAnyOrigin();
        builder.AllowAnyMethod();
        builder.WithHeaders("Content-Type");
    });
});
// ...
app.UseRouting();
app.UseCors("CorsPolicy");
// ...
// Requires CORS policies.
app.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 RouteBuilderExtension.MapDashboardRoute method. Pass the dashboard route prefix (for example, api/dashboard) and the name of the dashboard controller (without Controller postfix) as parameters.

// Maps the dashboard route.
app.MapDashboardRoute("api/dashboard", "DefaultDashboard");

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

The configurator allows you to define dashboard storage, data source storage, and connection strings provider.

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 code snippet below shows how to register the DashboardConfigurator as a scoped service at application startup.

using DevExpress.AspNetCore;
using DevExpress.DashboardAspNetCore;
using DevExpress.DashboardWeb;
using Microsoft.Extensions.FileProviders;
// ...
IFileProvider? fileProvider = builder.Environment.ContentRootFileProvider;
IConfiguration? configuration = builder.Configuration;
// ...
builder.Services.AddScoped<DashboardConfigurator>((IServiceProvider serviceProvider) => {
    DashboardConfigurator configurator = new DashboardConfigurator();
    configurator.SetDashboardStorage(new DashboardFileStorage(fileProvider.GetFileInfo("Data/Dashboards").PhysicalPath));
    configurator.SetConnectionStringsProvider(new DashboardConnectionStringsProvider(configuration));
    return configurator;
});

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.

Prepare Data Source Storage

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.

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:

• 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.)

You can also create the ASP.NET Core Dashboard application from scratch or integrate the control into an existing application.