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.

View Example: ASP.NET Core 3.1 View Example: ASP.NET Core 2.0+

Demo: C:\Documents and Settings\Public\Documents\DevExpress Demos 21.1\Components\Dashboard\CS\AspNetCoreDashboard


Steps 1-10. Configure an ASP.NET Core Web Application

  1. In Visual Studio, create a new project and select ASP.NET Core Web Application on the start page as the project template.
  2. Specify the .NET Core version, select Web Application (Model-View-Controller), and click OK.
  3. Open the NuGet Package Manager and set the package source to All. Install the following npm packages:
  4. Right-click the project in the Solution Explorer and select Add | New Folder from the context menu. Rename the created folder to App_Data and create the Dashboards folder inside it.
  5. Open the Add New Item dialog (Ctrl+Shift+A), add the npm Configuration File (package.json) to the project, and add the following npm packages:

        "version": "1.0.0",
        "name": "",
        "private": true,
        "license": "MIT",
        "devDependencies": {
            "devextreme": "21.1.4",
            "@devexpress/analytics-core": "21.1.4",
            "devexpress-dashboard": "21.1.4",
            "jquery-ui-dist": "^1.12.1"
  6. Right-click package.json and select Restore Packages.

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

            "outputFileName": "wwwroot/css/site.min.css",
            "inputFiles": [
            "minify": { "enabled": false, "adjustRelativePaths": false }
            "outputFileName": "wwwroot/js/site.min.js",
            "inputFiles": [
            "minify": {
                "enabled": false
            "sourceMap": false
  8. 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": [
  9. Open the path below and copy the nwind.xml database to the project’s App_Data folder.

    C:\Users\Public\Documents\DevExpress Demos 21.1\Components\Data\nwind.xml

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

      "Logging": {
          // ..
      "ConnectionStrings": {
        "nwind": "XpoProvider=InMemoryDataStore;Read Only=true;Data Source=App_Data\\nwind.xml;"

Steps 11-12. Add and Configure the Web Dashboard

  1. Open the Index.cshtml file and replace its content with the code below:

        Layout = null;
    <!-- Add the following namespace usages: -->
    @using DevExpress.AspNetCore
    @using DevExpress.DashboardWeb
    @using DevExpress.DashboardAspNetCore
    <!DOCTYPE html>
    <html lang="en">
        <!-- Add bundled resources. -->
        <link href="~/css/site.min.css" rel="stylesheet" />
        <script src="~/js/site.min.js"></script>
        <!-- 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;">
  2. Open the Startup.cs file and replace its content:

    using DevExpress.AspNetCore;
    using DevExpress.DashboardAspNetCore;
    using DevExpress.DashboardWeb;
    using Microsoft.AspNetCore.Builder;
    using Microsoft.AspNetCore.Hosting;
    using Microsoft.Extensions.Configuration;
    using Microsoft.Extensions.DependencyInjection;
    using Microsoft.Extensions.FileProviders;
    using Microsoft.Extensions.Hosting;
    namespace AspNetCoreDashboardWebApplication {
        public class Startup {
            public Startup(IConfiguration configuration, IWebHostEnvironment hostingEnvironment) {
                Configuration = configuration;
                FileProvider = hostingEnvironment.ContentRootFileProvider;
            public IConfiguration Configuration { get; }
            public IFileProvider FileProvider { get; }
            // This method gets called by the runtime. Use this method to add services to the container.
            public void ConfigureServices(IServiceCollection services) {
                // Configures services to use the Web Dashboard Control.
                    .AddDefaultDashboardController(configurator => {
                        configurator.SetDashboardStorage(new DashboardFileStorage(FileProvider.GetFileInfo("App_Data/Dashboards").PhysicalPath));
                        configurator.SetConnectionStringsProvider(new DashboardConnectionStringsProvider(Configuration));
            // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
            public void Configure(IApplicationBuilder app, IWebHostEnvironment env) {
                if(env.IsDevelopment()) {
                } else {
                // Registers the DevExpress middleware.
                app.UseEndpoints(endpoints => {
                    // Maps the dashboard route.
                    EndpointRouteBuilderExtension.MapDashboardRoute(endpoints, "api/dashboards");
                        name: "default",
                        pattern: "{controller=Home}/{action=Index}/{id?}");

Steps 13-14. Create a Dashboard

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

    Your application should look as follows:


  2. Create your first dashboard in the Web Dashboard.

Steps 15-16. Switch to Viewer Mode

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

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

  2. Run the application. The ASP.NET Core Dashboard control displays the dashboard from ~/App_Data/Dashboards.


Restrictions and Limitations

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

Next Steps

See Also