JSON Data Source in ASP.NET Web Forms

Jan 09, 2026
7 minutes to read

This topic shows how to add the DashboardJsonDataSource to an in-memory data source storage and make it available to users. The data source uses an online resource, a file, and a JSON string as a source.

Important

The DashboardJsonDataSource object requires the System.Text.Json library. .NET projects do not require manual installation of the System.Text.Json package, as it is already included in the .NET environment. Set the DevExpress.DataAccess.Native.Json.JsonLoaderHelper.ProcessingLibrary property to NewtonsoftJson to use the Newtonsoft.Json library instead. Then, install the Newtonsoft.Json NuGet package.

Register a JSON Data Source

For example, your ASPX page contains the ASPxDashboard control, which has the unique ASPxDashboardJson identifier:

ASPX

aspx

<!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; top: 0; bottom: 0; left: 0; right: 0">
            <dx:ASPxDashboard ID="ASPxDashboardJson" runat="server" Width="100%" Height="100%">
            </dx:ASPxDashboard>
        </div>
    </form>
</body>
</html>

You can define the JSON data source in the code-behind page that has the .aspx.cs or .aspx.vb extension depending on the language used:

Create a DashboardJsonDataSource instance.
Specify the JsonDataSource.ConnectionName property to uniquely identify the data connection in code.
Handle the ASPxDashboard.ConfigureDataConnection or DashboardConfigurator.ConfigureDataConnection event:
Assign the root element of your JSON data to the JsonDataSource.RootElement property.
Register the created data source instance in the data source storage.

Note

A code-behind page is one of the variants where you can register the data sources. For example, you can also register them in the Global.asax.cs (Global.asax.vb) file.

Get Data from a JSON String

Create a CustomJsonSource instance and assign a JSON string to the CustomJsonSource.Json property.
Pass the created CustomJsonSource instance to the JsonSourceConnectionParameters.JsonSource property.
C#
VB.NET

using DevExpress.DashboardCommon;
using DevExpress.DashboardWeb;
using DevExpress.DataAccess.Json;
using System;
using System.Web.Hosting;

namespace WebFormsDashboardDataSources.Pages {
    public partial class JsonDashboard : System.Web.UI.Page {
        protected void Page_Load(object sender, EventArgs e) {
            DashboardFileStorage dashboardFileStorage = new DashboardFileStorage("~/App_Data/Dashboards");
            // Create a data source storage.
            DataSourceInMemoryStorage dataSourceStorage = new DataSourceInMemoryStorage();

            // Register a JSON data source from a JSON string.
            DashboardJsonDataSource jsonDataSourceString = new DashboardJsonDataSource("JSON Data Source (String)");
            jsonDataSourceString.ConnectionName = "jsonStringConnection";
            jsonDataSourceString.RootElement = "Customers";
            dataSourceStorage.RegisterDataSource("jsonDataSourceString", jsonDataSourceString.SaveToXml());

            // Set the configured data source storage.
            ASPxDashboardJson.SetDataSourceStorage(dataSourceStorage);

            ASPxDashboardJson.ConfigureDataConnection += ASPxDashboardJson_ConfigureDataConnection;

            ASPxDashboardJson.InitialDashboardId = "dashboardJson";
        }
        private void ASPxDashboardJson_ConfigureDataConnection(object sender, ConfigureDataConnectionWebEventArgs e) {
            if (e.ConnectionName == "jsonStringConnection") {
                string json = "{\"Customers\":[{\"Id\":\"ALFKI\",\"CompanyName\":\"Alfreds Futterkiste\",\"ContactName\":\"Maria Anders\",\"ContactTitle\":\"Sales Representative\",\"Address\":\"Obere Str. 57\",\"City\":\"Berlin\",\"PostalCode\":\"12209\",\"Country\":\"Germany\",\"Phone\":\"030-0074321\",\"Fax\":\"030-0076545\"}],\"ResponseStatus\":{}}";
                JsonSourceConnectionParameters jsonParams = new JsonSourceConnectionParameters();
                jsonParams.JsonSource = new CustomJsonSource(json);
                e.ConnectionParameters = jsonParams;
            }
        }
    }
}

Imports DevExpress.DashboardCommon
Imports DevExpress.DashboardWeb
Imports DevExpress.DataAccess.Json
Imports System
Imports System.Web.Hosting

