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データとしてビューに送信し、クライアント側のテンプレートにバインドするか、ノックアウトなどのライブラリを使用することを考えましたか。

送信するデータのサイズは、3kクライアントごとに生成しているのと同じhtmlを繰り返しているため、大幅に増加します。マークアップなしで送信すると、サイズがはるかに小さくなり、リストアイテムのコードはjsonデータのプレースホルダーを使用して1回だけ送信できます。

編集：この例は、ノックアウトを使用しているという考えに基づいています。

JSON：ノックアウトを使用している場合は、このオブジェクトに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>

ノックアウトの実装に関する残りの詳細は、彼らのサイトのチュートリアルから入手できます。

于 2011-04-07T17:31:51.057 に答える