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:
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.Server {
public class DefaultDashboardController : DashboardController {
public DefaultDashboardController(DashboardConfigurator configurator, IDataProtectionProvider dataProtectionProvider = null)
: base(configurator, dataProtectionProvider) {
}
}
}
Register the Dashboard Configurator
In the Startup.cs file, modify the ConfigureServices
method:
- Add services for DevExpress Controls.
- Set up dashboard storage.
- Set up data source storage.
using DevExpress.AspNetCore;
using DevExpress.DashboardAspNetCore;
using DevExpress.DashboardCommon;
using DevExpress.DashboardWeb;
using Microsoft.Extensions.FileProviders;
using System;
// ...
public Startup(IConfiguration configuration) {
Configuration = configuration;
}
public IConfiguration Configuration { get; }
public void ConfigureServices(IServiceCollection services) {
// ...
services.AddDevExpressControls();
services.AddMvc();
services.AddScoped<DashboardConfigurator>((IServiceProvider serviceProvider) => {
DashboardConfigurator configurator = new DashboardConfigurator();
configurator.SetDashboardStorage(new DashboardInMemoryStorage());
configurator.SetDataSourceStorage(new DataSourceInMemoryStorage());
// ...
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 EndpointRouteBuilderExtension.MapDashboardRoute()
method calls to the Configure
method. Set api/dashboard
as a route prefix and pass the name of the custom dashboard controller (DefaultDashboard
):
public void Configure(IApplicationBuilder app, IWebHostEnvironment env) {
// ...
app.UseStaticFiles();
app.UseDevExpressControls();
app.UseRouting();
app.UseEndpoints(endpoints => {
EndpointRouteBuilderExtension.MapDashboardRoute(endpoints, "api/dashboard", "DefaultDashboard");
endpoints.MapRazorPages();
endpoints.MapControllers();
endpoints.MapFallbackToFile("index.html");
});
}
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/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 EndpointRouteBuilderExtension.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:
- Prepare dashboard storage.
- Provide a set of default data sources that are available to users.
- Add a set of predefined data connections.
- Specify whether Web Dashboard acts as the Designer or Viewer.