Log In
[Expand]General Information
[Expand]WinForms Controls
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Document Server
[Expand]Report Server
 [Expand]Getting Started
 [Expand]Basic Concepts and Terminology
 [Expand]Main Features
 [Collapse]Building the Designer and Viewer Applications
  [Expand]WinForms Designer
  [Expand]WinForms Viewer
  [Collapse]Web Dashboard
    Web Dashboard Technical Overview
    Supported Browsers
    Required Client Libraries
   [Expand]ASP.NET Dashboard Control
   [Collapse]ASP.NET MVC Dashboard Extension
     Integrating the Dashboard Extension into a Project
     Server-Side API Overview
     Preparing a Dashboard Storage
     Register Default Data Sources
     Register Default Data Connections
     Designer and Viewer Modes
     Loading a Dashboard
     Appearance Customization
     Manage Exporting Capabilities
     Manage Dashboard State
     Client-Side Functionality
   [Expand]ASP.NET Core MVC Dashboard Control
   [Expand]HTML5 JavaScript Dashboard Control
   [Expand]Customize the Web Dashboard using Extensions
    Mobile Layout (CTP)
    Security Considerations
   [Expand]UI Elements
  [Expand]WPF Viewer (CTP)
  [Expand]Web Viewer
 [Expand]Creating Dashboards
 [Expand]Design-Time Features
  Video Tutorials
  End-User Documentation
 [Expand]Redistribution and Deployment
 [Expand]Member Tables
 [Expand]API Reference
[Expand]eXpressApp Framework
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

Integrating the Dashboard Extension into a Project

The Dashboard extension provides the capability to create dashboards in ASP.NET MVC web applications. To learn how to create the ASP.NET MVC Designer application from scratch, see Create an ASP.NET MVC Designer.

This topic describes the specifics of integrating the Dashboard extension to the ASP.NET MVC web application.

Expanded Attach the Required JavaScript Files

The Dashboard extension requires you to attach the following JS scripts.

  • The jQuery, jQuery UI, globalize and knockout scripts. To learn more, see Web Dashboard - Prerequisites.
  • The specific Dashboard Javascript file. To attach the Dashboard Javascript file, use the ExtensionsFactory.GetScripts method within the View page's HEAD or BODY tag. The following code snippet shows how to do this.
    View code ("_Layout.cshtml"):

Expanded Attach the Required Style Sheets

To attach the required style sheets, use the ExtensionsFactory.GetStyleSheets extension method within the View page's HEAD (recommended) or BODY tag. The code sample below demonstrates how to do this for the Dashboard extension.

View code ("_Layout.cshtml"):

Expanded Add Route Definition

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

Expanded 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 a parameter that returns the DashboardExtensionSettings. Use these settings to customize the Dashboard extension.

View code (Razor):

Expanded 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.

Expanded Example

Show Me

A complete sample project is available in the DevExpress Code Examples database at http://www.devexpress.com/example=T484814.

This example shows how to create an ASP.NET MVC Dashboard Designer application with a set of default data connections.

Expanded See Also

How would you rate this topic?​​​​​​​