1

我有一个 MVC3 视图，旨在为我们的客户运行报告。在允许您选择报告选项的视图中，我传递了我们客户的大列表 (~3K)。我这样渲染它：

@{Html.RenderPartial("_ClientSelector", ViewBag.Clients as IEnumerable<Client>);}

_ClientSelector 部分如下所示：

<select id="clients" class="clientList" multiple="multiple">
    @foreach (Client client in Model) {
        var prefix = client.Parent == null ? "" : String.Format("{0}-({1}) / ", client.Parent.Name, client.Parent.Id);
            <option value="@client.Id">@prefix@client.Name-(@client.Id)</option>
    }
</select>

我正在使用 jQuery 多选库把它变成一个漂亮的视觉显示。

我的问题是，是否可以压缩此列表服务器端？到目前为止，这个视图中最慢的部分是加载这个客户端列表。在chrome中使用PageSpeed，它建议压缩html以使其加载更快，这可能吗？如果这需要在它自己的控制器操作中而不是放在 ViewBag 中，我不介意这样做。我只是想看看有没有办法可以加快这个页面的速度。

编辑：

我开始玩弄你下面的模板。当我手动构建 json 时，它可以工作。但是，当我尝试使用 $.getJSON 从服务器获取它时，它永远不会触发结果。在 Chrome 中使用调试工具，我看到响应回来了，它看起来像有效的 json。你能看出这有什么问题吗？

public ActionResult ClientList() {
    var clients = reportRepository.GetClientList();
    IList<object> model = new List<object>();
    foreach (Phoenix.Models.Client c in clients) {
        var prefix = c.Parent == null ? "" : String.Format("{0}-({1}) / ", c.Parent.Name, c.Parent.Id);
        model.Add(new { value = c.Id.ToString(), text = String.Format("{0}{1}-({2})",prefix,c.Name,c.Id) });
    }
    return Json(model, JsonRequestBehavior.AllowGet);
}

在视图中：

<script type="text/javascript">
    $(function () {
        $.getJSON("/Report/ClientList", null, function (data) {
            $("#templateOptionItem").tmpl(data).appendTo("#clients");
        });
    });
</script>
<script id="templateOptionItem" type="test/html">
    <option value=\'{{= value}}\'>{{= text}}</option>
</script>
<select id="clients" class="clientList" multiple="multiple">
</select>

--这是使用 $.ajax 方法的另一次尝试，但它也不会触发结果

$.ajax({
    url: "/Report/ClientList",
    dataType: "json",
    success: function (data) {
        $("#templateOptionItem").tmpl(data).appendTo("#clients");
    }
});

这是有效的示例：

var Clients = [{ value: 1, text: "test123" },
               { value: 2, text: "123test" }]
$("#templateOptionItem").tmpl(Clients).appendTo("#clients");

经过多次调整，我终于得到了一些工作：

$.ajax({
    url: "/Report/ClientList",
    dataType: "json",
    complete: function (data) {
       $("#templateOptionItem").tmpl(JSON.parse(data.responseText)).appendTo("#clients");
    }
});

我仍然不确定为什么它不会在成功事件上触发，但是使用完整事件并在 responseText 上执行 JSON.parse 似乎已经成功了。

4

1 回答 1

2

您是否考虑过将其作为 JSON 数据发送到视图并将其绑定到客户端的模板或使用诸如knockout之类的库。

您发送的数据的大小在很大程度上增加了，因为您正在重复为每个 3k 客户端生成的相同 html。如果你在没有标记的情况下发送它，那么大小会小得多，然后你的列表项的代码只能用 json 数据的占位符发送一次。

编辑：此示例基于您使用淘汰赛的想法。

JSON：请注意，如果您使用的是 knockout，此对象将使用 ko.observable 函数进行注释，或者使用 knockout.mapping.js 可用于在整个 onject 中自动应用值

var JsonData = [ 
        { clientID : 'IDValye', Prefix : 'Some value for the prefix', Name = 'name value' } , 
        { ... } 
];

HTML：

<select id="clients" class="clientList" multiple="multiple" data-bind="template :{ name : 'optionTemplate', foreach : JsonData }">
</select>

<script type="text/html" id="optionTemplate">
    <option value="${ clientID }">${ Prefix }${ Name }-(${ clientID })</option>
</script>

您可以从他们网站上的教程中获得有关淘汰赛实施的其余详细信息。

于 2011-04-07T17:31:51.057 回答