Kendo ASP.NET MVC Grid和WebAPI - 数据不会出现在网格中

时间:2013-08-21 20:52:34

标签: asp.net-web-api kendo-ui response kendo-grid kendo-asp.net-mvc

我有一个带有HttpGet的APIController,它返回这个JSON响应:

[{"Customer":"AAAA","Office":"Off1"},{"Customer":"AAAA","Office":"Off2"}]

这是托管在远程服务器上的。

我正在测试我的本地客户端,用这个连接到此服务器:

<div class="k-content">
    <div id="Grid"></div>
</div>

<script type="text/javascript">
var dataSource = new kendo.data.DataSource({
    transport: {
        read: {
            url: "http://<remoteserver>/<apicontroller>/<actionMethod>",
            dataType: "json",
            data: { customerFilter: "AAAA", topFilter: "10" }
        }
    },
   schema: {
        model: {
            Customer: "Customer",
            Office: "Office"
        }
   }
});

$(document).ready(function () {
        $("#Grid").kendoGrid({
            dataSource: dataSource,
            height: 400,
            columns: [
                { field: "Customer" },
                { field: "Office" }
            ]
        });
    });
</script>

检查提琴手,我得到上面显示的响应。但是,网格是空的。 如果我将数据硬编码到数据源中,如下所示,网格会填充,所以看起来,即使收到响应,网格也不知道如何解析它。

var dataSource = new kendo.data.DataSource({
        data:
          [{"Customer":"AAAA","Office":"Off1"},{"Customer":"AAAA","Office":"Off2"}],
        schema: {
            model: {
                Customer: "Customer",
                Office: "Office"
            }
        }

任何人都有一些想法可能是什么问题?

感谢。

2 个答案:

答案 0 :(得分:0)

您的数据源配置不正确。 Kendo UI文档很难遵循,但这就是您需要定义数据源的方法:

var dataSource = new kendo.data.DataSource({
  transport: {
    read: {
      url: "http://<remoteserver>/<apicontroller>/<actionMethod>",
      dataType: "json",
      data: { customerFilter: "AAAA", topFilter: "10" }
    }
  },
  schema: {
    model: {
      fields: {
        Customer: {},
        Office: {}
      }
    }
  }
};

答案 1 :(得分:0)

无需提及整个网址。你也可以指定uri。

示例:

    var uri = 'api/products';      
  var ds = new kendo.data.DataSource({
      transport: {
          read: {
              url:uri,
              dataType: "json"
          }
          }
   });