Kendo UI Grid 基本实现答案

【问题标题】：Kendo UI Grid Basic implementationKendo UI Grid 基本实现
【发布时间】：2013-02-26 04:18:48
【问题描述】：

我正在尝试实现 Grid 的基本功能，因为在编译我的项目时我收到一条错误消息，提示“需要对象”

使用以下代码行：

         $(document).ready(function() {
                $("#grid").kendoGrid({
                    dataSource: {
                        data: createRandomData(50),  //exception in this line of code
                        pageSize: 10
                    },

你能帮我理解我需要写什么来代替 createRandomData 吗？是我从中获取数据以将其放置在 Grid 上的表名还是其他名称？（顺便说一句，我使用 SQL Server 2008 作为后端并在 Visual Studio 2010 MVC4 上运行此代码）而且我也是 MVC 和 Kendo UI 的新手。

我想要实现的是使用 MVC 4 将数据从 SQL 服务器绑定到网格。

提前致谢！ :)

代码如下：

              <script>
            $(document).ready(function () {
                $("#grid").kendoGrid({
                    dataSource: {
                        data: createRandomData(50),
                        pageSize: 10
                    },
                    groupable: true,
                    sortable: true,
                    pageable: {
                        refresh: true,
                        pageSizes: true
                    },
                    columns: [{
                        field: "FirstName",
                        width: 90,
                        title: "First Name"
                    }, {
                        field: "LastName",
                        width: 90,
                        title: "Last Name"
                    }, {
                        width: 100,
                        field: "City"
                    }, {
                        field: "Title"
                    }, {
                        field: "BirthDate",
                        title: "Birth Date",
                        template: '#= kendo.toString(BirthDate,"dd MMMM yyyy") #'
                    }, {
                        width: 50,
                        field: "Age"
                    }
                    ]
                });
            });
        </script>

函数定义如下：

    function createRandomData(count) {
       var data = [],
      now = new Date();
       for (var i = 0; i < count; i++) {
        var firstName = firstNames[Math.floor(Math.random() * firstNames.length)],
        lastName = lastNames[Math.floor(Math.random() * lastNames.length)],
        city = cities[Math.floor(Math.random() * cities.length)],
        title = titles[Math.floor(Math.random() * titles.length)],
        birthDate = birthDates[Math.floor(Math.random() * birthDates.length)],
        age = now.getFullYear() - birthDate.getFullYear();

    data.push({
        Id: i + 1,
        FirstName: firstName,
        LastName: lastName,
        City: city,
        Title: title,
        BirthDate: birthDate,
        Age: age
    });
}
return data;

}

控制器是否应该返回作为计数传递的值？

    public ActionResult createRandomData()
    {
       return View();
    }

【问题讨论】：

标签： asp.net asp.net-mvc-4 kendo-ui kendo-grid

【解决方案1】：

文档中有很多关于 ASP.NET 的教程。我建议从this one 开始。如果您不熟悉从服务器返回 JSON，也有针对 starting out with services 的教程。

【讨论】：

【解决方案2】：

函数 createRandomData(50) 应该返回一个 json 对象。请同时显示函数定义..

您在网格中的列名与您返回的 json 对象不匹配

【讨论】：

你正在传递对象，不是吗.. 尝试将该数据对象转换为 json

【解决方案3】：

在服务器端，定义一个具有必要属性的类型。然后使用来自数据库的服务器端代码或使用一些随机数据填充对象数组。从控制器使用内置的 JavaScript 序列化器将数组序列化为 JSON 并作为 JsonResult 返回。例如，

public JsonResult CreateRandomData(int count){

列出人员 =

return new JsonResult() { Data = people, ContentType = "application/json", JsonRequestBehavior = JsonRequestBehavior.AllowGet };

}

内置的 JsonSerializer (System.Web.Mvc) 提供 JSON 序列化和反序列化支持。

【讨论】：