Dashboard for Blazor - How to use Web Dashboard within your Blazor Apps

Update. Starting with the v21.1 release, we have the Dashboard component (DxDashboard), which you can use in your Blazor app. Refer to the following blogpost for details: Dashboard Component for Blazor.


We now offer a way to use DevExpress Web Dashboard within your Blazor apps. 

In this post I'll show you how to integrate the JavaScript Dashboard control into your Blazor applications. I'll focus on integration details and create a sample dashboard application as well.

Prerequisites

Here’s what you’ll need to use our HTML JavaScript Dashboard with the Blazor framework:

Source Code

You can find the source code of the sample below on GitHub.

How to Add Dashboard Control to Blazor

To get started, you must first create a new Blazor application using the Blazor WebAssembly App template and enable the ASP.NET Core hosted check box (or run dotnet new blazorwasm –hosted command). If this template was not installed, please review the following document: Get started with ASP.NET Core Blazor.

This solution uses the ASP.NET Core backend (server-side Blazor) to process requests from the HTML JS Dashboard. The client side defines the UI for this component and the logic needed to respond to UI updates.


Configure the Server Project

  1. Install the DevExpress.AspNetCore.Dashboard NuGet package. You can find a comprehensive installation guide in our documentation: Install DevExpress Controls Using NuGet Packages.
  2. Create the App_Data/Dashboards folder to store dashboards.
  3. Install the Microsoft.AspNetCore.Mvc.NewtonsoftJson NuGet package to send the model to the client in JSON format.
  4. Open the Startup.cs file to register and adjust DashboardConfigurator:
    using DevExpress.AspNetCore;
    using DevExpress.DashboardAspNetCore;
    using DevExpress.DashboardCommon;
    using DevExpress.DashboardWeb;
    using DevExpress.DataAccess.Json;
    // ...
    public void ConfigureServices(IServiceCollection services) {
    	services.AddResponseCompression(opts => {
    		opts.MimeTypes = ResponseCompressionDefaults.MimeTypes.Concat(
    			new[] { "application/octet-stream" });
    	});
    	services.AddDevExpressControls();
    	services.AddMvc()
    	.AddDefaultDashboardController(configurator => {
    		// Register Dashboard Storage
    		configurator.SetDashboardStorage(new DashboardFileStorage(FileProvider.GetFileInfo("App_Data/Dashboards").PhysicalPath));
    		// Create a sample JSON data source
    		DataSourceInMemoryStorage dataSourceStorage = new DataSourceInMemoryStorage();
    		DashboardJsonDataSource jsonDataSourceUrl = new DashboardJsonDataSource("JSON Data Source (URL)");
    		jsonDataSourceUrl.JsonSource = new UriJsonSource(new Uri("https://raw.githubusercontent.com/DevExpress-Examples/DataSources/master/JSON/customers.json"));
    		jsonDataSourceUrl.RootElement = "Customers";
    		jsonDataSourceUrl.Fill();
    		dataSourceStorage.RegisterDataSource("jsonDataSourceUrl", jsonDataSourceUrl.SaveToXml());
    		configurator.SetDataSourceStorage(dataSourceStorage);
    	});
    }
    
    public void Configure(IApplicationBuilder app, IWebHostEnvironment env) {
    	// ...
    	app.UseStaticFiles();
    	app.UseClientSideBlazorFiles<Client.Startup>();
    	app.UseDevExpressControls();
    	app.UseRouting();
    
    	app.UseEndpoints(endpoints => {
    		EndpointRouteBuilderExtension.MapDashboardRoute(endpoints, "api/dashboard");
    		endpoints.MapDefaultControllerRoute();
    		endpoints.MapFallbackToClientSideBlazor<Client.Startup>("index.html");
    	});
    }

Configure the Client Project

FREE DevExpress Xamarin UI Controls

Deliver high-impact native mobile apps with our feature-rich Data Grid, Scheduler, Chart, TabView, Editors, and utility controls. Reserve your free copy today!
CRM-685d5f89-76a5-41b0-9890-49131406c14c
Customer127969
must be added in XAF blazor
18 February 2020
Jacek Kosiński
Jacek Kosiński
1up for XAF blazor
18 February 2020
Isa_Tahiri
Isa_Tahiri
+1 for XAF Blazor
18 February 2020
Erich Glashagen 1
Erich Glashagen 1
I am currently using Extracteddatasources for my dashboard. How can I do that in Blazor?
18 February 2020
Dennis (DevExpress)
Dennis (DevExpress)
@XAFers: Thank you for your feedback!
18 February 2020
Norbert K.
Norbert K.
+1 for XAF Blazor
18 February 2020
Kalem Yazılım
Kalem Yazılım
+1 for XAF Blazor
19 February 2020
CRM-d068bddd-c03e-4bc3-a05c-bf04d36ae691
HelloDev

