使用大 JSON 字符串填充 Kendo UI 组合框答案

【问题标题】：Populating a Kendo UI Combobox with big JSON string使用大 JSON 字符串填充 Kendo UI 组合框
【发布时间】：2012-06-13 10:34:46
【问题描述】：

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

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

谁能帮忙？

下面是我的代码的 sn-p：

<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 条记录），但仍然无法正常工作。可能是数据源的问题？

【问题讨论】：

数据量可能是个问题。您在控制台中看到任何错误吗？
@RoryMcCrossan 没有错误，只有状态为 200 OK 的 GET 请求
这很可能是由于数据的权重。您需要对请求使用某种分页方法。
@RoryMcCrossan 怎么样？在客户端，在控制器中还是在 Web 服务中？（是的，我正在使用将数据返回给控制器的 Web 服务）
服务器端 - 在 Web 服务中执行。数据太重，甚至无法在客户端进行处理。您需要一次传递数据的子集，例如。 50 条记录。然后允许用户一次请求上一个/下一个 50 个。

标签： jquery json asp.net-mvc-3 combobox kendo-ui

【解决方案1】：

数据源的 url 是否正确？如果您使用的是 mvc，则 url 应该是 /controller/view/。即：url: "/Home/Clienti/"

--编辑--

这里是一个完整的例子，项目网址：'http://localhost:52794/Home/ComboBox'

控制器：主页

视图：组合框

ComboBox 视图代码：

<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; }
}

控制器：

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);
}

【讨论】：

根据他的路线，URL实际上可以是他想要的任何东西。
@Igorrious 是正确的。我在控制器中放了一个断点，程序正在访问它，返回上面格式的json。
@ron.defreitas 和 Cosmin Bogdan Teslovan：你说得对，这就是我快速跟进示例的原因。希望它有助于解决问题。
@Igorrious：谢谢！你给了我一个提示。明天早上我会检查一下，如果它有效，我会告诉你。
@Igorrious：是的，我认为是。 Kendo dataSource 只接受数组，所以，鉴于我上面的例子..

【解决方案2】：

是的，问题在于我从控制器发送的 JSON 格式。我正在使用第 3 方网络服务（基于 ServiceStack）。在控制器中，我正在“读取”字符串（这是一个 JSON 字符串）中的 Web 响应，并进一步传递它。问题是返回的 JSON 字符串在“”之间，不知何故 dataSource 无法处理它。

因此，我的解决方案基于您上面的示例：我创建了一个模型、一个集合并返回了该集合。

结果：一切都很完美。返回的 JSON 不再介于 " " 之间，并且 dataSource 对象已正确初始化。

代码如下：

ClientiController.cs

public class ClientiController : Controller
{            
        public JsonResult Index()
        {
            StreamReader sr = null;
            string json = string.Empty;

            try
            {
                WebRequest request = WebRequest.Create("urlGoesHere");

                using (WebResponse response = request.GetResponse())
                {
                    sr = new StreamReader(response.GetResponseStream(), true);
                    json = sr.ReadToEnd();
                }
            }
            catch { return Json("", JsonRequestBehavior.AllowGet); }

            JavaScriptSerializer serializer = new JavaScriptSerializer();
            ClientiCollection collection = serializer.Deserialize<ClientiCollection>(json);

            return Json(collection, JsonRequestBehavior.AllowGet);
        }

}

Client.cs

public class Client
{
        public string ID { get; set; }
        public string RAGIONE_SOCIALE { get; set; }
}

ClientiCollection.cs

public class ClientiCollection
{
        public IEnumerable<Client> ClientiList { get; set; }
}

HTML

<input id="kendoCboClienti" />

<script type="text/javascript">
    $(document).ready(function () {
        var clientiDataSource = new kendo.data.DataSource({
            transport: {
                read: {
                    url: "/Clienti/",
                    dataType: "json"
                }
            },
            schema: {
                data: "ClientiList"
            }
        });

        $("#kendoCboClienti").kendoComboBox({
            dataTextField: "RAGIONE_SOCIALE",
            dataValueField: "ID",
            dataSource: clientiDataSource,
        });
    });
</script>

但是，我要显示约 8000 条记录，并且组合框有点慢（打开时约 1.5 秒）。我不确定是否可以在不以任何方式修改服务器的情况下以某种方式改善它的响应。

附：非常感谢，Igorrious！

【讨论】：

不客气！您可以尝试一些事情，其中之一是查看 Telerik 文档：Binding to Local or Remote Data。要探索的数据源上有 ServerPaging 和 PageSize 参数。您的网络服务正在返回客户端列表。也许在加载组合框之前添加字母 A B C D 等过滤器，将允许您仅将数据的子集绑定到组合框。如果用户选择字母“A”，则仅在组合框中显示以字母 A 开头的客户名称。祝你好运！

【解决方案3】：

如果你想提高响应时间，你可以试试这个...

$(document).ready(function () {
    var clientiDataSource = new kendo.data.DataSource({
        pageSize: 20,
        transport: {
            read: {
                url: "/Clienti/",
                dataType: "json"
            }
        },
        schema: {
            data: "ClientiList"
        }
    });

    $("#kendoCboClienti").kendoComboBox({
        dataTextField: "RAGIONE_SOCIALE",
        dataValueField: "ID",
        dataSource: clientiDataSource,
    });
});

只需将分页添加到您的数据源。我有超过 20000 行的组合，效果非常好。

【讨论】：