Read-Only Data in JSON Format

• Sep 09, 2024
• 3 minutes to read

DevExtreme-based ASP.NET Core controls can access JSON data an AJAX request returns from a resource.

You can configure access to JSON data in one of the following ways:

• Use the DataSource(string staticJsonUrl, params string[] key) method.

  The method allows you to pass a JSON data URL and key (optionally).

  The following code shows how to pass only a URL:

  Razor C#

  @(Html.DevExtreme().SelectBox()
      .DataSource("https://www.example.com/dataservices/jsondata")
  )
  

  The following code shows how to pass a URL and a key:

  Razor C#

  @(Html.DevExtreme().SelectBox()
      .DataSource("https://www.example.com/dataservices/jsondata", "ID")
  )
  

• Use the DataSourceFactory.StaticJson() method.

  This method opens a chain of methods (Url, Key, CacheAllData, etc.) that allow you to pass a JSON data URL and a number of additional parameters.

  Razor C#

  @(Html.DevExtreme().SelectBox()
      .DataSource(ds => ds.StaticJson()
          .Url("https://www.example.com/dataservices/jsondata")
          .Key("ID")
          .CacheAllData(true)
      )
  )
  

Note

These approaches use a data URL. You can specify the URL as described below.

How to Specify a JSON Data URL

You can specify a data URL in the following ways:

• An absolute URL.

  Razor C#

  @(Html.DevExtreme().SelectBox()
      .DataSource(ds => ds.StaticJson()
          .Url("https://www.example.com/dataservices/jsondata")
      )
  )
  

  You can also use a JSONP callback parameter supported by jQuery.ajax().

  Razor C#

  @(Html.DevExtreme().SelectBox()
      .DataSource(ds => ds.StaticJson()
          .Url("https://www.example.com/dataservices/jsonpdata?callback=?")
      )
  )
  

• A virtual path the URL.Content method returns.

  Razor C#

  @(Html.DevExtreme().SelectBox()
      .DataSource(ds => ds.StaticJson()
          .Url(Url.Content("~/dataservices/jsondata"))
      )
  )
  

• Use the following UrlHelper class methods to build a URL:

  • Url.Action() - generates a URL with an absolute path for an action method. Refer to Generating URLs by action name for more information.

    Razor C#

    @(Html.DevExtreme().List()
        .DataSource(ds => ds.StaticJson()
            .Url(Url.Action("GetListData"))
        )
        .ItemTemplate(@<text><%- name %></text>)
    )
    

    Controller

    using Microsoft.AspNetCore.Mvc;
    using Newtonsoft.Json;
    
    namespace MyApp.Controllers {
        public class HomeController : Controller {
            public IActionResult Index() {
                return View();
            }
    
            [HttpGet]
            public object GetListData() {
                return new[] {
                    new {
                        name = "John",
                        city = "New York City"
                    },
                    new {
                        name = "Jane",
                        city = "Bangkok"
                    },
                    new {
                        name = "Mike",
                        city = "Baghdad"
                    }
                };
            }
        }
    }
    

  • Url.Page() - generates a URL for a Razor page. You should specify the page name and the page handler defined in a page model.

    Razor Page

    @page
    @model MyApp.Pages.MyPageModel
    
    @(Html.DevExtreme().List()
        .DataSource(ds => ds.StaticJson()
            .Url(Url.Page(null, "ListData"))
        )
        .ItemTemplate(@<text><%- name %></text>)
    )
    

    Page Model

    namespace MyApp.Pages {
        public class MyPageModel : PageModel {
    
            public IActionResult OnGetListData() {
                var data = new[] {
                    new {
                        name = "John",
                        city = "New York City"
                    },
                    new {
                        name = "Jane",
                        city = "Bangkok"
                    },
                    new {
                        name = "Mike",
                        city = "Baghdad"
                    }
                };
                return new JsonResult(data);
            }
        }
    }
    

  • Url.RouteUrl() - generates a URL by route.