Use SQL Data Sources (ASP.NET Core Blazor)

• Feb 02, 2024
• 2 minutes to read

This topic explains how use an SQL data source with Dashboards. The data source content is based on the application’s Business Model.

Enable SQL Data Sources

To enable SQL data sources in your application, supply the dashboard configurator with a connection strings provider in the MySolution.Blazor.Server\Startup.cs file. Review the following code sample:

// ...
using DevExpress.DashboardAspNetCore;
// ...
public class Startup {
   // ...
    public void ConfigureServices(IServiceCollection services) {
        // ...
        services.AddXaf(Configuration, builder => {
            builder.UseApplication<MySolutionBlazorApplication>();
            builder.Modules
                // ...
                .AddDashboards(options => {
                    options.DashboardDataType = typeof(DashboardData);
                    options.SetupDashboardConfigurator = (dashboardConfigurator, serviceProvider) => {
                        dashboardConfigurator.SetConnectionStringsProvider(new DashboardConnectionStringsProvider(Configuration));
                    };
                });
            // ...
        });
        // ...
    }
}

Use the DashboardConnectionStringsProvider class to create new SQL data sources based on connection strings from the MySolution.Blazor.Server\appsettings.json file.

Allow Custom SQL Queries

To enable custom SQL queries in your application, follow the steps below:

1. In the MySolution.Blazor.Server\Startup.cs file, enable custom SQL queries on the server side:

   // ...
   .AddDashboards(options => {
       // ...
       options.SetupDashboardConfigurator = (dashboardConfigurator, serviceProvider) => {
           // ...
           dashboardConfigurator.AllowExecutingCustomSql = true;
       };
   })
   

2. In the MySolution.Blazor.Server project, create a custom Razor component named DashboardSettingsHelper with the following definition:

   @using DevExpress.DashboardBlazor
   
   @ChildContent
   <DxExtensions>
       <DxDataSourceWizard EnableCustomSql="true"/>
   </DxExtensions>
   
   @code {
       [Parameter] public RenderFragment ChildContent { get; set; }
       public static RenderFragment Create(RenderFragment childContent) =>
           @<DashboardSettingsHelper ChildContent=childContent />;
   }
   

   This Razor component updates settings of a client-side DxDashboard control to allow end-users to write custom SQL queries.

3. In the MySolution.Blazor.Server\Controllers folder, create the following Controller:

   using DevExpress.ExpressApp;
   using DevExpress.ExpressApp.Dashboards.Blazor.Components;
   using DevExpress.Persistent.Base;
   using MySolution.Blazor.Server;
   
   public class DashboardCustomSqlQueryController : ObjectViewController<DetailView, IDashboardData> {
       protected override void OnActivated() {
           base.OnActivated();
           View.CustomizeViewItemControl<BlazorDashboardViewerViewItem>(this, CustomizeDashboardViewerViewItem);
       }
       void CustomizeDashboardViewerViewItem(BlazorDashboardViewerViewItem dashboardViewerViewItem) {
           if(dashboardViewerViewItem.Control is DxDashboardViewerAdapter adapter) {
               adapter.ComponentModel.ChildContent = DashboardSettingsHelper.Create(adapter.ComponentModel.ChildContent);
           }
       }
   }
   

   This controller uses the Razor component created in the previous step to customize the client-side DxDashboard control. The code modifies the dashboard’s component model instead of the component itself.

End-users can now write custom SQL queries.