Create a Blazor Server Dashboard Application

• Jun 22, 2022
• 3 minutes to read

Important

If you are not familiar with the basic concepts and patterns of Blazor, please review the fundamentals before you continue: Introduction to ASP.NET Core Blazor

You can also watch free training videos on Blazor: Free Blazor Training Course

This tutorial adds a new page with the Dashboard 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 pre-configured example and use it as a template to get started:

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

Prerequisites

To use the Dashboard component for Blazor, make sure that the following requirements are met:

• .NET 5.0 SDK
• The latest Visual Studio 2019 version with the ASP.NET and web development workload
• DevExpress Universal Subscription v21.1

Create a Blazor Application

Create a new Blazor app named BlazorDashboardApp. Use one of the following options:

• In VS 2019, select the Blazor Server App template.

• Run this console command:

  dotnet new blazorserver -n BlazorDashboardApp
  

  For details, refer to this tutorial: Blazor Tutorial – Build your first Blazor app.

Install the NuGet Packages

Install the following NuGet packages:

• DevExpress.AspNetCore.Dashboard
• DevExpress.Blazor.Dashboard
• Microsoft.AspNetCore.Mvc.NewtonsoftJson

Configure the Dashboard Controller

1. Create the App_Data/Dashboards folder to store dashboards.

2. In the Startup.cs file, add services for DevExpress Controls and set up the dashboard backend in the ConfigureServices method as follows:

   using DevExpress.AspNetCore;
   using DevExpress.DashboardAspNetCore;
   using DevExpress.DashboardCommon;
   using DevExpress.DashboardWeb;
   using DevExpress.DataAccess.Json;
   using Microsoft.Extensions.FileProviders;
   using System;
   // ...
   public Startup(IConfiguration configuration, IWebHostEnvironment hostingEnvironment) {
       Configuration = configuration;
       FileProvider = hostingEnvironment.ContentRootFileProvider;
   }
   
   public IConfiguration Configuration { get; }
   public IFileProvider FileProvider { get; }
   
   public void ConfigureServices(IServiceCollection services) {
       // ...
       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";
                   dataSourceStorage.RegisterDataSource("jsonDataSourceUrl", jsonDataSourceUrl.SaveToXml());
                   configurator.SetDataSourceStorage(dataSourceStorage);
               });
       // ...
   }
   

3. In the same file, add the app.UseDevExpressControls() and EndpointRouteBuilderExtension.MapDashboardRoute() method calls to the Configure method in the following order:

   // ...
   public void Configure(IApplicationBuilder app, IWebHostEnvironment env) {
       // ...
       app.UseStaticFiles();
       app.UseDevExpressControls();
       app.UseRouting();
   
       app.UseEndpoints(endpoints => {
           EndpointRouteBuilderExtension.MapDashboardRoute(endpoints, "api/dashboard");
           // ...
       });
   }
   

Add Stylesheets

In the Pages folder, open the _Host.cshtml 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

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:

@page "/dashboard"

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

Add Navigation

In the Shared/NavMenu.razor file, add a new NavLink component to the list to display the Web Dashboard item in the navigation menu:

<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
    <ul class="nav flex-column">
        <!--...-->
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="dashboard">
                <span class="oi oi-list-rich" aria-hidden="true"></span> Web Dashboard
            </NavLink>
        </li>
    </ul>
</div>

Run the Project

Run the project to see the result. You can now create a dashboard and bind it to the pre-configured JSON data source:

Next Steps

• Create Dashboards on the Web

  Describes how to create and configure dashboards in the Web Dashboard control.

• Dashboard Component for Blazor (CTP)

  Contains instructions on how to integrate the DxDashboard component into a Blazor application.

• Dashboard Backend

  Contains instructions that show how to configure the Web Dashboard on the server side.