Skip to main content

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

Read-Only Data in JSON Format

  • 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:

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

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

    @(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.

    @(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.

    @(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().

    @(Html.DevExtreme().SelectBox()
        .DataSource(ds => ds.StaticJson()
            .Url("https://www.example.com/dataservices/jsonpdata?callback=?")
        )
    )
    
  • A virtual path the URL.Content method returns.

    @(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.

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

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