从apicontroller绑定kendo-ui网格

时间:2014-06-13 13:56:45

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

我正在使用Kendo-ui JQuery版本,我正在尝试从ApiController填充一个kendo-ui网格。我的网格仍然是空的......我错过了什么?

以下是我的ApiController的结果:〜/ api / Countries:

[{"Id":4,"Name":"Germany"},
 {"Id":5,"Name":"China"},
 {"Id":6,"Name":"Myanmar"}]

这是我的ApiController代码:

public class CountriesController : ApiController
{
    private DBContext db = new DBContext();

    // GET api/Countries
    [Queryable]
    public IQueryable<Country> GetCountries()
    {
        return db.Countries;
    }
}

这是我的cshtml代码:

<script type='text/javascript'>

    $(document).ready(function () {
        $("#grid").kendoGrid({
            columns: [
                { field: "Id", title: "id" },
                { field: "Name", title: "name" }
            ],
            dataSource: new kendo.data.DataSource({
                transport: {
                    read: "api/Countries"
                },
                schema: {
                    model: {
                        id: "Id",
                        fields: {
                            Id: { type: "number" },
                            Name: { type: "string" }
                        }
                    }
                },
                pageSize: 3
            }),
            pageable: true
        });
    });

</script>

感谢您的帮助。

2 个答案:

答案 0 :(得分:0)

Kendo Grid没有让Json恢复正确的格式。 请务必使用KendoMVC DataSourceRequest对象以正确的格式返回数据,以供Grid使用。

以下是一个例子:

public ActionResult Update([DataSourceRequest] DataSourceRequest request, MyViewModel data)
    {
        var result = UpdateBackend(data);
        return Json(result.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
    }

查看MVC的Kendo演示页面以获取更多示例: http://demos.telerik.com/aspnet-mvc/grid/index

答案 1 :(得分:0)

在我来自kendo数据源的API调用中,我总是必须指定它是一个json返回dataType,我认为它默认为jsonp。

dataSource: new kendo.data.DataSource({
  transport: {
    read: {
         url: "/api/Countries",
         dataType: 'json'
      }
  },
  schema: {
    model: {
      id: "Id",
      fields: {
        Id: { type: "number" },
        Name: { type: "string" }
      }
    }
  },
  pageSize: 3
}),