Web Dashboard Technical Overview
- 5 minutes to read
The Web Dashboard is a client-side control that communicates with the server part using HTTP requests:
- The server part is an ASP.NET Core or ASP.NET MVC application that handles client data requests and includes various backend capabilities such as data access, dashboard storage, etc.
The client communicates with the server side using a RESTful API that allows to you send multiple data requests simultaneously. For example, if you change the master filter in a dashboard containing several detail items, all these items send their queries to the server. These requests are independently processed on the server side for better performance.
The table below illustrates correlations between server and client. The column headers display what you can use on a server side, the row headers show available client controls.
Client \ Server
ASP.NET HTTP Handlers
ASP.NET MVC Controller
ASP.NET Core Controller
ASP.NET Web Forms (DashboardConfigurator's API)
ASP.NET MVC Razor Extension
ASP.NET Core Razor Extension
Dashboard Component for Angular
Dashboard Component for React
Dashboard Component for Vue
A combined application comprises client and server parts in one application. The following framework-based wrappers for the DashboardControl are available when you create a Web Dashboard application:
Application with Separated Client and Server Parts
Separated client and server parts require you to configure an ASP.NET Core or ASP.NET MVC Dashboard control as a server and create the client Web Dashboard application.
You can use a Web Dashboard in the following ways:
- Create cross-platform Web Dashboard applications.
- Integrate a Dashboard into anything that supports HTTP requests (e.g., websites, web applications). For example, see the GitHub Pages Demo.
- Publish the Web Dashboard as a part of applications based on Angular, Knockout, Vue and similar frameworks.
- Use the Dashboard with DevExtreme client-side widgets to create responsive web apps.
The Web Dashboard has the following components that are wrappers over client DashboardControl:
Set up cross-origin resource sharing (CORS) on your back-end to configure corresponding permissions to access selected resources from a server at a different origin.
Independent modules called extensions allow you to implement end-user functionality such as exporting, binding to data, the toolbox, etc. You can customize existing extensions (for instance, add or remove commands from the dashboard menu) or create a new extension.
For ASP.NET Web Forms and ASP.NET MVC wrappers, you can use ASPxClientDashboard as a client-side equivalent of the ASPxDashboard control and MVCxDashboard extension. The ASPxClientDashboard object is a wrapper over the DashboardControl with a similar API. Go to Client-Side API Overview for details.
For ASP.NET Core, get access to the DashboardControl directly.
The Web Dashboard also has React and Angular components that are wrappers over the client DashboardControl.
Web Dashboard needs a server-side background to operate with data, store dashboards, etc. Configure the settings below before the first use:
Create Dashboard Storage
The following storage types are available:
- In-Memory Storage - An in-memory dashboard storage.
- File Storage - A dashboard file storage that is used to keep dashboard XML definitions in a file system.
- Custom Storage - A custom storage (for instance, you can save dashboards to a database).
- Dashboard Type Storage - A storage for dashboards created at design time within Visual Studio.
See the following documentation for details:
Use the following approaches to supply the Web Dashboard with data:
- Register a set of default data sources that will be available in the Data Source Wizard.
- Add predefined data connections and allow end users to create their own data sources.
Designer and Viewer Modes
Refer to the following Designer and Viewer Modes topics for different platforms: