Integrating the Dashboard Control into a Project

The Web Dashboard allows you to create dashboards in ASP.NET Core MVC web applications. To learn how to create the ASP.NET Core MVC Designer application from scratch, see Create an ASP.NET Core Designer.

This topic describes the specifics of integrating the Web Dashboard into an ASP.NET Core MVC web application.

Add the NuGet Package

The ASP.NET Dashboard control requires the DevExpress.AspNetCore.Dashboard package. For a step-by-step instruction see steps 3-5 of the Create an ASP.NET Core Designer topic.

Add the Required Namespaces

Add the following namespaces to the view imports file (ViewImports.cshtml):

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

Attach the Required Scripts

The Web Dashboard requires the following JS scripts:

  • The jQuery, jQuery UI, globalize and knockout scripts. Refer to Required Client Libraries for more information.
  • The specific Dashboard JavaScript file.

Add the scripts to the View page inside the <body> section before the closing tag. The following code snippet shows how to add scripts to the Layout.cshtml file.

<body>
    ...
    @Html.DevExpress().Scripts()
</body>

Attach the Required Style Sheets

Attach the required style sheets to the View page inside the <head> section. The following code snippet shows how to add style sheets to the Layout.cshtml file.

<head>
    @Html.DevExpress().StyleSheets()
    ...
</head>

Register Default Controller

Call the MvcBuilderExtension.AddDefaultDashboardController method to register a default controller and add a default dashboard configurator. The configurator allows you to define a dashboard storage and connection strings provider.

The code snippet below shows how to add the required code to the Startup.cs file.

using DevExpress.DashboardAspNetCore;
using DevExpress.AspNetCore;
using DevExpress.DashboardWeb;

...
public void ConfigureServices(IServiceCollection services) {
    services
        .AddMvc()
        .AddDefaultDashboardController(configurator => { });
    // ...
}

Add Third-Party and DevExtreme Middleware

Use the MvcServiceCollectionExtensions.AddDevExpressControls method to provide the Third-Party and DevExtreme middleware that is assembled into an application pipeline to handle requests and responses. The code snippet below shows how to add the required code to the Startup.cs file.

using DevExpress.DashboardAspNetCore;
using DevExpress.AspNetCore;
using DevExpress.DashboardWeb;

...

public void ConfigureServices(IServiceCollection services) {
    // ...
    services.AddDevExpressControls(settings => settings.Resources = ResourcesType.ThirdParty | ResourcesType.DevExtreme);
}

Register DevExpress Middleware

Call the ApplicationBuilderExtensions.UseDevExpressControls method to register the DevExpress middleware. The code snippet below shows how to add the required code to the Startup.cs file.

using DevExpress.DashboardAspNetCore;
using DevExpress.AspNetCore;
using DevExpress.DashboardWeb;

...
public void Configure(IApplicationBuilder app, IHostingEnvironment env) {
    // ...
    app.UseStaticFiles();
    app.UseDevExpressControls();
    // ...
}

Add Route Definition

Call the RouteBuilderExtension.MapDashboardRoute method to add the Dashboard's route. The code snippet below shows how to add the required code to the Startup.cs file.

using DevExpress.DashboardAspNetCore;
using DevExpress.AspNetCore;
using DevExpress.DashboardWeb;

...
public void Configure(IApplicationBuilder app, IHostingEnvironment env) {
    // ...
            app.UseMvc(routes => {
                // Maps a dashboard route.
                routes.MapDashboardRoute();
                routes.MapRoute(
                    name: "default",
                    template: "{controller=Home}/{action=Index}/{id?}");
            });
}

Add Web Control Code

To add the Web Dashboard to a View, call the BuilderFactoryExtension.Dashboard extension method. This method provides a parameter that returns the dashboard settings you can use to customize the control.

The code snippet below shows how to define a control in the Index.cshtml file.

<div style="position: absolute; left:0;top:0;right:0;bottom:0;">
    @(Html.DevExpress().Dashboard("clientDashboardDesigner1")
        .Width("100%")
        .Height("100%")
        // Specifies the extension's working mode as 'Designer'. 
        .WorkingMode(WorkingMode.Designer)
    )
</div>

Next Steps

You can perform the following actions to prepare the control for first use:

See Also