Integrate the Dashboard Extension into a Project
- 5 minutes to read
This topic describes how to integrate the Dashboard extension into the existing ASP.NET MVC web application.
Tip
You can also create the ASP.NET MVC Dashboard application from scratch.
Reference the Assemblies
An ASP.NET MVC application need specific assemblies to utilize the DevExpress Dashboard functionality. You can add them as follows:
Use the Project Wizard to simplify the integration of DevExpress ASP.NET MVC extensions into your project. On the Wizard’s Suite tab, select the Dashboard suite and click Update Project to reference assemblies.
Refer to Manual Integration into an Existing Project for instructions on how to manually incorporate DevExpress MVC Extensions into ASP.NET MVC applications. Review the ASP.NET MVC Deployment topic for a list of assemblies required for DevExpress Dashboard.
Attach the JavaScript Files
The Dashboard extension requires you to attach the following scripts.
- The jQuery, globalize, knockout, and ace scripts
For automatic integration, include client-side libraries on a web page by adding the “resources” section to the application’s Web.config file:
<devExpress> <!-- ... --> <resources> <add type="ThirdParty" /> <add type="DevExtreme" /> </resources> </devExpress>Refer to Required Client Libraries for details.
- The specific Dashboard JavaScript file
To attach the Dashboard JavaScript file, use the ExtensionsFactory.GetScripts method within the View page’s
<head>tag. You need to register Dashboard scripts first and then register other scripts.The following code snippet shows how to do this.
View code (_Layout.cshtml):
Attach the Style Sheets
Use the ExtensionsFactory.GetStyleSheets extension method within the View page’s <head> tag to attach the style sheets. You need to register Dashboard styles first and then register other styles.
The code sample below demonstrates how to do this for the Dashboard extension.
View code (“_Layout.cshtml“):
<head>
...
@Html.DevExpress().GetStyleSheets(
new StyleSheet { ExtensionSuite = ExtensionSuite.Dashboard }
// ...
)
...
</head>
Add a Dashboard Controller
Add a new empty DefaultDashboard controller to the project’s Controllers folder and inherit the DashboardController class:
using DevExpress.DashboardWeb.Mvc;
namespace MvcCustomController {
public class DefaultDashboardController : DashboardController {
}
}
You can also derive a custom dashboard controller from RestrictedDashboardController to prevent inadvertent or unauthorized dashboard modifications and protect dashboards stored on a server.
Add Route Definition
Call the RouteCollectionExtension.MapDashboardRoute method to add the Dashboard’s route. Pass the dashboard route prefix (for example, api/dashboard) and the name of the dashboard controller (without Controller postfix) as parameters.
using DevExpress.DashboardWeb.Mvc;
// ...
public static void RegisterRoutes(RouteCollection routes) {
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.IgnoreRoute("{resource}.ashx/{*pathInfo}");
routes.MapDashboardRoute("dashboardControl", "DefaultDashboard");
// ...
}
When Web Dashboard is used within ASP.NET MVC Areas, you may encounter error messages like The dashboard "" is not found. This message indicates that the ASP.NET MVC Routing is adjusted incorrectly and Web Dashboard requests are sent to the incorrect URL. In this case, use MapDashboardRoute overload with the areaName and namespaces parameters:
using DevExpress.DashboardWeb.Mvc;
// ...
public static void RegisterRoutes(RouteCollection routes) {
routes.MapDashboardRoute("api/dashboard", "DefaultDashboard", new string[] { "DXWebApplication.Areas.Admin.Controllers" }, "Admin");
// ...
}
Add Extension Code
To use the Dashboard in ASP.NET MVC, utilize the DashboardExtension class. To add a Dashboard extension to a View, call the MvcDashboardFactory.Dashboard helper method. This method provides access to a parameter that returns the DashboardExtensionSettings. Use these settings to customize the Dashboard extension.
The ControllerName property value should be the name of the custom dashboard controller (without Controller postfix).
View code (Razor):
@using DevExpress.DashboardWeb
@Html.DevExpress().Dashboard(settings => {
settings.Name = "Dashboard";
settings.ControllerName = "DefaultDashboard";
settings.WorkingMode = WorkingMode.Designer;
settings.Width = Unit.Percentage(100);
settings.Height = Unit.Percentage(100);
}).GetHtml()
Add Controller Code
The Dashboard extension does not require any specific code in a controller. Make sure that your project contains the standard HomeController class.
// ...
{
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
}
}
Example
The example shows how to create an ASP.NET MVC Dashboard application with a set of default data connections.
Next Steps
You can do the following to prepare the control for first use:
- Prepare dashboard storage.
- Provide a set of default data sources that are available to users.
- Add a set of predefined data connections.
- Specify whether Web Dashboard acts as the Designer or Viewer.