0

ユーザーがログオンしてデータのセットを登録できる ASP.NET サイトを維持しています (統計目的で)。1 人のユーザーが一連のユニットのデータを登録し、これらのユニットごとに一連のフォームに入力します (各フォームにはいくつかのフィールドがありますが、ここでは問題ではありません)。シナリオの 1 つは、ユーザーが 12 のユニットを持っていて、これらのユニットのそれぞれに 25 のフォームがあり、合計 300 のフォームがあることを意味します。

これらのデータを登録するための ASP.NET ページは、次のように作成されます。各フォームは、AjaxControlToolkit CollapsiblePanelExtender を使用して折りたたむことができるパネル内にあり、ユニット内のすべてのフォームは、折りたたむこともできる別のパネル内にあります。その結果、ユニットが上部にあるツリー ビューのような構造ができ、各ユニットの下に一連のフォームを展開でき、さらに各フォームを展開してデータを入力できます (ページはすべてのパネルが折りたたまれた状態で読み込まれます)。デフォルトで）。

ページは完全に動的に生成され (フォームをデータベースに追加できるため)、CollapsiblePanelExtenders を生成するために、次のコードがあります。

private CollapsiblePanelExtender GenerateCollapsiblePanelExtender(string id, Panel headerPanel, Panel contentPanel)
{
    CollapsiblePanelExtender collapsiblePanel = new CollapsiblePanelExtender();

    collapsiblePanel.ID = id + ID_COLLAPSIBLE_PANEL_POSTFIX;
    collapsiblePanel.TargetControlID = contentPanel.ID;
    collapsiblePanel.CollapseControlID = headerPanel.ID;
    collapsiblePanel.ExpandControlID = headerPanel.ID;
    collapsiblePanel.Collapsed = true;
    collapsiblePanel.BehaviorID = collapsiblePanel.ID + ID_BEHAVIOUR_POSTFIX;

    return collapsiblePanel;
}

1 人のユーザーがそれぞれ 25 のフォームを持つ 12 のユニットを持つ場合、これは合計 312 の CollapsiblePanelExtenders を意味します。私が言ったように、それらはすべてデフォルトで折りたたまれるように設定されていますが、ここに問題があります:

ページが読み込まれると、それらはすべて展開されているように見え、ブラウザは「それらを折りたたみ始めます」。ただし、これには非常に長い時間がかかります (Firefox では、スクリプトが応答しないという警告さえ表示されます。IE と Chrome では、警告は表示されずに永遠にかかります)。すべての「折りたたみ」が完了すると、単一のパネルをスムーズに開閉できますが、ユーザーは初期ロードが非常に遅いことに不満を持っています。

だから私の質問は簡単です: ロードがスムーズになるようにこれを最適化する方法はありますか? たとえば、最初に各 CollapsiblePanelExtender のヘッダー パネルのみをロードしてから、何らかの方法でコンテンツ パネルを非同期にロードすることは可能ですか?

最後に 1 つの説明:
ページのデザインを単純に変更して 1 つのユニットのみを含め、コンテンツのサイズを大幅に縮小できることはわかっていますが、これは避けたいと考えています (ユーザーはすべてを 1 つのページに収める方法を好みます)。また、ページのロジックにかなり大きな変更が加えられることも意味します (はい、わかっています。その時点ではコード ベースが貧弱です)。

4

1 に答える 1

2

他の場所についてさらに尋ねた後、私は最終的にこの問題を解決することができました。解決策は、CollapsiblePanelExtenders を完全にスキップし、代わりに jQuery を使用して折りたたみ/拡張を処理することでした。

私の構造では、すべてのヘッダー パネルが CSS クラス HeaderPanel を使用し、すべてのコンテンツ パネルが CSS クラス ContentPanel を使用します (これらはすべてデフォルトで非表示になっています)。次に、次のスクリプトを使用して、すべての折りたたみ/展開ロジックを処理できます。

<script language="javascript">
    $(document).ready(function() {
        $("div.HeaderPanel").toggle(
        function() {
            $(this).next("div.ContentPanel").show("slow");
        },
        function() {
            $(this).next("div.ContentPanel").hide("slow");
        });
    });
</script>

ソリューションは非常にシンプルで、魅力的に機能します。折りたたみ/拡張は、CollapsiblePanelExtenders を使用したときよりもはるかにスムーズで優れており、ページの読み込みも非常に高速です:)

于 2010-04-29T08:25:21.430 に答える