Server-Side Configuration (ASP.NET Core)

  • 4 minutes to read

The Web Dashboard is a client-side control that communicates with the server part using HTTP requests:

  • The client part is a JavaScript application that supplies end users with a UI to design and interact with a dashboard. The DashboardControl is the underlying control.
  • The server part is an ASP.NET Core or ASP.NET MVC application that handles client data requests and includes various backend capabilities such as data access, dashboard storage, etc.

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:

    using DevExpress.AspNetCore;
    // ...
    public void Configure(IApplicationBuilder app, IWebHostEnvironment env) {
        app.UseDevExpressControls();
        app.UseRouting();
    }
    
  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:

    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

  5. 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");
            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.

  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:

See Also