Kendo jQuery 网格数据源为空但 json return 来自服务器

Question

所以我已经为此苦思了几天了。在开发环境中工作，我在 VM 上有一个测试 WebAPI 站点运行。它可以通过网络访问（使用 un/pw）并且正在返回 JSON。我正在使用 jsonp，因为它在不同的子域上抱怨跨域。它正在返回 XML 但我使用了 this reference to get the JSON output. I've also used Telerik's site for all the references I could find. telerik jquery grid source

[{ "id": 2, "ProcessName": "#######", "Password": "########", "Username": "########" }, { "id": 3, "ProcessName": "#######", "Password": "#######", "Username": "#######" },{ "id": 4, "ProcessName": "#######", "Password": "#######", "Username": "#######" }, { "id": 5, "ProcessName": "#######", "Password": "#######", "Username": "#######" }]

我已经尝试了多种方法来读取 URL 并将数据解析到数据源中，但每次，源都保持为空并且不会抛出任何错误。返回的内容类型是 application/json

这是最近的一次尝试，它确实正确地构建了网格显示，但当然没有数据。这个错误是从 ajax 请求中抛出的，我不知道为什么！

<script type="text/javascript">
$(document).ready(function() {
var apDs = new kendo.data.DataSource({
   transport: {         
     read: "http://xxx.xxx.xxx.xxx/Sec/Api/ProcessInfo"}
  });
var remoteDataSource = new kendo.data.DataSource({ 
   type: 'odata',
     transport: { 
        read:{
            url: "http://xxx.xxx.xxx.xxx/Sec/Api/ProcessInfo",
            dataType: "json"} , //json datatype works here
    parameterMap: function (data, operation) { return JSON.stringify(data); 
}} ,
    pageSize: 12, 
    serverPaging: true, 
    serverFiltering: true, 
    serverSorting: true, 
schema: { 
  data: "data"
   }
 }); 
$("#myGrid").kendoGrid({
   dataSource: {apDs},
   height: 550,
   filterable: true,
   sortable: true,
   pageable: true,
   columns: [{
                field:"id", 
                filterable: false
            },
            { 
                field: "ProcessName", title: "Process Name"
                },
            {
                field: "Username",
                title: "User Name"
            },
            {
                field: "Password",
                title: "Password"}]
    });
});

 $.ajax({
    type: "GET",
    url: "http://xxx.xxx.xxx.xxx/Sec/Api/ProcessInfo",
    dataType: "jsonp", //json does NOT work here, must be jsonp
    success: function (result) {
    var grid = $("#myGrid").data("kendoGrid");
    var ds = new kendo.data.DataSource({ data: result });
    grid.setDataSource(ds);
    grid.dataSource.read();
 },
    error: function (httpRequest,textStatus,errorThrow){
    alert("ERROR: " + textStatus + " " + errorThrow + ' ' + httpRequest);
 }

 });

Answer 1

所以经过更多的挖掘和摸索，我终于偶然发现了一个fix/work。

虽然我的 API 返回了 json，但导致数据源出现问题的并不是 JSONP。

我发现了这个问题，JSONP with ASP.Net WebAPI and this GitHub/Nuget 包效果很好。

通过安装 nuget 包并将 GlobalConfiguration.Configuration.AddJsonpFormatter(); 添加到我的 Global.asax.cs 并将此代码添加到我的 WebApiConfig.cs 我现在可以请求 text/xml, text/json and/or text/jsonp 并收到正确的响应。

 public static void Register(HttpConfiguration config)
        {
        // Web API configuration and services

        // Web API routes
        config.MapHttpAttributeRoutes();

        config.Routes.MapHttpRoute(
            name: "DefaultApi",
            routeTemplate: "api/{controller}/{id}",
            defaults: new { id = RouteParameter.Optional }
        );

        config.Formatters.JsonFormatter.SupportedMediaTypes.Add(new System.Net.Http.Headers.MediaTypeHeaderValue("text/json"));

   }
}
public class BrowserJsonFormatter : JsonMediaTypeFormatter
    {
    public BrowserJsonFormatter()
        {
        this.SupportedMediaTypes.Add(new MediaTypeHeaderValue("text/html"));
        this.SerializerSettings.Formatting = Formatting.Indented;
        }

    public override void SetDefaultContentHeaders(Type type, HttpContentHeaders headers, MediaTypeHeaderValue mediaType)
        {
        base.SetDefaultContentHeaders(type, headers, mediaType);
        headers.ContentType = new MediaTypeHeaderValue("application/json");
        }
    }

Kendo jQuery 网格数据源为空但 json return 来自服务器

Kendo jQuery grid datasource empty but json return from server

jquery

json

cross-domain

asp.net-web-api2

kendo-ui-grid