Namespace WebFormsDashboardDataSources.Pages

    Public Partial Class JsonDashboard
        Inherits Web.UI.Page

        Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
            ' Create a data source storage.
            Dim dataSourceStorage As DataSourceInMemoryStorage = New DataSourceInMemoryStorage()
            ' Register a JSON data source from a JSON string.
            Dim jsonDataSourceString As DashboardJsonDataSource = New DashboardJsonDataSource("JSON Data Source (String)")
            jsonDataSourceString.ConnectionName = "jsonStringConnection"
            jsonDataSourceString.RootElement = "Customers"
            dataSourceStorage.RegisterDataSource("jsonDataSourceString", jsonDataSourceString.SaveToXml())
            ' Set the configured data source storage.
            ASPxDashboardJson.SetDataSourceStorage(dataSourceStorage)
            AddHandler ASPxDashboardJson.ConfigureDataConnection, AddressOf Me.ASPxDashboardJson_ConfigureDataConnection
            ASPxDashboardJson.InitialDashboardId = "dashboardJson"
        End Sub

        Private Sub ASPxDashboardJson_ConfigureDataConnection(ByVal sender As Object, ByVal e As ConfigureDataConnectionWebEventArgs)
            If Equals(e.ConnectionName, "jsonStringConnection") Then
                Dim json As String = "{""Customers"":[{""Id"":""ALFKI"",""CompanyName"":""Alfreds Futterkiste"",""ContactName"":""Maria Anders"",""ContactTitle"":""Sales Representative"",""Address"":""Obere Str. 57"",""City"":""Berlin"",""PostalCode"":""12209"",""Country"":""Germany"",""Phone"":""030-0074321"",""Fax"":""030-0076545""}],""ResponseStatus"":{}}"
                Dim jsonParams As JsonSourceConnectionParameters = New JsonSourceConnectionParameters()
                jsonParams.JsonSource = New CustomJsonSource(json)
                e.ConnectionParameters = jsonParams
            End If
        End Sub
    End Class
End Namespace

Get Data from an Online Resource

Create a UriJsonSource instance and assign the URL that returns data in JSON format to the UriJsonSource.Uri property.
Pass the created UriJsonSource instance to the JsonSourceConnectionParameters.JsonSource property.
C#
VB.NET

using DevExpress.DashboardCommon;
using DevExpress.DashboardWeb;
using DevExpress.DataAccess.Json;
using System;
using System.Web.Hosting;

namespace WebFormsDashboardDataSources.Pages {
    public partial class JsonDashboard : System.Web.UI.Page {
        protected void Page_Load(object sender, EventArgs e) {
            DashboardFileStorage dashboardFileStorage = new DashboardFileStorage("~/App_Data/Dashboards");
            // Create a data source storage.
            DataSourceInMemoryStorage dataSourceStorage = new DataSourceInMemoryStorage();

            // Register a JSON data source from a URL.
            DashboardJsonDataSource jsonDataSourceUrl = new DashboardJsonDataSource("JSON Data Source (URL)");
            jsonDataSourceUrl.ConnectionName = "jsonUrlConnection";
            jsonDataSourceUrl.RootElement = "Employee";
            dataSourceStorage.RegisterDataSource("jsonDataSourceUrl", jsonDataSourceUrl.SaveToXml());

            // Set the configured data source storage.
            ASPxDashboardJson.SetDataSourceStorage(dataSourceStorage);

            ASPxDashboardJson.ConfigureDataConnection += ASPxDashboardJson_ConfigureDataConnection;

            ASPxDashboardJson.InitialDashboardId = "dashboardJson";
        }
        private void ASPxDashboardJson_ConfigureDataConnection(object sender, ConfigureDataConnectionWebEventArgs e) {
            if (e.ConnectionName == "jsonUrlConnection") {
                JsonSourceConnectionParameters jsonParams = new JsonSourceConnectionParameters();
                jsonParams.JsonSource = new UriJsonSource(new Uri("https://raw.githubusercontent.com/DevExpress-Examples/DataSources/master/JSON/support.json"));
                e.ConnectionParameters = jsonParams;
            }
        }
    }
}

Imports DevExpress.DashboardCommon
Imports DevExpress.DashboardWeb
Imports DevExpress.DataAccess.Json
Imports System
Imports System.Web.Hosting

Namespace WebFormsDashboardDataSources.Pages

    Public Partial Class JsonDashboard
        Inherits Web.UI.Page

        Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
            ' Create a data source storage.
            Dim dataSourceStorage As DataSourceInMemoryStorage = New DataSourceInMemoryStorage()
            ' Register a JSON data source from a URL.
            Dim jsonDataSourceUrl As DashboardJsonDataSource = New DashboardJsonDataSource("JSON Data Source (URL)")
            jsonDataSourceUrl.ConnectionName = "jsonUrlConnection"
            jsonDataSourceUrl.RootElement = "Employee"
            dataSourceStorage.RegisterDataSource("jsonDataSourceUrl", jsonDataSourceUrl.SaveToXml())
            ' Set the configured data source storage.
            ASPxDashboardJson.SetDataSourceStorage(dataSourceStorage)
            AddHandler ASPxDashboardJson.ConfigureDataConnection, AddressOf Me.ASPxDashboardJson_ConfigureDataConnection
            ASPxDashboardJson.InitialDashboardId = "dashboardJson"
        End Sub

        Private Sub ASPxDashboardJson_ConfigureDataConnection(ByVal sender As Object, ByVal e As ConfigureDataConnectionWebEventArgs)
            If Equals(e.ConnectionName, "jsonUrlConnection") Then
                Dim jsonParams As JsonSourceConnectionParameters = New JsonSourceConnectionParameters()
                jsonParams.JsonSource = New UriJsonSource(New Uri("https://raw.githubusercontent.com/DevExpress-Examples/DataSources/master/JSON/support.json"))
                e.ConnectionParameters = jsonParams
            End If
        End Sub
    End Class
