JSON Data Source in ASP.NET Web Forms
- 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 open source Newtonsoft.Json library for .NET Framework platforms. Install the Newtonsoft.Json NuGet package in Visual Studio. For .NET 6+ platforms, DashboardJsonDataSource uses System.Text.Json. Set the DevExpress.DataAccess.Native.Json.JsonLoaderHelper.ProcessingLibrary property to NewtonsoftJson to use the Newtonsoft.Json library instead.
Register a JSON Data Source
For example, your ASPX page contains the ASPxDashboard control, which has the unique ASPxDashboardJson identifier:
<!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:
- Specify the JsonSourceConnectionParameters at runtime. You can use an online resource, a file, and a JSON string as a source. See the sections below for detailed information.
- Assign the connection parameters to the e.ConnectionParameters property.
The selected event depends on the server-side API used in your app.
- 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.
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;
}
}
}
}
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.
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;
}
}
}
}
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.
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;
}
}
}
}
Result
JSON data sources are now available in the Web Dashboard:
Users can now 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.
