Integrate the Dashboard Control into a Project
- 4 minutes to read
The Web Dashboard allows you to create dashboards in ASP.NET Core web applications. To learn how to create the ASP.NET Core 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 web application.
- Add the NuGet Package
- Add the Required Namespaces
- Attach the Required Scripts
- Attach the Required Style Sheets
- Register Default Controller
- Add Third-Party and DevExtreme Middleware
- Register DevExpress Middleware
- Add Route Definition
- Add Web Control Code
- Docker Support
- Next Steps
Add the NuGet Package
The ASP.NET Core 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 Dashboard Application topic. You can also refer to Install DevExpress Controls Using NuGet Packages to learn basic concepts about installing DevExpress controls using NuGet packages.
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("api/dashboard");
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>
Docker Support
Refer to the Visual Studio Tools for Docker with ASP.NET Core tutorial for instructions on how to dockerize (add to a Docker container) your ASP.NET Core Web Dashboard application.
Add the following changes in the Dockerfile when you add the application to a Linux container:
...
FROM microsoft/aspnetcore:2.1 AS base
RUN apt-get update
RUN apt-get install -y libgdiplus libc6-dev
...
Next Steps
You can perform the following actions to prepare the control for first use:
- Prepare a dashboard storage that keeps dashboards.
- Provide a set of predefined data connections.
- Provide a set of default data sources available for end-users.
- Specify whether Web Dashboard acts as the Designer or Viewer.