jquery - 使用大 JSON 字符串填充 Kendo UI 组合框

Question

我有一个 MVC3 ASP.NET 项目，其中使用 jQuery 和 KendoUI 作为 View 。我已经定义了组合框、它的数据源，并且我从 Controller 获取结果，并在数据源中使用正确格式的 JSON 字符串。

以 JSON 字符串形式返回的数据约为 500kb，并且组合框未显示任何内容。它只是在右侧显示加载图标。我认为大量数据确实是一个问题......

有人可以帮忙吗？

贝娄是我的代码片段:

<input id="kendoCboClienti" />

<script type="text/javascript">
    $(document).ready(function () {
        clientiDS = new kendo.data.DataSource({
            transport: {
                read: {
                    url: "/Clienti/",
                    dataType: "json"
                }
            },
            schema: {
                model: {
                    fields: {
                        id: { type: "string" },
                        ragioneSociale: { type: "string" }
                    }
                }
            }
        });

        $("#kendoCboClienti").kendoComboBox({
            placeholder: "Sceglie il cliente",
            dataTextField: "RAGIONE_SOCIALE",
            dataValueField: "ID",
            dataSource: clientiDS
        });
    });
</script>

JSON 字符串看起来与此类似:

[  
    {ID:429,RAGIONE_SOCIALE:"AUTOTRASP.PORETTO G."},
    {ID:430,RAGIONE_SOCIALE:"P.G. JOHNNY IMPORT EXPORT"},
    {ID:431,RAGIONE_SOCIALE:"CONFARTIGIANATO TREVISO"},
    .....    
]

在 jsFiddle 中可以工作，但它非常非常慢，无响应，并且浏览器有时会因为大量数据而崩溃。

谢谢!

编辑1:我已经修改了发送到数据源的数据量(只有10条记录)，但仍然不起作用。也许是数据源的问题？

Answer 1

数据源的 URL 是否正确？如果你使用mvc，url应该是/controller/view/。即:url:“/Home/Clienti/”

--编辑--

这是一个完整的示例，项目 URL:'http://localhost:52794/Home/ComboBox'

Controller :主页

View :组合框

组合框 View 代码:

<input id="kendoCboClient" />

<script type="text/javascript">
    $(document).ready(function () {
        clientDS = new kendo.data.DataSource({
            transport: {
                read: {
                    url: "/Home/JsonData/",  //Note the URL path!
                    dataType: "json"
                }
            },
            schema: {
                model: {
                    fields: {
                        EmployeeId: { type: "number" },
                        name: { type: "string" }
                    }
                }
            }
        });

        $("#kendoCboClient").kendoComboBox({
            placeholder: "Select a name...",
            dataTextField: "Name",
            dataValueField: "EmployeeId",
            dataSource: clientDS
        });
    });
</script>

模型类:

public class Employee
{
    public int EmployeeId { get; set; }
    public string Name { get; set; }
}

Controller :

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

public JsonResult JsonData()
{
    List<Employee> list = new List<Employee>();
    Employee employee = new Employee() { EmployeeId = 1, Name = "John Smith" };
    list.Add(employee);
    employee = new Employee() { EmployeeId = 2, Name = "Ted Teller" };
    list.Add(employee);
    return Json(list, JsonRequestBehavior.AllowGet);
}

-- 编辑--

另一种返回json的方式:

public ActionResult JsonData()
{
    List<Employee> list = new List<Employee>();
    Employee employee = new Employee() { EmployeeId = 1, Name = "John Smith" };
    list.Add(employee);
    employee = new Employee() { EmployeeId = 2, Name = "Ted Teller" };
    list.Add(employee);

    JavaScriptSerializer serializer = new JavaScriptSerializer();
    var output = serializer.Serialize(list);

    return Content(output); 
}

-- 编辑--

最后一个简单的 json 字符串示例:

public ActionResult JsonData()
{
    String employeesJson = "[{\"EmployeeId\":1,\"Name\":\"John Smith\"},{\"EmployeeId\":2,\"Name\":\"Ted Teller\"}]";
    return Content(employeesJson);
}