MVC3 - 查看包中的壓縮模型

Question

我有一個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({ 
    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"); 

Afte [R太大的調整，我終於得到了一些工作：

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

我仍然不知道爲什麼它不會在火上的成功事件，但使用完整的事件，並在responseText的做JSON.parse似乎已經做到了。

Answer 1

你有沒有想過把它作爲JSON數據發送到視圖並將它綁定到template in the client side或使用像knockout這樣的庫。

您發送的數據大小增加很大，因爲您重複的是爲每個3k客戶端生成的相同html。如果你發送的時候沒有加標記，那麼尺寸會小得多，然後你的列表項的代碼只能發送一次，並且只有佔位符爲json數據。

編輯：這個例子是基於你正在使用淘汰賽的想法。

JSON：請注意，如果您使用的是淘汰賽，此對象將使用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> 

你可以得到詳細的其餘部分從在其網站上的教程執行淘汰賽。