DevExpress.AspNetCore.Dashboard 26.1.6

DevExpress BI Dashboard for ASP.NET Core

DevExpress BI Dashboard is a royalty-free data visualization and analysis product that allows developers and users to create and modify interactive, data-driven dashboards. Install this package to integrate the dashboard UI into your ASP.NET Core (MVC and Razor Pages) projects.

Key Features

• More than 15 data visualization widgets, including charts, grids, pivot tables, cards, gauges, maps, treemaps, range filters, filter elements, and layout containers
• Designer and Viewer modes — Switch between the full editing UI and read-only display
• Dashboard storage — Use the file system or implement a custom provider, such as a database, to save and load dashboards
• Client-Side API — Customize the embedded dashboard control with JavaScript
• Support for popular data source types — SQL, JSON, OLAP, Excel, Object, and more
• Data shaping — Sort, filter, and group data as your needs dictate
• Built-in data analytics capabilities, including calculated fields, aggregates, window functions, dashboard parameters, and more
• Custom items — Extend the built-in dashboard item set

Examples

Example 1: Integrate the Web Dashboard into an ASP.NET Core Application

1. Install this package:

   dotnet add package DevExpress.AspNetCore.Dashboard
   

2. Add the following namespaces to _ViewImports.cshtml:

   @using DevExpress.AspNetCore
   @using DevExpress.DashboardAspNetCore
   @using DevExpress.DashboardWeb
   

3. Attach required scripts and stylesheets.

4. Implement a Dashboard Controller:

   using DevExpress.DashboardAspNetCore;
   using DevExpress.DashboardWeb;
   using Microsoft.AspNetCore.DataProtection;
   
   public class DefaultDashboardController : DashboardController {
       public DefaultDashboardController(DashboardConfigurator configurator, IDataProtectionProvider? dataProtectionProvider = null)
           : base(configurator, dataProtectionProvider) {
       }
   }
   

5. Create a Data/Dashboards folder in the project to store dashboard files. In Program.cs, register a DashboardConfigurator as a scoped service, add DevExpress middleware, and map the dashboard route:

   using DevExpress.AspNetCore;
   using DevExpress.DashboardAspNetCore;
   using DevExpress.DashboardWeb;
   
   var builder = WebApplication.CreateBuilder(args);
   builder.Services.AddRazorPages();
   builder.Services.AddDevExpressControls();
   
   // Register the DashboardConfigurator as a scoped service.
   builder.Services.AddScoped<DashboardConfigurator>(serviceProvider => {
       var configurator = new DashboardConfigurator();
       configurator.SetDashboardStorage(new DashboardFileStorage("Data/Dashboards"));
       configurator.SetConnectionStringsProvider(new DashboardConnectionStringsProvider(builder.Configuration));
       return configurator;
   });
   
   var app = builder.Build();
   app.UseStaticFiles();
   app.UseDevExpressControls();
   app.MapDashboardRoute("api/dashboard", "DefaultDashboard");
   app.MapRazorPages();
   app.Run();
   

6. Add the Web Dashboard Control to a View:

   <div style="position: absolute; left:0;top:0;right:0;bottom:0;">
       @(Html.DevExpress().Dashboard("clientDashboardControl1")
           .ControllerName("DefaultDashboard")
           .WorkingMode(WorkingMode.Designer)
           .Width("100%")
           .Height("100%")
       )
   </div>
   

The WorkingMode property switches the control between Designer (full editing UI), Viewer, and ViewerOnly (read-only) modes.

For step-by-step instructions, refer to the following help topic: Integrate the Dashboard Control into an ASP.NET Core Project.

Example 2: Customize the Control with the Client-Side API

Handle the BeforeRender event to access the client-side DashboardControl instance:

@(Html.DevExpress().Dashboard("clientDashboardControl1")
    .ControllerName("DefaultDashboard")
    .WorkingMode(WorkingMode.Designer)
    .Width("100%")
    .Height("100%")
    .OnBeforeRender("onBeforeRender")
)

The following code registers the Dashboard Panel extension, which displays a list of available dashboards, and disables export functionality:

<script>
    function onBeforeRender(dashboardControl) {
        // Display the Dashboard Panel with a list of available dashboards.
        dashboardControl.registerExtension(
            new DevExpress.Dashboard.DashboardPanelExtension(dashboardControl));
        // Remove the export functionality.
        dashboardControl.unregisterExtension("dashboardExport");
    }
</script>

For more information on the client-side API and available extensions, refer to the following help topics:

• Client-Side API Overview for ASP.NET Core Dashboard
• Manage Extensions in ASP.NET Core

Demos

• DevExpress BI Dashboard GitHub Demos

Evaluation Period, Pricing Options, and Licensing Terms

Whether you own a license or want to start a 30-day evaluation, download and register your DevExpress license key. To obtain your key, sign in to the DevExpress Download Manager with an existing DevExpress.com account or create a free account. For key registration instructions, see License Key for DevExpress Products.

If you purchase a license after evaluating a product, re-register your updated DevExpress license key to remove evaluation warnings and messages.

This package is included in the following commercial subscriptions:

• DevExpress Universal Subscription

See DevExpress Subscriptions & Licensing for subscription comparison tables, purchasing FAQ, and licensing information.

Documentation

• ASP.NET Core Dashboard Control
• Create Dashboards on the Web
• End-User Documentation for DevExpress BI Dashboard

Software Bill of Materials (SBOM)

To access SBOM files for DevExpress packages, please refer to the following article: Software Bill of Materials (SBOM) for DevExpress .NET assemblies/NuGet packages, JavaScript, VCL and other redistributable artifacts.

See Also: Information Security | Security - What You Need to Know

Useful Online Resources

• www.devexpress.com
• DevExpress Support Center
• DevExpress Blogs