Connect the ASP.NET Web Forms Dashboard Control to a JSON Data Source

• May 19, 2020
• 3 minutes to read

This tutorial shows how to add the DashboardJsonDataSource to data source storage and make it available to users. The tutorial uses an online resource, file, and JSON string.

Important

The DashboardJsonDataSource object requires the open source Newtonsoft.Json library. Install the Newtonsoft.Json NuGet package in Visual Studio.

1. In the Default.aspx.cs (or .vb) file, set resource access rules to allow access to all file directories and URLs.

   C#

   protected void Page_Load(object sender, EventArgs e) {
       // ...
   
       // Sets resource access rules.
       AccessSettings.DataResources.TrySetRules(UrlAccessRule.Allow(), DirectoryAccessRule.Allow());
   }
   

   VB.NET

   Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
       ' ...
   
       ' Sets resource access rules.
       AccessSettings.DataResources.TrySetRules(UrlAccessRule.Allow(), DirectoryAccessRule.Allow())
   End Sub    
   

   Note

   Refer to the IAccessRule topic for additional information about access to file directories and URLs.

2. In the same file, create a public method that returns the configured dashboard’s data source storage (DataSourceInMemoryStorage) and define the JSON data sources. Use the JsonDataSource.RootElement property to specify the name of the root element in the associated data source and specify JsonDataSource.JsonSource that stores JSON data import settings.

   C#

   using System;
   using DevExpress.DashboardCommon;
   using DevExpress.DataAccess.Json;
   
   public DataSourceInMemoryStorage CreateDataSourceStorage() {
       DataSourceInMemoryStorage dataSourceStorage = new DataSourceInMemoryStorage();
   
       // Creates a JSON data source from URL.
       DashboardJsonDataSource jsonDataSourceUrl = new DashboardJsonDataSource("JSON Data Source (URL)");
       jsonDataSourceUrl.JsonSource = new UriJsonSource(new Uri("https://raw.githubusercontent.com/DevExpress-Examples/DataSources/master/JSON/customers.json"));
       jsonDataSourceUrl.RootElement = "Customers";
       jsonDataSourceUrl.Fill();
       dataSourceStorage.RegisterDataSource("jsonDataSourceUrl", jsonDataSourceUrl.SaveToXml());
   
       // Creates a JSON data source from a JSON file.
       DashboardJsonDataSource jsonDataSourceFile = new DashboardJsonDataSource("JSON Data Source (File)");
       Uri fileUri = new Uri(@"App_Data/customers.json", UriKind.RelativeOrAbsolute);
       jsonDataSourceFile.JsonSource = new UriJsonSource(fileUri);
       jsonDataSourceFile.RootElement = "Customers";
       jsonDataSourceFile.Fill();
       dataSourceStorage.RegisterDataSource("jsonDataSourceFile", jsonDataSourceFile.SaveToXml());
   
       // Registers a JSON data source from JSON string.
       DashboardJsonDataSource jsonDataSourceString = new DashboardJsonDataSource("JSON Data Source (String)");
       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\":{}}";
       jsonDataSourceString.JsonSource = new CustomJsonSource(json);
       jsonDataSourceString.RootElement = "Customers";
       jsonDataSourceString.Fill();
       dataSourceStorage.RegisterDataSource("jsonDataSourceString", jsonDataSourceString.SaveToXml());
   
       return dataSourceStorage;
   }
   

   VB.NET

   Imports System
   Imports DevExpress.DashboardCommon
   Imports DevExpress.DataAccess.Json
   
   Public Function CreateDataSourceStorage() As DataSourceInMemoryStorage
       Dim dataSourceStorage As New DataSourceInMemoryStorage()
   
       ' Creates a JSON data source from URL.
       Dim jsonDataSourceUrl As New DashboardJsonDataSource("JSON Data Source (URL)")
       jsonDataSourceUrl.JsonSource = New UriJsonSource(New Uri("https://raw.githubusercontent.com/DevExpress-Examples/DataSources/master/JSON/customers.json"))
       jsonDataSourceUrl.RootElement = "Customers"
       jsonDataSourceUrl.Fill()
       dataSourceStorage.RegisterDataSource("jsonDataSourceUrl", jsonDataSourceUrl.SaveToXml())
   
       ' Creates a JSON data source from a JSON file.
       Dim jsonDataSourceFile As New DashboardJsonDataSource("JSON Data Source (File)")
       Dim fileUri As New Uri("App_Data/customers.json", UriKind.RelativeOrAbsolute)
       jsonDataSourceFile.JsonSource = New UriJsonSource(fileUri)
       jsonDataSourceFile.RootElement = "Customers"
       jsonDataSourceFile.Fill()
       dataSourceStorage.RegisterDataSource("jsonDataSourceFile", jsonDataSourceFile.SaveToXml())
   
       ' Registers a JSON data source from JSON string.
       Dim jsonDataSourceString As New DashboardJsonDataSource("JSON Data Source (String)")
       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"":{}}"
       jsonDataSourceString.JsonSource = New CustomJsonSource(json)
       jsonDataSourceString.RootElement = "Customers"
       jsonDataSourceString.Fill()
       dataSourceStorage.RegisterDataSource("jsonDataSourceString", jsonDataSourceString.SaveToXml())
   
       Return dataSourceStorage
   End Function    
   

3. Call the ASPxDashboard.SetDataSourceStorage method to configure the data source storage. Use the created CreateDataSourceStorage method as the SetDataSourceStorage parameter.

   C#

   using DevExpress.DashboardWeb;
   
   protected void Page_Load(object sender, EventArgs e) {
       // ...  
   
       // Configures the data source storage.
       ASPxDashboard1.SetDataSourceStorage(CreateDataSourceStorage());
   
       // Sets resource access rules.
       AccessSettings.DataResources.TrySetRules(UrlAccessRule.Allow(),DirectoryAccessRule.Allow());
   }
   

   VB.NET

   Imports DevExpress.DashboardWeb
   
   Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
       ' ...          
   
       '  Configures the data source storage.
       ASPxDashboard1.SetDataSourceStorage(CreateDataSourceStorage())
   
       ' Sets resource access rules.
       AccessSettings.DataResources.TrySetRules(UrlAccessRule.Allow(),DirectoryAccessRule.Allow())
   End Sub
   

JSON data sources are now available in Web Dashboard:

Users can bind dashboard items to data in the Web Dashboard’s UI. See Bind Dashboard Items to Data in the Web Dashboard’s UI for more information.

Example

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

Note

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