Skip to main content

Create an ASP.NET Core Dashboard Application

  • 5 minutes to read

This tutorial describes how to integrate the Web Dashboard control into an ASP.NET Core web application. The guide applies to framework .NET 6.

For .NET 5 and .NET Core 3.1 , see the following article: Integrate the Dashboard Control into a Project.

View Example: .NET 6

Prerequisites

Step 1. Create an ASP.NET Core Web Application

In Visual Studio, create a new project as follows:

  • On the start page, select ASP.NET Core Web App as the project template.
  • In the Configure your new project dialog, enter WebDashboardAspNetCore for Project name.
  • In the Additional information dialog, specify the target framework (.NET 6.0).

Step 2. Install the NuGet Packages

In the project, open the NuGet Package Manager and set the package source to All. Install the following npm packages:

Refer to the following topic to install and manage libraries using DevExpress NuGet feed: Setup Visual Studio’s NuGet Package Manager.

Step 3. Configure an ASP.NET Core Web Application

Open the Add New Item dialog (Ctrl+Shift+A), create the npm Configuration File (package.json), and add the following npm packages:

{
    ...
    "devDependencies": {
        "devextreme": "22.1-stable",
        "@devexpress/analytics-core": "22.1-stable",
        "devexpress-dashboard": "22.1-stable",
        "jquery-ui-dist": "^1.13.0"
    }
}

Save package.json, right-click it and select Restore Packages.

Create the bundleconfig.json file in the root directory and add the following configuration:

[
  {
    "outputFileName": "wwwroot/css/site.min.css",
    "inputFiles": [
      "node_modules/devextreme/dist/css/dx.light.css",
      "node_modules/@devexpress/analytics-core/dist/css/dx-analytics.common.css",
      "node_modules/@devexpress/analytics-core/dist/css/dx-analytics.light.css",
      "node_modules/@devexpress/analytics-core/dist/css/dx-querybuilder.css",
      "node_modules/devexpress-dashboard/dist/css/dx-dashboard.light.min.css"
    ],
    "minify": {
      "enabled": false,
      "adjustRelativePaths": false
    }
  },
  {
    "outputFileName": "wwwroot/js/site.min.js",
    "inputFiles": [
      "node_modules/jquery/dist/jquery.min.js",
      "node_modules/jquery-ui-dist/jquery-ui.min.js",
      "node_modules/knockout/build/output/knockout-latest.js",
      "node_modules/ace-builds/src-min-noconflict/ace.js",
      "node_modules/ace-builds/src-min-noconflict/ext-language_tools.js",
      "node_modules/ace-builds/src-min-noconflict/theme-dreamweaver.js",
      "node_modules/ace-builds/src-min-noconflict/theme-ambiance.js",
      "node_modules/devextreme/dist/js/dx.all.js",
      "node_modules/@devexpress/analytics-core/dist/js/dx-analytics-core.min.js",
      "node_modules/@devexpress/analytics-core/dist/js/dx-querybuilder.min.js",
      "node_modules/devexpress-dashboard/dist/js/dx-dashboard.min.js"
    ],
    "minify": {
      "enabled": false
    },
    "sourceMap": false
  }
]

Create the libman.json file in the root directory of the project and add the following LibMan configuration to copy icon fonts to the application’s static content folder:

{
  "version": "1.0",
  "defaultProvider": "filesystem",
  "libraries": [
    {
      "library": "node_modules/devextreme/dist/css/icons/",
      "destination": "wwwroot/css/icons/",
      "files": [
        "dxicons.ttf",
        "dxicons.woff",
        "dxicons.woff2"
      ]
    }
  ]
}

Step 4. Add Data

Right-click the project in the Solution Explorer and select Add | New Folder from the context menu. Rename the created folder to Data and create the Dashboards folder inside it.

Copy the C:\Users\Public\Documents\DevExpress Demos 22.1\Components\Data\nwind.xml file to the project’s Data folder.

Open the appsettings.json file, create the ConnectionStrings object, and add the nwind connection string to register the data connection:

{
  "ConnectionStrings": {
    "nwind": "XpoProvider=InMemoryDataStore;Read Only=true;Data Source=Data\\nwind.xml;"
  },
  ...
}

Step 5. Add and Configure the Web Dashboard Control

Create a new folder named Controllers in the root directory, and create an empty MVC Controller named DefaultDashboardController inside the folder. Inherit the DashboardController class:

using DevExpress.DashboardAspNetCore;
using DevExpress.DashboardWeb;
using Microsoft.AspNetCore.DataProtection;

namespace WebDashboardAspNetCore.Controllers {
    public class DefaultDashboardController : DashboardController {
        public DefaultDashboardController(DashboardConfigurator configurator, IDataProtectionProvider? dataProtectionProvider = null)
            : base(configurator, dataProtectionProvider) {
        }
    }
}

Open the Program.cs file and replace its content. The third parameter in the EndpointRouteBuilderExtension.MapDashboardRoute method is the name of the controller you created in the previous step (without Controller postfix):

using DevExpress.AspNetCore;
using DevExpress.DashboardAspNetCore;
using DevExpress.DashboardWeb;
using Microsoft.Extensions.FileProviders;

var builder = WebApplication.CreateBuilder(args);

IFileProvider? fileProvider = builder.Environment.ContentRootFileProvider;
IConfiguration? configuration = builder.Configuration;

// Add services to the container.
builder.Services.AddRazorPages();

builder.Services.AddDevExpressControls();
builder.Services.AddScoped<DashboardConfigurator>((IServiceProvider serviceProvider) => {
    DashboardConfigurator configurator = new DashboardConfigurator();
    configurator.SetDashboardStorage(new DashboardFileStorage(fileProvider.GetFileInfo("Data/Dashboards").PhysicalPath));
    configurator.SetConnectionStringsProvider(new DashboardConnectionStringsProvider(configuration));
    return configurator;
});

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();

app.UseDevExpressControls();
EndpointRouteBuilderExtension.MapDashboardRoute(app, "api/dashboard", "DefaultDashboard");

app.UseRouting();

app.UseAuthorization();

app.MapRazorPages();

app.Run();

Open the Index.cshtml file and replace its content with the code below. The ControllerName property value is the name of the controller you created earlier (without Controller postfix):

@page

@{
    Layout = null;
}
<!-- Add the following namespace usages: -->
@using DevExpress.AspNetCore
@using DevExpress.DashboardWeb
@using DevExpress.DashboardAspNetCore

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Add bundled resources. -->
    <link href="~/css/site.min.css" rel="stylesheet" />
    <script src="~/js/site.min.js"></script>
</head>
<body>
    <!-- Add the Web Dashboard with the "clientDashboardControl1" name to a View, specify its size, and set the Working Mode to Designer. -->
    <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>
</body>
</html>

Step 6. Create a Dashboard

The designer application is now ready. Build and run the project.

getting-started-build-web-core

Your application should look as follows:

WebDesigner-NoDashboard

You can now create your first dashboard in the Web Dashboard.

Step 7. Switch to Viewer Mode

Once you create and save a dashboard, you can switch your Dashboard Designer application to Viewer mode.

In a project, open the Views | Home | Index.cshtml file. Update the BuilderFactory.Dashboard helper method’s code as follows:

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

Run the application. The ASP.NET Core Dashboard control displays the dashboard from ~/Data/Dashboards in Viewer mode.

AspNetCoreViewer_Result

Restrictions and Limitations

The ASP.NET Core Dashboard control has the following limitations:

Next Steps

See Also