The requested page is not available for the requested platform. You are viewing the content for Default platform.
All docs
V19.2
19.2
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.

Connect the ASP.NET Core Dashboard to a JSON data source

  • 2 min to read

The example below shows how to add the DashboardJsonDataSource to the data source storage and make it available to end users. The example 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 Startup.cs file, create a public method that returns a configured in-memory dashboard 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.

    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(FileProvider.GetFileInfo("customers.json").PhysicalPath, UriKind.RelativeOrAbsolute);
            jsonDataSourceFile.JsonSource = new UriJsonSource(fileUri);
            jsonDataSourceFile.RootElement = "Customers";
            jsonDataSourceFile.Fill();
            dataSourceStorage.RegisterDataSource("jsonDataSourceFile", jsonDataSourceFile.SaveToXml());                    
    
            // Creates 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";
            jsonDataSourceString.Fill();
            dataSourceStorage.RegisterDataSource("jsonDataSourceString", jsonDataSourceString.SaveToXml());
            configurator.SetDataSourceStorage(dataSourceStorage);
    
        return dataSourceStorage;
    }
    

    You can download the customers.json file from the Devexpress-Examples GitHub repository:

    https://raw.githubusercontent.com/DevExpress-Examples/DataSources/master/JSON/customers.json

  2. Call the DashboardConfigurator.SetDataSourceStorage method to configure the data source storage. Use the created CreateDataSourceStorage method as the SetDataSourceStorage parameter.

    using DevExpress.AspNetCore;
    using DevExpress.DashboardAspNetCore;
    using DevExpress.DashboardWeb;
    
    public void ConfigureServices(IServiceCollection services) {            
        services
            .AddMvc()
            .AddDefaultDashboardController(configurator => {
                // ...
                configurator.SetDataSourceStorage(CreateDataSourceStorage());
            });
    }
    
  3. As a result, the JSON data sources are displayed as a Web Dashboard's predefined data sources.

    End users can now bind the dashboard items to data in the Web Dashboard's UI. See Binding Dashboard Items to Data in the Web Dashboard's UI for more information.

Example

The example displays how to provide a Web Dashboard with a set of predefined data sources available for end users.