Is it possible to achieve this same solution with Blazor Server hosting model instead of Blazor WebAssembly that you've shown here in this example?


If so, do you have examples?

13 March 2020
Customer101672
Jayanand Konchery
Is it possible to extend this example with custom dashboard item widgets?
9 April 2020
CRM-78f8d751-246c-483b-b5a3-aeee95b033bc
Johan Fourie

Is it possible to achieve this same solution with Blazor Server hosting model instead of Blazor WebAssembly that you've shown here in this example?


If so, do you have examples?

24 July 2020
Joche Ojeda
Jose Javier Columbie
Dashboards for Blazor Server Side:  https://xafmarin.com/devexpress-dashboards-for-blazor-server-side/
21 September 2020
CRM-d4912f15-de1a-4da6-8cba-55637e0e77c3
Abdul
must be added in xaf blazor
25 October 2020
Miro Mz
Miro Mz

+1 for Dashboards in XAF


16 February 2021
Anonymous
Blazor UI - 2021 Roadmap - Software Mile.com

Pingback from  Blazor UI - 2021 Roadmap - Software Mile.com

3 March 2021
Anonymous
Blazor UI - 2021 Roadmap - Software Mile.com

Pingback from  Blazor UI - 2021 Roadmap - Software Mile.com

3 March 2021
Anonymous
Blazor UI - 2021 Roadmap - Software Mile.com

Pingback from  Blazor UI - 2021 Roadmap - Software Mile.com

3 March 2021
Anonymous
Blazor UI - 2021 Roadmap - Software Mile.com

Pingback from  Blazor UI - 2021 Roadmap - Software Mile.com

3 March 2021
Anonymous
Blazor UI - 2021 Roadmap - Software Mile.com

Pingback from  Blazor UI - 2021 Roadmap - Software Mile.com

3 March 2021
Anonymous
Blazor UI - 2021 Roadmap - Software Mile.com

Pingback from  Blazor UI - 2021 Roadmap - Software Mile.com

3 March 2021
Anonymous
Blazor UI - 2021 Roadmap - Software Mile.com

Pingback from  Blazor UI - 2021 Roadmap - Software Mile.com

3 March 2021
Anonymous
Blazor UI - 2021 Roadmap - Software Mile.com

Pingback from  Blazor UI - 2021 Roadmap - Software Mile.com

3 March 2021
Anonymous
Blazor UI - 2021 Roadmap - Software Mile.com

Pingback from  Blazor UI - 2021 Roadmap - Software Mile.com

3 March 2021
Anonymous
Blazor UI - 2021 Roadmap - Software Mile.com

Pingback from  Blazor UI - 2021 Roadmap - Software Mile.com

3 March 2021
Anonymous
Blazor UI - 2021 Roadmap - Software Mile.com

Pingback from  Blazor UI - 2021 Roadmap - Software Mile.com

3 March 2021
Anonymous
Blazor UI - 2021 Roadmap - Software Mile.com

Pingback from  Blazor UI - 2021 Roadmap - Software Mile.com

3 March 2021
Anonymous
Blazor UI - 2021 Roadmap - Software Mile.com

Pingback from  Blazor UI - 2021 Roadmap - Software Mile.com

3 March 2021
Anonymous
Blazor UI - 2021 Roadmap - Software Mile.com

Pingback from  Blazor UI - 2021 Roadmap - Software Mile.com

3 March 2021
Anonymous
Blazor UI - 2021 Roadmap - Software Mile.com

Pingback from  Blazor UI - 2021 Roadmap - Software Mile.com

3 March 2021
Anonymous
Blazor UI - 2021 Roadmap - Software Mile.com

Pingback from  Blazor UI - 2021 Roadmap - Software Mile.com

3 March 2021
Anonymous
Blazor UI - 2021 Roadmap - Software Mile.com

Pingback from  Blazor UI - 2021 Roadmap - Software Mile.com

3 March 2021
Anonymous
Blazor UI - 2021 Roadmap - Software Mile.com

Pingback from  Blazor UI - 2021 Roadmap - Software Mile.com

3 March 2021
Martin Brekhof 2
Martin Brekhof
Blazor Server instead of Blazor Webassembly would be nice
12 April 2021

Please login or register to post comments.