Server-Side Configuration (ASP.NET MVC)

• Feb 27, 2023
• 3 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.

Add a Dashboard Controller

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

C#

using DevExpress.DashboardWeb.Mvc;

namespace MvcCustomController {
    public class DefaultDashboardController : DashboardController {
    }
}

VB.NET

Imports DevExpress.DashboardWeb.Mvc

Namespace MvcCustomController
    Public Class DefaultDashboardController
        Inherits DashboardController

    End Class
End Namespace

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 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", "DefaultDashboard");
    // ...
}

VB.NET

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

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.

Configure CORS Policy

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

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.

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