Read-Only Data in JSON Format

• Dec 30, 2021
• 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:

  Razor C#

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

  Razor VB

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

  Razor VB

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

  Razor C#

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

  Razor VB

  @(Html.DevExtreme().SelectBox() _
      .DataSource(Function(ds) ds.StaticJson() _
          .Url("http://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.

  Razor C#

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

  Razor VB

  @(Html.DevExtreme().SelectBox() _
      .DataSource(Function(ds) ds.StaticJson() _
          .Url("http://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=?")
      )
  )
  

  Razor VB

  @(Html.DevExtreme().SelectBox() _
      .DataSource(Function(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"))
      )
  )
  

  Razor VB

  @(Html.DevExtreme().SelectBox() _
      .DataSource(Function(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:

    Razor C#

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

    Razor VB

    @Code
        Html.DevExtreme().List() _
            .DataSource(Function(ds) ds.StaticJson() _
                .Url(Url.Action("GetListData"))
            ) _
            .ItemTemplate(Sub()
                @<text><%- name %></text>
            End Sub) _
            .Render()
    End Code
    

    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:

    C#

    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");
            }
        }
    }
    

    VB

    Imports System.Web.Mvc
    Imports Newtonsoft.Json
    
    Namespace Controllers
        Public Class HomeController
            Inherits Controller
            Public Function Index() As ActionResult
                Return View()
            End Function
    
            <HttpGet>
            Public Function GetListData() As ContentResult
                Dim listData = {
                    New With {.name = "John", .city = "New York City"},
                    New With {.name = "Jane", .city = "Bangkok"},
                    New With {.name = "Mike", .city = "Baghdad"}
                }
                Return Content(JsonConvert.SerializeObject(listData), "application/json")
            End Function
        End Class
    End Namespace
    

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