Skip to main content
BuyLog In
Business Intelligence Dashboard
Search in…
Docs > Web Dashboard > Integrate the Dashboard Component into a Web App > ASP.NET MVC Dashboard Extension > Required Client Libraries
All docs
V24.2
Business Intelligence Dashboard
Get Started
.NET Support
What's New
Basic Concepts and Terminology
Common Features
WinForms Dashboard
Web Dashboard
Prerequisites
Concepts and Terminology
Integrate the Dashboard Component into a Web App
ASP.NET Core Dashboard Control
ASP.NET MVC Dashboard Extension
Required Client Libraries
Server-Side API Overview
Client-Side API Overview
Integrate the Dashboard Extension into a Project
Designer and Viewer Modes
Load a Dashboard
Themes and Styles
Manage Exporting Capabilities
Manage Dashboard State
Handle and Log Server-Side Errors
Access to Underlying Widgets
Obtain Underlying and Displayed Data
Manage Data Inspector
Manage Extensions
Mobile Layout
Localization
Content Security Policy (CSP)
Security Considerations
ASP.NET Web Forms Dashboard Control
Dashboard Component for Blazor
Dashboard Component for Angular
Dashboard Component for React
Dashboard Component for Vue
Dashboard Control for JavaScript Applications (JQuery, Knockout, etc.)
Dashboard Backend
Create Dashboards on the Web
UI Elements and Customization
Advanced Customization
WPF Dashboard Viewer
Visual Studio Integration
Redistribution and Deployment
Video Tutorials
Migration Guides
Examples
End-User Documentation
.NET Framework API Reference
.NET API Reference
HTML JS Control API Reference
ASP.NET Client API Reference
Download CHM

Required Client Libraries for ASP.NET MVC

  • 2 minutes to read

This topic contains the list of required libraries and instructions on how to integrate them into the project.

Required Libraries

Web Dashboard requires the following libraries to work correctly:

Automatic Integration

Add the “resources” section to the application’s Web.config file to include client-side libraries on a web page:

<devExpress>
    <!-- ... -->
    <resources>
        <add type="ThirdParty" />
        <add type="DevExtreme" />
    </resources>
</devExpress>

Note

The DevExpress Analytics Components library is attached automatically.

Manual Integration

You can prevent a control from loading libraries automatically (for example, when the libraries are already referenced on the web page).

  1. Declare an empty <resources> section in the Web.config file:

    <devExpress>
    <!-- ... -->
    <resources>
    </resources>
</devExpress>

  2. Copy the “Ace” and “DevExtreme” folders to the project from the following locations:

    • CSS files - C:\Program Files\DevExpress 24.2\Components\Sources\DevExpress.Web.Resources\Css\
    • Scripts - C:\Program Files\DevExpress 24.2\Components\Sources\DevExpress.Web.Resources\Scripts\

    Note

    Web Dashboard comes with an icon library that provides font icons for all Web Dashboard themes. The icons should be in the same folder in the project as the DevExtreme CSS files.

  3. Attach the following scripts and stylesheets to the <head> section of the page that contains the Web Dashboard.

    <html>
<head>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://knockoutjs.com/downloads/knockout-3.5.0.js"></script>

    <script src="Scripts/Ace/ace.js"></script>
    <script src="Scripts/Ace/ext-language_tools.js"></script>

    <link href="CSS/DevExtreme/dx.light.css" rel="stylesheet" />
    <link href="CSS/Ace/ace.css" rel="stylesheet" />
    <link href="CSS/Ace/theme/dreamweaver.css"  rel="stylesheet" />
    <link href="CSS/Ace/theme/ambiance.css"  rel="stylesheet" />

    <script src="Scripts/DevExtreme/dx.all.js"></script>
</head>
...
</html>

    The order of script references is important. You should register the dashboard scripts and stylesheets after you register the DevExtreme and third-party resources.

Tip

You can download scripts from npm. For this, use the following packages:

Refer to package.json configuration for details on how to install npm packages for use in a Visual Studio application.