Kendo jQuery 网格数据源为空，但 json 从服务器返回

Question

所以几天来我一直在努力解决这个问题。在开发环境中工作，我有一个在 VM 上运行的测试 WebAPI 站点。它可以通过网络访问（使用 un/pw）并返回 JSON。我正在使用 jsonp，因为它抱怨跨域，因为它位于不同的子域上。它正在返回 XML，但我使用 this reference 来获取 JSON 输出。我还使用 Telerik 的网站来查找我能找到的所有参考资料。 telerik jquery grid source

[{ “身份证”：2， "进程名": "#######", “密码”： ”＃＃＃＃＃＃＃＃”， “用户名”： ”＃＃＃＃＃＃＃＃” }, { “身份证”：3， "进程名": "#######", “密码”： ”＃＃＃＃＃＃＃”， “用户名”： ”＃＃＃＃＃＃＃” },{ "id": 4, "进程名": "#######", “密码”： ”＃＃＃＃＃＃＃”， “用户名”： ”＃＃＃＃＃＃＃” }, { "id": 5, "进程名": "#######", “密码”： ”＃＃＃＃＃＃＃”， “用户名”： ”＃＃＃＃＃＃＃” }]

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

In 是最近的尝试，它确实正确构建了网格显示，但当然没有数据。这个错误是从 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

所以经过更多的挖掘和挠头，我终于偶然发现了一个修复/解决方法。

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

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

通过安装 nuget 包并将GlobalConfiguration.Configuration.AddJsonpFormatter(); 添加到我的 Global.asax.cs 并将此代码添加到我的 WebApiConfig.cs 我现在能够请求 text/xml、text/json 和/或 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");
        }
    }