JSON Data Source in an ASP.NET MVC App

• Mar 28, 2024
• 4 minutes to read

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

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.

1. In the dashboard configuration file (for example, DashboardConfig.cs / DashboardConfig.vb), 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. Specify JsonDataSource.JsonSource, which stores JSON data import settings, and set JsonDataSource.ConnectionName for a data source that obtains data from a JSON file.

   C#

   using System;
   using DevExpress.DashboardCommon;
   using DevExpress.DashboardWeb;
   using DevExpress.DataAccess.Json;
   
   public static DataSourceInMemoryStorage CreateDataSourceStorage() {
       DataSourceInMemoryStorage dataSourceStorage = new DataSourceInMemoryStorage();
   
       // Creates a JSON data source from a 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";
       dataSourceStorage.RegisterDataSource("jsonDataSourceUrl", jsonDataSourceUrl.SaveToXml());
   
       // Creates a JSON data source from a JSON file.
       DashboardJsonDataSource jsonDataSourceFile = new DashboardJsonDataSource("JSON Data Source (File)");
       jsonDataSourceFile.ConnectionName = "jsonConnection";
       jsonDataSourceFile.RootElement = "Customers";
       dataSourceStorage.RegisterDataSource("jsonDataSourceFile", jsonDataSourceFile.SaveToXml());
   
       // Uses a JSON string to create a JSON data source.
       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";
       dataSourceStorage.RegisterDataSource("jsonDataSourceString", jsonDataSourceString.SaveToXml());
   
       return dataSourceStorage;
   }
   

   VB.NET

   Imports System
   Imports DevExpress.DashboardCommon
   Imports DevExpress.DashboardWeb
   Imports DevExpress.DataAccess.Json
   
   Public Shared Function CreateDataSourceStorage() As DataSourceInMemoryStorage
       Dim dataSourceStorage As New DataSourceInMemoryStorage()
   
       ' Register 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"
       dataSourceStorage.RegisterDataSource("jsonDataSourceUrl", jsonDataSourceUrl.SaveToXml())
   
       ' Creates a JSON data source from a JSON file.
       Dim jsonDataSourceFile As New DashboardJsonDataSource("JSON Data Source (File)")
       jsonDataSourceFile.ConnectionName = "jsonConnection"
       jsonDataSourceFile.RootElement = "Customers"
       dataSourceStorage.RegisterDataSource("jsonDataSourceFile", jsonDataSourceFile.SaveToXml())
   
       ' Uses a JSON string to create a JSON data source.
       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"
       dataSourceStorage.RegisterDataSource("jsonDataSourceString", jsonDataSourceString.SaveToXml())
   
       Return dataSourceStorage
   End Function
   

2. Call the DashboardConfigurator.SetDataSourceStorage method to configure the data source storage. Use the created CreateDataSourceStorage method as the SetDataSourceStorage parameter. Then handle the DashboardConfigurator.ConfigureDataConnection event to pass the connection parameters to the JSON data source.

   C#

   using System;
   using DevExpress.DashboardWeb;
   using DevExpress.DataAccess.Json;
   
   public static void RegisterService(RouteCollection routes) {
       routes.MapDashboardRoute("dashboardControl", "DefaultDashboard");
   
       // ...
   
       DashboardConfigurator.Default.SetDataSourceStorage(CreateDataSourceStorage());
   
       DashboardConfigurator.Default.ConfigureDataConnection += Default_ConfigureDataConnection;
   }
   private static void Default_ConfigureDataConnection(object sender, ConfigureDataConnectionWebEventArgs e) {
       if(e.ConnectionName == "jsonConnection") {
           Uri fileUri = new Uri(HostingEnvironment.MapPath(@"~/App_Data/customers.json"), UriKind.RelativeOrAbsolute);
           JsonSourceConnectionParameters jsonParams = new JsonSourceConnectionParameters();
           jsonParams.JsonSource = new UriJsonSource(fileUri);
           e.ConnectionParameters = jsonParams;
       }
   }
   

   VB.NET

   Imports System
   Imports DevExpress.DashboardWeb
   Imports DevExpress.DataAccess.Json
   
   Public Shared Sub RegisterService(ByVal routes As RouteCollection)
       routes.MapDashboardRoute("dashboardControl", "DefaultDashboard")
   
       ' ...
   
       DashboardConfigurator.Default.SetDataSourceStorage(CreateDataSourceStorage())
   
       AddHandler DashboardConfigurator.Default.ConfigureDataConnection, AddressOf Default_ConfigureDataConnection
   End Sub
   Private Shared Sub Default_ConfigureDataConnection(ByVal sender As Object, ByVal e As ConfigureDataConnectionWebEventArgs)
       If e.ConnectionName = "jsonConnection" Then
           Dim fileUri As New Uri(HostingEnvironment.MapPath("~/App_Data/customers.json"), UriKind.RelativeOrAbsolute)
           Dim jsonParams As New JsonSourceConnectionParameters()
           jsonParams.JsonSource = New UriJsonSource(fileUri)
           e.ConnectionParameters = jsonParams
       End If
   End Sub
   

The 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.

View Example: How to Register Data Sources for the ASP.NET MVC Dashboard Extension