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 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:
<!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.
