0

2つの主要なコンテンツ領域を持つC＃ASP.NETページ（.aspx）があります：（1）テキストフィールド（新しいアイテム）を持つフォームと（2）グリッドコントロール（アイテムのリスト）。非常に簡単に、ユーザーはフォームに入力して新しいアイテムを作成し、表示/編集/削除するアイテムのリストを表示できます。[表示]をクリックすると、ページが投稿され、フォームにアイテムデータが入力されます。

現在、それらは両方とも表示されており、（2）の上に（1）積み重ねられています。これを2つの異なるパネルに分割したいと思います。これらのパネルの表示は、ボタンやcssタブなどで切り替えることができます。

panel_1が表示されているとき、panel_2は表示されるべきではありません（その逆も同様です）。明らかに、JavaScriptを使用してこれを直接簡単に実現できます（たとえば、ボタンまたはアンカーへのjQueryクリックイベントバインディングなど）が、グリッドコントロールボタンイベント（表示/編集/削除）をバインドして正しいパネルを表示するのが面倒になる可能性があります-つまり、フォームに入力>>[アイテムの追加]>>[アイテムリストの表示]パネル（たとえば）をクリックします。ポストバック時にいくつかの状態パラメータをURLにポップし、そのデータをいくつかのローカル変数にバインドして、どのパネルを表示するかを知ることができると思いますが、もっと良い方法があると確信しています。

将来的には、3/4/5関連のコンテンツパネルを切り替えて、1つのフォームを複数のパネルに分割するか、1つのフォームとデータを表示する3つの異なる方法（リスト/グラフなど）にする必要があります。

これを行うためのクリーンなASP.NET（3.5）の方法はありますか（つまり、各コンテンツブロックをコントロールでラップし、UIをしっかりと把握します）？

ありがとう。

4

1 に答える 1

0

これにはASP.Net Ajax アコーディオンを使用できます。

ASP.Net Ajax アコーディオン:アコーディオンは、複数のペインを提供して一度に 1 つずつ表示できる Web コントロールです。これは、一度に 1 つしか展開できない複数の CollapsiblePanels を持つようなものです。Accordion は、AccordionPane Web コントロールを含む Web コントロールとして実装されます。各 AccordionPane コントロールには、ヘッダーとコンテンツのテンプレートがあります。選択されたペインを追跡して、ポストバック全体で表示されたままにします。

また、試すことができます：

jQuery UI アコーディオン:ヘッダーをクリックして、タブのように論理的なセクションに分割されたコンテンツを展開/折りたたみます。オプションで、マウスオーバーでセクションの開閉を切り替えます。

jQuery UI アコーディオン サンプル コード:

<!doctype html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>jQuery UI Accordion - Default functionality</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css" />
    <script>
    $(function() {
        $( "#accordion" ).accordion();
    });
    </script>
</head>
<body>

<div id="accordion">
    <h3>Section 1</h3>
    <div>
        <p>
        Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
        ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
        amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
        odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
        </p>
    </div>
    <h3>Section 2</h3>
    <div>
        <p>
        Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
        purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
        velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
        suscipit faucibus urna.
        </p>
    </div>
    <h3>Section 3</h3>
    <div>
        <p>
        Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
        Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
        ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
        lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
        </p>
        <ul>
            <li>List item one</li>
            <li>List item two</li>
            <li>List item three</li>
        </ul>
    </div>
    <h3>Section 4</h3>
    <div>
        <p>
        Cras dictum. Pellentesque habitant morbi tristique senectus et netus
        et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
        faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
        mauris vel est.
        </p>
        <p>
        Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
        Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
        inceptos himenaeos.
        </p>
    </div>
</div>


</body>
</html>
于 2012-12-07T14:09:25.230 に答える