1

我有一个 MVC3 ASP.NET 项目，我在其中使用 jQuery 和 KendoUI 作为视图。我已经定义了组合框，它是一个数据源，并且我从控制器获取结果，数据源中的 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 条记录），但仍然无法正常工作。也许是数据源的问题？

4

3 回答 3

2

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

- 编辑 -

这是一个完整的示例，项目 URL：'http://localhost:52794/Home/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);
}
于 2012-06-13T14:29:02.837 回答
1

是的，问题出在我从控制器发送的 JSON 格式上。我正在使用第 3 方 Web 服务（基于ServiceStack）。在控制器中，我正在“读取”字符串（这是一个 JSON 字符串）中的 Web 响应，并将其进一步传递。问题是返回的 JSON 字符串介于“”之间，并且数据源无法处理它。

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

结果：一切都很完美。返回的 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);
        }

}

客户端.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 秒）。我不确定是否可以在不以任何方式修改服务器的情况下以某种方式改善它的响应。

PS非常感谢，Igorrious！

于 2012-06-15T10:52:01.397 回答
0

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

$(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 行的组合，效果非常好。

于 2013-08-14T17:44:08.627 回答