Read-Only Data in JSON Format

  • 3 minutes to read

DevExtreme ASP.NET MVC 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 specify a URL to JSON data 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 specify a URL to JSON data 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

The examples above specify an absolute URL to JSON data as a string constant. You can also use UrlHelper class methods to get a URL (see below).

How to Specify a URL

You can specify a URL to JSON data 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.

      The veiw's code:

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

      Razor VB: When you use the @<text> block:

      • enclose the control configuration with @Code/End Code;
      • end the control configuration with Render().

      The controller's code:

      using System.Web.Mvc;
      using Newtonsoft.Json;
      
      namespace MyApp.Controllers {
          public class HomeController : Controller {
              public IActionResult Index() {
                  return View();
              }
      
              [HttpGet]
              public ActionResult GetListData() {    
                  var listData = new[] {
                      new {
                          name = "John",
                          city = "New York City"
                      },
                      new {
                          name = "Jane",
                          city = "Bangkok"
                      },
                      new {
                          name = "Mike",
                          city = "Baghdad"
                      }
                  };
                  return Content(JsonConvert.SerializeObject(listData), "application/json");
              }
          }
      }
      
    • Url.RouteUrl() - generates a URL by route.