Skip to main content
All docs
V25.1
  • Add a Web Dashboard to a Blazor Server Application

    • 3 minutes to read

    This topic describes how to add the DxDashboard component to a Blazor Server 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 Server Application

    Install the NuGet Packages

    Install the following NuGet packages in your project:

    • DevExpress.AspNetCore.Dashboard
    • DevExpress.Blazor.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.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;
    
    // Add services to the container.
    builder.Services.AddRazorComponents()
        .AddInteractiveServerComponents();
    builder.Services.AddRazorPages();
    builder.Services.AddServerSideBlazor();
    builder.Services.AddScoped<DashboardConfigurator>((IServiceProvider serviceProvider) => {
        DashboardConfigurator configurator = new DashboardConfigurator();
        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 RouteBuilderExtension.MapDashboardRoute() method call. Set api/dashboard as a route prefix and pass the name of the custom dashboard controller (DefaultDashboard):

    using DevExpress.DashboardAspNetCore;
    // ...
    app.UseHttpsRedirection();
    
    app.UseStaticFiles();
    app.UseRouting();
    app.UseAntiforgery();
    app.MapDashboardRoute("api/dashboard", "DefaultDashboard");
    
    app.MapRazorComponents<App>()
        .AddInteractiveServerRenderMode();
    
    app.Run();
    

    Add Stylesheets

    In the Pages folder, reference the following stylesheets in the Components/App.razor project file:

    <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

    In the _Imports.razor file, add the DevExpress.DashboardBlazor and DevExpress.DashboardWeb references.

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

    Add the Dashboard Component

    In the Pages folder, add a new Dashboard Razor component (Dashboard.razor) to the app and add the code below to render the Web Dashboard. Set the Endpoint property to the same value you use in the MapDashboardRoute method (api/dashboard) to send data requests to the server.

    Enable interactivity for DevExpress components:

    • Make sure the required interactive services are registered in the Program.cs file.
    • Add the corresponding render mode attribute to a component’s page.
    @page "/dashboard"
    @rendermode InteractiveServer
    
    <DxDashboard Endpoint="api/dashboard" WorkingMode="WorkingMode.ViewerOnly" 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 first use: