MVC3 - модель сжатия в viewbag - PullRequest
Новая
       6

MVC3 - модель сжатия в viewbag

1 голос
/ 07 апреля 2011

У меня есть представление 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, чтобы превратить это в приятное визуальное отображение.

Мой вопрос: возможно ли сжать этот список на стороне сервера?Безусловно, самая медленная часть этого представления загружает этот список клиентов.Используя PageSpeed ​​в Chrome, он предлагает сжать 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");
    }
});

I 'Я до сих пор не уверен, почему он не сработает при успешном событии, но использование события complete и выполнение JSON.parse для responseText, похоже, добились цели.

1 Ответ

2 голосов
/ 07 апреля 2011

Задумывались ли вы о том, чтобы отправить их в представление в виде данных JSON и связать их с шаблоном на стороне клиента или использовать библиотеку, подобную knockout .

Размер данных, которые вы отправляете, значительно увеличивается, потому что вы повторяете тот же HTML, который вы генерируете для каждого из клиентов 3k. Если вы отправите это сообщение без разметки, размер будет намного меньше, и тогда код для вашего элемента списка может быть отправлен только один раз с заполнителями для данных JSON.

РЕДАКТИРОВАТЬ: Этот пример основан на идее, что вы используете нокаут.

JSON: имейте в виду, что если вы используете knockout, этот объект будет аннотирован функциями ko.observable или использование knockout.mapping.js может использоваться для автоматического применения значений ко всему объекту 

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>

Остальные подробности по реализации нокаута вы можете найти в руководствах на их сайте.

...