End Namespace

Get Data from a File

Add a JSON file with data to your project.
Create a UriJsonSource instance and assign the JSON file to the UriJsonSource.Uri property.
Pass the created UriJsonSource instance to the JsonSourceConnectionParameters.JsonSource property.
C#
VB.NET

using DevExpress.DashboardCommon;
using DevExpress.DashboardWeb;
using DevExpress.DataAccess.Json;
using System;
using System.Web.Hosting;

namespace WebFormsDashboardDataSources.Pages {
    public partial class JsonDashboard : System.Web.UI.Page {
        protected void Page_Load(object sender, EventArgs e) {
            DashboardFileStorage dashboardFileStorage = new DashboardFileStorage("~/App_Data/Dashboards");
            // Create a data source storage.
            DataSourceInMemoryStorage dataSourceStorage = new DataSourceInMemoryStorage();

            // Register a JSON data source from a JSON file.
            DashboardJsonDataSource jsonDataSourceFile = new DashboardJsonDataSource("JSON Data Source (File)");
            jsonDataSourceFile.ConnectionName = "jsonFileConnection";
            jsonDataSourceFile.RootElement = "Customers";
            dataSourceStorage.RegisterDataSource("jsonDataSourceFile", jsonDataSourceFile.SaveToXml());

            // Set the configured data source storage.
            ASPxDashboardJson.SetDataSourceStorage(dataSourceStorage);

            ASPxDashboardJson.ConfigureDataConnection += ASPxDashboardJson_ConfigureDataConnection;

            ASPxDashboardJson.InitialDashboardId = "dashboardJson";
        }
        private void ASPxDashboardJson_ConfigureDataConnection(object sender, ConfigureDataConnectionWebEventArgs e) {
            if (e.ConnectionName == "jsonFileConnection") {
                Uri fileUri = new Uri(HostingEnvironment.MapPath(@"~/App_Data/customers.json"), UriKind.RelativeOrAbsolute);
                JsonSourceConnectionParameters jsonParams = new JsonSourceConnectionParameters();
                jsonParams.JsonSource = new UriJsonSource(fileUri);
                e.ConnectionParameters = jsonParams;
            }
        }
    }
}

Imports DevExpress.DashboardCommon
Imports DevExpress.DashboardWeb
Imports DevExpress.DataAccess.Json
Imports System
Imports System.Web.Hosting

Namespace WebFormsDashboardDataSources.Pages

    Public Partial Class JsonDashboard
        Inherits Web.UI.Page

        Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
            ' Create a data source storage.
            Dim dataSourceStorage As DataSourceInMemoryStorage = New DataSourceInMemoryStorage()
            ' Register a JSON data source from a JSON file.
            Dim jsonDataSourceFile As DashboardJsonDataSource = New DashboardJsonDataSource("JSON Data Source (File)")
            jsonDataSourceFile.ConnectionName = "jsonFileConnection"
            jsonDataSourceFile.RootElement = "Customers"
            dataSourceStorage.RegisterDataSource("jsonDataSourceFile", jsonDataSourceFile.SaveToXml())
            ' Set the configured data source storage.
            ASPxDashboardJson.SetDataSourceStorage(dataSourceStorage)
            AddHandler ASPxDashboardJson.ConfigureDataConnection, AddressOf Me.ASPxDashboardJson_ConfigureDataConnection
            ASPxDashboardJson.InitialDashboardId = "dashboardJson"
        End Sub

        Private Sub ASPxDashboardJson_ConfigureDataConnection(ByVal sender As Object, ByVal e As ConfigureDataConnectionWebEventArgs)
            If Equals(e.ConnectionName, "jsonFileConnection") Then
                Dim fileUri As Uri = New Uri(HostingEnvironment.MapPath("~/App_Data/customers.json"), UriKind.RelativeOrAbsolute)
                Dim jsonParams As JsonSourceConnectionParameters = New JsonSourceConnectionParameters()
                jsonParams.JsonSource = New UriJsonSource(fileUri)
                e.ConnectionParameters = jsonParams
            End If
        End Sub
    End Class
End Namespace

Result

JSON data sources are now available in the Web Dashboard:

Users can bind dashboard items to data in the Web Dashboard’s UI.

Dashboard Data Source Wizard

Users can use the Dashboard Data Source Wizard to create a new dashboard data source based on JSON data.

To store new data connections, you need to implement the JSON data connection storage.

See the following topic for details: Specify Data Source Settings (JSON).

Example

The example shows how to make a set of data sources available for users in the Web Dashboard application.

View Example: How to Register Data Sources for ASP.NET Web Forms Dashboard Control