Skip to main content
BuyLog In
Business Intelligence Dashboard
Search in…
Docs > Get Started > Build Web Dashboard Applications > Detailed Guides > Create an ASP.NET Web Forms Dashboard Application
A newer version of this page is available. .
All docs
V22.1
Business Intelligence Dashboard
Get Started
Build Web Dashboard Applications
Quick Start
Detailed Guides
Create an ASP.NET Core Dashboard Application
Create an ASP.NET MVC Dashboard Application
Create an ASP.NET Web Forms Dashboard Application
Create a Blazor WebAssembly Dashboard Application
Create a Blazor Server Dashboard Application
Create an Angular Dashboard Application
Create a React Dashboard Application
Create a Vue Dashboard Application
Create a JavaScript Dashboard Application
Create Dashboards in the Web Dashboard Control
Build WinForms Dashboard Applications
Build WPF Dashboard Applications
Included Components
Basic Concepts and Terminology
Common Features
WinForms Dashboard
Web Dashboard
WPF Dashboard Viewer
Visual Studio Integration
Redistribution and Deployment
Video Tutorials
Migration Guides
Examples
End-User Documentation
.NET Framework API Reference
.NET Core API Reference
HTML JS Control API Reference
ASP.NET Client API Reference
Download CHM

Create an ASP.NET Web Forms Dashboard Application

  • 4 minutes to read

This tutorial shows how to create the dashboard web application using the ASPxDashboard control.

View Example Watch Video

Add the Web Dashboard Control

  1. In Visual Studio, create a new project and select ASP.NET Web Application (.NET Framework) on the start page as the project template. Next, select the Empty template and click OK.

  2. Add a new Web Form to the application. To do this, right-click the project in the Solution Explorer and select Add | Web Form.

    GettingStarted_L3_AddWebForm

    Leave the default ‘WebForm1’ item name and click OK in the invoked dialog.

  3. Drag the ASPxDashboard control from the DX.22.1: Data & Analytics Toolbox tab and drop it onto the page to the <body> tag.

    WebDesigner-AddFromToolbox

    Switch the web page to the Design view.

Create Dashboard Storage

  1. Right-click the project in the Solution Explorer and select Add | Add ASP.NET Folder | App_Data from the context menu. Then, add the Dashboards folder inside App_Data.

  2. Click the control’s smart tag and set Dashboard Storage Folder to the following relative path: ~/App_Data/Dashboards.

    ASPxDashboard_DashboardStorageFolder_SmartTag

    This folder contains the saved dashboards’ XML definitions.

    The resulting ASPX markup should look as follows:

    <!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div style="position:absolute; left:0; right:0; top:0; bottom:0;">
            <dx:ASPxDashboard ID="ASPxDashboard1" runat="server" 
                DashboardStorageFolder="~/App_Data/Dashboards" 
                Height="100%" Width="100%">
            </dx:ASPxDashboard>
        </div>
    </form>
</body>
</html>

Supply a Web Dashboard with Data

  1. Right-click the App_Data folder, select Add | Existing Item and locate the nwind.mdb database using the following path:

    C:\Users\Public\Documents\DevExpress Demos 22.1\Components\Data\nwind.mdb

  2. Specify a connection string to the added database within the project’s Web.config file as shown below.

    <configuration>
  <connectionStrings>
      <add name="nwindConnection" connectionString="XpoProvider=MSAccess; Provider=Microsoft.ACE.OLEDB.12.0; Data Source=|DataDirectory|\nwind.mdb;" />
  </connectionStrings>
</configuration>

    Note

    Note that the connection string should contain the XpoProvider parameter that depends on the used database type. For details on how to specify connection strings for different database types, see Register Default Data Connections.

  3. In the Page_Load method of WebForm1.aspx.cs, pass the ConfigFileConnectionStringsProvider instance as the SetConnectionStringsProvider method’s parameter to to allow creating new data sources based on connection strings from the Web.config file:

    using DevExpress.DashboardWeb;

protected void Page_Load(object sender, EventArgs e) {
    // ...
    ASPxDashboard1.SetConnectionStringsProvider(new DevExpress.DataAccess.Web.ConfigFileConnectionStringsProvider());
}

Add Required Client Libraries

  1. In the web application’s Web.Config file, go to the DevExpress section and add the “resources” section as shown below.

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

    This adds the required client libraries to the project, such as jquery, jquery-ui, knockout and globalize.

    Note

    The basic cldr content needed for the Web Dashboard is included in the library. However, for locales other than “en” (or currencies other than “USD”), cldr content should be loaded additionally (read more in the Globalize documentation).

Create a Dashboard

  1. The designer application is now ready. Build and run the project.

    gettingstarted_l1_buildweb

    Your application should look as follows:

    WebDesigner-NoDashboard

  2. For instructions on how to create your first dashboard in the Web Designer, go to Create a Dashboard using the Web Dashboard.

Switch to Viewer Mode

In Designer mode, the control loads the extensions required to design dashboards. Users can access the Data Source Wizard , preview underlying data, and modify dashboards from storage. The requests from the dashboard backend server can be sent to third-party resources. A user can also switch the control to Viewer mode.

After you created and saved a dashboard, switch your Dashboard Designer application to ViewerOnly mode to prevent users from modifying the dashboard and its data.

  1. In the project, switch to WebForm1.aspx and click the control’s smart tag.

  2. Set the Working Mode option to the ‘ViewerOnly’.

    ASPxDashboard_ViewerOnlySmartTag

  3. Run the application. The ASPxDashboard control displays the dashboard from ~/App_Data/Dashboards.

    AspNetCoreViewer_Result

Warning

The working mode does not influence the server settings. Initially, the server works at the ClientTrustLevel.Full trust level. Verify the trust level and specify which actions a client can initiate on the server. See the following topic for details: Working Mode Access Rights.

Next Steps

See Also