Skip to main content
All docs
V24.1

Add a Web Dashboard to a Blazor WebAssembly Application

  • 3 minutes to read

This topic describes how to add the DxDashboard component to a Blazor WebAssembly application. The Dashboard component wraps the JavaScript DashboardControl and uses an ASP.NET Core backend with the Dashboard Controller to handle client data requests.

You can also download the example:

View Example: Get Started - Dashboard Component in Blazor WebAssembly Application

Configure the Server Project

Configure the ASP.NET Core backend as follows.

Install the NuGet Package

Install the following NuGet package: DevExpress.AspNetCore.Dashboard

Add a Dashboard Controller

Add a new empty DefaultDashboard controller and derive it from the DashboardController class:

using DevExpress.DashboardAspNetCore;
using DevExpress.DashboardWeb;
using Microsoft.AspNetCore.DataProtection;

namespace BlazorDashboardApp {
    public class DefaultDashboardController : DashboardController {
        public DefaultDashboardController(DashboardConfigurator configurator, IDataProtectionProvider? dataProtectionProvider = null)
            : base(configurator, dataProtectionProvider) {
        }
    }
}

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.

using DevExpress.AspNetCore;
using DevExpress.DashboardAspNetCore;
using DevExpress.DashboardCommon;
using DevExpress.DashboardWeb;
using Microsoft.Extensions.FileProviders;

var builder = WebApplication.CreateBuilder(args);

IFileProvider fileProvider = builder.Environment.ContentRootFileProvider;
IConfiguration configuration = builder.Configuration;

builder.Services.AddControllersWithViews();
builder.Services.AddRazorPages();
builder.Services.AddDevExpressControls();
builder.Services.AddScoped<DashboardConfigurator>((IServiceProvider serviceProvider) => {
    DashboardConfigurator configurator = new DashboardConfigurator();
    // Register Dashboard Storage
    configurator.SetDashboardStorage(new DashboardFileStorage(fileProvider.GetFileInfo("Data/Dashboards").PhysicalPath));
    DataSourceInMemoryStorage dataSourceStorage = new DataSourceInMemoryStorage();
    configurator.SetDataSourceStorage(dataSourceStorage);
    return configurator;
});

Note

You can also create a folder to store dashboards in a file system: Prepare Dashboard Storage.

In the same file, add the app.UseDevExpressControls() and app.MapDashboardRoute() method calls. Set api/dashboard as a route prefix and pass the name of the custom dashboard controller (DefaultDashboard):

using DevExpress.AspNetCore;
// ...
app.UseHttpsRedirection();

app.UseBlazorFrameworkFiles();
app.UseStaticFiles();
app.UseDevExpressControls();
app.UseRouting();
app.MapDashboardRoute("api/dashboard", "DefaultDashboard");

app.MapRazorPages();
app.MapControllers();
app.MapFallbackToFile("index.html");

app.Run();

Configure the Client Project

Configure the WebAssebmly part of the application as follows.

Install the NuGet Package

Install the following NuGet package: DevExpress.Blazor.Dashboard

Add Stylesheets

In the wwwroot folder, open the index.html file and reference the following stylesheets:

<head>
    <!-- ... -->
    <link href="_content/DevExpress.Blazor.Dashboard/ace.css" rel="stylesheet" />
    <link href="_content/DevExpress.Blazor.Dashboard/ace-theme-dreamweaver.css" rel="stylesheet" />
    <link href="_content/DevExpress.Blazor.Dashboard/ace-theme-ambiance.css" rel="stylesheet" />
    <link href="_content/DevExpress.Blazor.Dashboard/dx.light.css" rel="stylesheet" />
    <link href="_content/DevExpress.Blazor.Dashboard/dx-analytics.common.css" rel="stylesheet" />
    <link href="_content/DevExpress.Blazor.Dashboard/dx-analytics.light.css" rel="stylesheet" />
    <link href="_content/DevExpress.Blazor.Dashboard/dx-querybuilder.css" rel="stylesheet" />
    <link href="_content/DevExpress.Blazor.Dashboard/dx-dashboard.light.min.css" rel="stylesheet" />
</head>

Add References

Reference the DevExpress.DashboardBlazor and DevExpress.DashboardWeb namespaces. For example, you can do this in the _Imports.razor file alongside with the existing references:

...
@using DevExpress.DashboardBlazor
@using DevExpress.DashboardWeb

Add the Dashboard Component

Add the code below to a Razor page to render the Web Dashboard. Specify the same endpoint as in the RouteBuilderExtension.MapDashboardRoute method call:

<DxDashboard Endpoint="api/dashboard" style="width: 100%; height: 800px;">
</DxDashboard>

See the following topic for information on how to configure the Dashboard component: Property Binding in Blazor.

Next Steps

You can do the following to prepare the control for the first use: