Server-Side Configuration (ASP.NET MVC)

• Jul 16, 2021
• 2 minutes to read

This article assumes that you implement a client-server architecture. An ASP.NET Core or an ASP.NET MVC application serves as the backend (server side). The client (frontend) application includes all the necessary styles, scripts and HTML-templates. Note that client scripts, libraries on the server side, and devexpress npm packages should have matching version numbers.

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

You can start with the following tutorials:

• Create an ASP.NET MVC Dashboard application in the Template Gallery.
• Perform steps 1 through 8 in the Create an ASP.NET MVC Dashboard Application detailed guide.
• Integrate the DashboardExtension to the existed MVC application.

Customize the following settings to use the created ASP.NET MVC Dashboard application as server:

Add Route Definition

In the DashboardConfig.cs file, call the RouteCollectionExtension.MapDashboardRoute method and pass the prefix to allow the HTML JavaScript Dashboard control to interact with the ASP.NET MVC backend:

C#

using DevExpress.DashboardWeb.Mvc;
// ...
public static void RegisterRoutes(RouteCollection routes) {
    routes.MapDashboardRoute("api/dashboard");
    // ...
}

VB.NET

Imports DevExpress.DashboardWeb.Mvc
' ...
Public Shared Sub RegisterRoutes(ByVal routes As RouteCollection)
    routes.MapDashboardRoute("api/dashboard")
    ' ...
End Sub

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

Note

For information on how to adjust routing when the Web Dashboard is used in ASP.NET MVC Areas, see the T541859 KB article.

Enable CORS

You need to configure corresponding permissions to access the HTML JavaScript Dashboard from a server at a different origin. See Cross-Origin Resource Sharing for information on how to set up cross-origin resource sharing (CORS) on your back-end.

Next Steps

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