JSON Data Source in an ASP.NET Core App

• Feb 23, 2024
• 5 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 tutorial uses an online resource, a file, and a JSON string to create a JSON Data Source.

Important

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

Create a JSON Data Source in Code

To define a JSON data source, follow the steps below:

1. Create a DashboardJsonDataSource instance.
2. Assign a root element of your JSON data to the JsonDataSource.RootElement property.

3. Specify the JSON data location in one of the following ways:

   • Use the JsonDataSource.JsonSource property.

     See the following section for the implementation: Get Data from a JSON String.

   • Add the connection string to appsettings.json. Pass the name of the specified data connection to the ConnectionName property. Refer to this article for connection string examples: Connection Strings for JSON Data.

     See the following section for the implementation: Get Data from an Online Resource.

   • Handle the DashboardConfigurator.ConfigureDataConnection event. In the event handler, create the JsonSourceConnectionParameters object and specify the JsonSource property. Assign this object to the e.ConnectionParameters property. Pass the name of the specified data connection to the ConnectionName property.

     See the following section for the implementation: Get Data from a File.

4. Register the created data source in the data source storage.

Note

When you use the JsonDataSource.JsonSource property to specify the JSON data location, the dashboard XML definition contains information about the data location.

In this example, the ConfigureDataSource method defined in the JsonDataSourceConfigurator class registers the data source for the Web Dashboard control. The sections below contain code samples on how to register JSON data sources of different types.

In the application startup code, pass the data source storage, configurator, and file provider (in the case of creating a data source from a file) as parameters to the ConfigureDataSource method call. Call the DashboardConfigurator.SetDataSourceStorage method to set the configured data source storage for the dashboard:

using DevExpress.DashboardCommon;
using DevExpress.DashboardWeb;
using DevExpress.DataAccess.Json;
using Microsoft.Extensions.FileProviders;
using System;

var builder = WebApplication.CreateBuilder(args);

IFileProvider? fileProvider = builder.Environment.ContentRootFileProvider;
IConfiguration? configuration = builder.Configuration;

builder.Services.AddScoped<DashboardConfigurator>((IServiceProvider serviceProvider) => {
    DashboardConfigurator configurator = new DashboardConfigurator();

    // Create and configure a data source storage.
    DataSourceInMemoryStorage dataSourceStorage = new DataSourceInMemoryStorage();
    JsonDataSourceConfigurator.ConfigureDataSource(configurator, dataSourceStorage, FileProvider);
    configurator.SetDataSourceStorage(dataSourceStorage);

    return configurator;
});

var app = builder.Build();

Get Data from a JSON String

To obtain JSON data from a string variable with the JsonDataSource.JsonSource property, follow the steps below:

• Create a CustomJsonSource instance and assign a JSON string to the CustomJsonSource.Json property.
• Pass the created CustomJsonSource instance to the JsonDataSource.JsonSource property.

The code below shows the ConfigureDataSource method that registers a JSON data source from a JSON string:

using DevExpress.DashboardCommon;
using DevExpress.DashboardWeb;
using DevExpress.DataAccess.Json;
using Microsoft.Extensions.FileProviders;
using System;

namespace WebDashboardDataSources.Configuration {
    public class JsonDataSourceConfigurator {
        private static IFileProvider fileProvider;
        public static void ConfigureDataSource(DashboardConfigurator configurator, DataSourceInMemoryStorage storage, IFileProvider fileProvider) {
            // Registers a JSON data source from a 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";
            storage.RegisterDataSource("jsonDataSourceString", jsonDataSourceString.SaveToXml());

        }
    }
}

Get Data from an Online Resource

To obtain JSON data from the Web with the connection string from the configuration file, follow the steps below:

• Add a connection string to appsetting.json. In this example, the connection name is jsonUrlConnection:

  {
  //...
  "ConnectionStrings": {
      "jsonUrlConnection": "Uri=https://raw.githubusercontent.com/DevExpress-Examples/DataSources/master/JSON/customers.json"
      }
  }
  

• Pass the name of the specified data connection to the ConnectionName property to identify the data connection in code.

The code below shows the ConfigureDataSource method that registers a JSON data source from the URL of the jsonUrlConnection connection string:

using DevExpress.DashboardCommon;
using DevExpress.DashboardWeb;
using DevExpress.DataAccess.Json;
using Microsoft.Extensions.FileProviders;
using System;

namespace WebDashboardDataSources.Configuration {
    public class JsonDataSourceConfigurator {
        private static IFileProvider fileProvider;
        public static void ConfigureDataSource(DashboardConfigurator configurator, DataSourceInMemoryStorage storage, IFileProvider fileProvider) {
            // Registers a JSON data source from a URL.
            DashboardJsonDataSource jsonDataSourceUrl = new DashboardJsonDataSource("JSON Data Source (URL)");
            jsonDataSourceUrl.ConnectionName = "jsonUrlConnection";
            jsonDataSourceUrl.RootElement = "Customers";
            storage.RegisterDataSource("jsonDataSourceUrl", jsonDataSourceUrl.SaveToXml());

        }
    }
}

Get Data from a File

To obtain JSON data from a file with the DashboardConfigurator.ConfigureDataConnection event, follow the steps below:

• Specify the ConnectionName property to identify the data connection in code.
• Handle the DashboardConfigurator.ConfigureDataConnection event.
• In the event handler, create a UriJsonSource instance and assign the JSON file to the UriJsonSource.Uri property.
• Pass the created UriJsonSource instance to the JsonSourceConnectionParameters.JsonSource property.

The code below shows the ConfigureDataSource method that registers a JSON data source from a file:

using DevExpress.DashboardCommon;
using DevExpress.DashboardWeb;
using DevExpress.DataAccess.Json;
using Microsoft.Extensions.FileProviders;
using System;

namespace WebDashboardDataSources.Configuration {
    public class JsonDataSourceConfigurator {
        private static IFileProvider fileProvider;
        public static void ConfigureDataSource(DashboardConfigurator configurator, DataSourceInMemoryStorage storage, IFileProvider fileProvider) {
            // Registers a JSON data source from a JSON file.
            DashboardJsonDataSource jsonDataSourceFile = new DashboardJsonDataSource("JSON Data Source (File)");
            jsonDataSourceFile.ConnectionName = "jsonFileConnection";
            jsonDataSourceFile.RootElement = "Customers";
            storage.RegisterDataSource("jsonDataSourceFile", jsonDataSourceFile.SaveToXml());

            JsonDataSourceConfigurator.fileProvider = fileProvider;

            configurator.ConfigureDataConnection += Configurator_ConfigureDataConnection;
        }

        private static void Configurator_ConfigureDataConnection(object sender, ConfigureDataConnectionWebEventArgs e) {
            if (e.ConnectionName == "jsonFileConnection") {
                Uri fileUri = new Uri(fileProvider.GetFileInfo("Data/customers.json").PhysicalPath, UriKind.RelativeOrAbsolute);
                JsonSourceConnectionParameters jsonParams = new JsonSourceConnectionParameters();
                jsonParams.JsonSource = new UriJsonSource(fileUri);
                e.ConnectionParameters = jsonParams;
            }
        }
    }
}

Result

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.

Create a JSON Data Source in the UI

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: How to Register Data Sources for ASP.NET Core Dashboard Control

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

View Example