Server-Side Configuration (ASP.NET Core)

• Aug 01, 2019
• 4 minutes to read

This approach is based on the client-server model, that is, you need to create a server (backend) project and a client (frontend) part that includes all the necessary styles, scripts and HTML-templates.

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

You can start with the following tutorials:

• Create an ASP.NET Core Dashboard application using the Template Gallery.
• Create an ASP.NET Core Dashboard application using the .NET Core Command-Line Interface Tools.
• Perform steps 1 through 9 in the Create an ASP.NET Core Dashboard Application detailed guide, as an alternative.

Register Default Controller

Call the MvcBuilderExtension.AddDefaultDashboardController method to register a default controller and add a default dashboard configurator. The code snippet below shows how to add the required code to the Startup.cs file.

using DevExpress.DashboardAspNetCore;
using DevExpress.AspNetCore;
using DevExpress.DashboardWeb;

// ...

public void ConfigureServices(IServiceCollection services) {
    services
        .AddMvc()
        .AddDefaultDashboardController(configurator => { });
    // ... 
}

Note that you need to define a dashboard storage and connection strings provider in a dashboard configurator. See the corresponding sections below for more information.

Add Third-Party and DevExtreme Middleware

Use the MvcServiceCollectionExtensions.AddDevExpressControls method to provide the Third-Party and DevExtreme middleware that is assembled into an application pipeline to handle requests and responses. The code snippet below shows how to add the required code to the Startup.cs file.

using DevExpress.AspNetCore;

// ...

public void ConfigureServices(IServiceCollection services) {
    // ... 
    services.AddDevExpressControls(settings => settings.Resources = ResourcesType.ThirdParty | ResourcesType.DevExtreme);
}

Register DevExpress Middleware

Call the ApplicationBuilderExtensions.UseDevExpressControls method to register the DevExpress middleware. The code snippet below shows how to add the required code to the Startup.cs file.

using DevExpress.AspNetCore;

// ...

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

Map Dashboard Route

Call the RouteBuilderExtension.MapDashboardRoute method to extend a MapRouteRouteBuilderExtensions object for routing within a web application containing the ASP.NET Core Dashboard. The code snippet below shows how to add the required code to the Startup.cs file.

using DevExpress.DashboardAspNetCore;

// ...

public void Configure(IApplicationBuilder app, IHostingEnvironment env) {
    // ...
    app.UseMvc(routes => {
        routes.MapDashboardRoute("api/dashboard");
        routes.MapRoute(
            name: "default",
            template: "{controller=Home}/{action=Index}/{id?}");
    });
}

The api/dashboard prefix is used to handle requests from the client-side DashboardControl (the DashboardControlOptions.endpoint, DashboardBackendOptionsBuilder.Uri, and DashboardBackendOptions.Uri properties).

Enable CORS

You need to set up cross-origin resource sharing (CORS) on your back-end to configure corresponding permissions to access the HTML JavaScript Dashboard from a server at a different origin.

Call AddCors in the ConfigureServices method to add CORS services to the app’s service container:

public void ConfigureServices(IServiceCollection services) {
    services
        .AddCors()
}

Add the CORS Middleware before you adds MVC and pass the url where the client side is hosted to the CorsPolicyBuilder.WithOrigins method:

using Microsoft.AspNetCore.Builder;

// ...

public void Configure(IApplicationBuilder app, IHostingEnvironment env) {
    // ...
    app.UseCors(builder =>
       builder.WithOrigins("http://example.com")
    );
    app.UseMvc(routes => {
        // ...
    })
}

In the example, the policy allows cross-origin requests from https://example.com and no other origins. Change this url to the url where the HTML JavaScript Dashboard is hosted.

Prepare a Dashboard Storage

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

See Preparing a Dashboard Storage for details on how to create a dashboard storage for the ASP.NET MVC server side.

Register Default Data Sources

See Register Default Data Sources for details on how to supply end-users with a default data source set.

Register Default Data Connections

See Register Default Data Connections to learn how to provide a Web Dashboard with a predefined data connection set. The Dashboard Data Source Wizard displays these connections for end-users when creating new data sources.