Required Client Libraries for ASP.NET Core
- 3 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:
-
-
The recommended version is jQuery 3.5.1+.
- knockout 3.5.0+
-
Ace is a code editor embedded into the Web Dashboard’s Expression Editor.
-
-
DevExtreme libraries are used to render dashboard items and various UI elements inside the Web Dashboard application.
DevExpress Analytics Components
Core library for DevExpress Analytics Components (Dashboards and Reporting).
Optional Libraries
-
You can use Globalize as Intl alternative. The Web Dashboard uses the core Globalize script and four Globalize modules (message, number, date, and currency) and certain cldrjs scripts.
Read more about Globalize modules and requirements in the Globalize documentation.
-
The Web Dashboard supports the Rich Text Editor used to edit Text Box items. To use this functionality, you need to first enable the Rich Edit control. For more information, refer to the following article: Enable Text Editor Functionality.
Integration
Install the latest version of the npm packages listed below in your project:
Tip
See also: package.json configuration
Bundle the resources and then add them to the View page. Install the BuildBundlerMinifier NuGet package and create the bundleconfig.json file with the following content:
[ { "outputFileName": "wwwroot/css/site.min.css", "inputFiles": [ "node_modules/devextreme-dist/css/dx.light.css", "node_modules/@devexpress/analytics-core/dist/css/dx-analytics.common.css", "node_modules/@devexpress/analytics-core/dist/css/dx-analytics.light.css", "node_modules/@devexpress/analytics-core/dist/css/dx-querybuilder.css", "node_modules/devexpress-dashboard/dist/css/dx-dashboard.light.min.css" ], "minify": { "enabled": false, "adjustRelativePaths": false } }, { "outputFileName": "wwwroot/css/ace/ace.bundle.css", "inputFiles": [ "node_modules/ace-builds/css/ace.css", "node_modules/ace-builds/css/theme/dreamweaver.css", "node_modules/ace-builds/css/theme/ambiance.css" ], "minify": { "enabled": false, "adjustRelativePaths": false } }, { "outputFileName": "wwwroot/js/site.min.js", "inputFiles": [ "node_modules/jquery/dist/jquery.min.js", "node_modules/knockout/build/output/knockout-latest.js", "node_modules/ace-builds/src-min-noconflict/ace.js", "node_modules/ace-builds/src-min-noconflict/ext-language_tools.js", "node_modules/ace-builds/src-min-noconflict/theme-dreamweaver.js", "node_modules/ace-builds/src-min-noconflict/theme-ambiance.js", "node_modules/devextreme-dist/js/dx.all.js", "node_modules/@devexpress/analytics-core/dist/js/dx-analytics-core.min.js", "node_modules/@devexpress/analytics-core/dist/js/dx-querybuilder.min.js", "node_modules/devexpress-dashboard/dist/js/dx-dashboard.min.js" ], "minify": { "enabled": false }, "sourceMap": false } ]Note
See the following topic for information on how to add scripts when you use Globalize to format dates, numbers, and currencies: Localize ASP.NET Core Dashboard Control.
Attach the bundled resources to the page.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title>Dashboard Web Application</title> <!-- Attach the bundled CSS files and scripts. --> <link href="css/site.min.css" rel="stylesheet" /> <script src="js/site.min.js"></script> <!-- ... --> </head> <body> @RenderBody() </body> </html>Important
You should register the dashboard scripts and stylesheets after you register the DevExtreme and third-party resources.
Create the libman.json file in the root directory of the project and add the following LibMan configuration to copy icon fonts to the application’s static content folder:
{ "version": "1.0", "defaultProvider": "filesystem", "libraries": [ { "library": "node_modules/devextreme-dist/css/icons/", "destination": "wwwroot/css/icons/", "files": [ "dxicons.ttf", "dxicons.woff", "dxicons.woff2" ] } ] }Note
This step requires the Microsoft.Web.LibraryManager.Build NuGet package to be installed.