Create an ASP.NET Core Dashboard Application

This tutorial describes how to integrate the Web Dashboard control into an ASP.NET Core web application.

Note

Download the completed project: Creating an ASP.NET Core Dashboard Designer Application

See demo: C:\Documents and Settings\Public\Documents\DevExpress Demos 18.2\Components\Dashboard\CS\AspNetCoreDashboard

Prerequisites

The following are ASP.NET Core application prerequisites:

  • Install the .Net Core 2.0.0 framework or later.
  • If you are using Visual Studio 2017, install version 15.3 or later and include the following workloads:

    • ASP.NET and web development
    • .NET Core cross-platform development

Steps 1-9. Create an ASP.NET Core Web Application

  1. In Visual Studio 2012, 2013, 2015 or 2017, create a new project by selecting File | New | Project… In the invoked dialog, select the ASP.NET Core Web Application.
  2. Specify the ASP.NET Core 2.0 platform and select Web Application (Model-View-Controller). Click OK.
  3. Go to Tools | NuGet Package Manager | Package Manager Settings. In the invoked dialog, select the Package Sources node and click + to add a new package source.
  4. Specify the package settings...

    • Name: DevExpress Offline Packages
    • Source: C:\Program Files (x86)\DevExpress 18.2\Components\System\Components\packages

    ... and click Update.

    Note

    Refer to the DevExpress NuGet packages Knowledge Base article to learn how to install online DevExpress NuGet packages.

    web-core-getting-started-set-nuget-server

    Click OK to close the dialog.

  5. Right-click the project and select Manage NuGet Packages... and set the package source drop-down to the specified DevExpress Offline Packages. Then go to the Browse tab, find the DevExpress.AspNetCore.Dashboard package and install it.

    Web-Dashboard-GS-Core-Nuget

  6. 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 add the Dashboards folder inside it.
  7. Open and modify the Startup.cs file. The comments in the code below indicate which lines you need to add or modify in the file:

    // Add the following 'using' statements:
    using DevExpress.DashboardAspNetCore; 
    using DevExpress.AspNetCore;
    using DevExpress.DashboardWeb; 
    
    namespace AspNetCoreWebDashboard {
    
        public Startup(IConfiguration configuration, IHostingEnvironment hostingEnvironment) {
            Configuration = configuration;
            HostingEnvironment = hostingEnvironment;
            FileProvider = hostingEnvironment.ContentRootFileProvider;
        }
    
        public IConfiguration Configuration { get; }
        public IFileProvider FileProvider { get; }
    
        public void ConfigureServices(IServiceCollection services) {
            // Add a DashboardController class descendant with a specified dashboard storage
            // and a connection string provider.
            services
                .AddMvc()
                .AddDefaultDashboardController(configurator => {
                    configurator.SetDashboardStorage(new DashboardFileStorage(FileProvider.GetFileInfo("App_Data/Dashboards").PhysicalPath));
                    configurator.SetConnectionStringsProvider(new DashboardConnectionStringsProvider(Configuration));
    
            });
    
            // Add the third-party (JQuery, Knockout, etc.) and DevExtreme libraries.
            services.AddDevExpressControls(settings => settings.Resources = ResourcesType.ThirdParty | ResourcesType.DevExtreme);
        }
    
        public void Configure(IApplicationBuilder app, IHostingEnvironment env) {
            if (env.IsDevelopment()) {
                app.UseDeveloperExceptionPage();
                app.UseBrowserLink();
            } else {
                app.UseExceptionHandler("/Home/Error");
            }
    
            app.UseStaticFiles();
            // Register the DevExpress middleware.
            app.UseDevExpressControls();
            app.UseMvc(routes => {
                // Map dashboard routes.
                routes.MapDashboardRoute();
                routes.MapRoute(
                    name: "default",
                    template: "{controller=Home}/{action=Index}/{id?}");
            });
        }
    }
    
    Note

    The basic cldr content needed for the Web Dashboard is included in the third-party Globalize library. However, for locales other than "en" (or currencies other than "USD"), cldr content should be loaded additionally (read more in the Globalize documentation).

  8. Open the path below and copy the nwind.xml database to the project's App_Data folder.

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

  9. Register the default data connections. Open the appsettings.json file, create the ConnectionStrings object and add the nwind connection string:

    {
      "Logging": {
        "IncludeScopes": false,
        "LogLevel": {
          "Default": "Warning"
        }
      },
      "ConnectionStrings": {
        "nwind": "XpoProvider=InMemoryDataStore;Read Only=true;Data Source=App_Data\\nwind.xml;"
      }
    }
    

Step 10. Add and Configure the Web Dashboard

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

    @{ 
        Layout = null;
    }
    <!-- Add the following namespace usages: -->
    @using DevExpress.AspNetCore
    @using DevExpress.DashboardAspNetCore
    @using DevExpress.DashboardWeb
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <!-- Attach the Dashboard's stylesheets. -->
        @Html.DevExpress().StyleSheets(config => config.AddDashboard(cssSettings => cssSettings.ColorScheme("light")))
    </head>
    <body>
        <!-- Add the Web Dashboard with “clientDashboardDesigner1” 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("clientDashboardDesigner1")
            .WorkingMode(WorkingMode.Designer)
            .Width("100%")
            .Height("100%")
            )
        </div>
        <!-- Attach the Dashboard's scripts. -->
        @Html.DevExpress().Scripts()
    </body>
    </html>
    
    Note

    To use the dark theme, change the ColorShema value to "dark".

Steps 11-12. Create a Dashboard

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

    Your application should look as follows:

    WebDesigner-NoDashboard

  2. See Create a Dashboard using the Web Dashboard for instructions on how to create your first dashboard in the Web Designer.

Steps 13-15. Switch to the Viewer Mode

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

  1. In a project, open the Views | Home | Index.cshtml file.
  2. Update the code within the BuilderFactory.Dashboard helper method in the following way:

    @(Html.DevExpress().Dashboard("clientDashboardDesigner1")
    .WorkingMode(WorkingMode.ViewerOnly)
    .Width("100%")
    .Height("100%")
    )
    
  3. Run the application. The ASP.NET Core Dashboard control displays the dashboard from ~/App_Data/Dashboards.

    AspNetCoreViewer_Result

Restrictions and Limitations

The Web Dashboard created using the .NET Core has the following limitations:

  • OLAP mode supports only XML for Analysis (XMLA) with MSMDPUMP.
  • If the dashboard or specific dashboard items are exported to PDF or image formats, their content is saved to the Windows Metafile format, which is not supported by .NET Core. To learn how to overcome this limitation, see Manage Exporting Capabilities.
  • Export to image is disabled for .NET Core because of some problems in the Libgdiplus library. See T685212 and T685811 for more information.
See Also