Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[Expand]General Information
[Expand]WinForms Controls
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Document Server
[Expand]Reporting
[Expand]Report Server
[Collapse]Dashboard
 [Expand]Getting Started
 [Expand]Basic Concepts and Terminology
 [Expand]Main Features
 [Collapse]Preparing the Designer and Viewer Applications
  [Expand]WinForms Designer
  [Expand]WinForms Viewer
  [Collapse]Web Dashboard
    Supported Browsers
    Prerequisites
    Microsoft Azure Specifics
    Display Message Texts for Callback Errors
   [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
     Client-Side Functionality
    Manage Exporting Capabilities
    Manage Dashboard State
    Manage Interactivity Capabilities
    Manage Dashboard Parameters
    Customize Dashboard Colors
    Obtaining Underlying and Displayed Data
   [Expand]Customize the Web Dashboard using Extensions
    Access to Underlying Widgets
   [Expand]UI Elements
    Security Considerations
  [Expand]Web Viewer
 [Expand]Creating Dashboards
 [Expand]Examples
  Video Tutorials
  End-User Capabilities
  Localization
 [Expand]Redistribution and Deployment
 [Expand]Member Tables
 [Expand]API Reference
[Expand]eXpressApp Framework
[Expand]CodeRush
[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 Creating an ASP.NET MVC Dashboard Designer Application.

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?​​​​​​​