アコーディオン ペインを動的に追加する (C#)

作成者: Christian Wenz

PDF のダウンロード

AJAX Control Toolkit のアコーディオン コントロールには複数のペインが用意されており、ユーザーは一度に 1 つのペインを表示できます。 通常、パネルはページ自体内で宣言されますが、サーバー側コードを使用して同じ結果を得ることができます。

概要

AJAX Control Toolkit のアコーディオン コントロールには複数のペインが用意されており、ユーザーは一度に 1 つのペインを表示できます。 通常、パネルはページ自体内で宣言されますが、サーバー側コードを使用して同じ結果を得ることができます。

手順

アコーディオン コントロールは、すべての重要なプロパティをサーバー側のコードに公開します。 特に、Panes プロパティは、アコーディオンを構成するペインのコレクションへのアクセスを許可します。 すべてのペインの型は AccordionPane です。 そのため、次のようなペインを作成するのは簡単です。

AccordionPane ap1 = new AccordionPane();

AccordionPane の HeaderContainer プロパティは、ペインのヘッダー セクション内の ASP.NET コントロールへのアクセスを提供します。AccordionPane の ContentContainer プロパティは、ペインのコンテンツ セクションに対して同じ操作を行います。 これにより、ASP.NET コードがペインにコンテンツを追加できるようになります。

ap1.HeaderContainer.Controls.Add(new LiteralControl("Using Code"));
ap1.ContentContainer.Controls.Add(new 
    LiteralControl("Adding panes using code is really flexible."));

最後に、ペインをアコーディオンの Panes コレクションに追加する必要があります。

acc1.Panes.Add(ap1);

アコーディオン コントロールに 2 つのペインを追加する完全なサーバー側コードを次に示します。

<script runat="server">
void Page_Load() 
{
 if (!Page.IsPostBack)
 {
 AccordionPane ap1 = new AccordionPane();
 ap1.HeaderContainer.Controls.Add(new LiteralControl("Using Markup"));
 ap1.ContentContainer.Controls.Add(new 
 LiteralControl("Adding panes using markup is really simple."));
 AccordionPane ap2 = new AccordionPane();
 ap2.HeaderContainer.Controls.Add(new LiteralControl("Using Code"));
 ap2.ContentContainer.Controls.Add(new 
 LiteralControl("Adding panes using code is really flexible."));
 acc1.Panes.Add(ap1);
 acc1.Panes.Add(ap2);
 }
}
</script>

唯一不足している要素はアコーディオン自体です。これは、ASP.NET ScriptManager コントロールの存在に依存します。

<form id="form1" runat="server">
 <asp:ScriptManager ID="asm" runat="server" />
 <div>
 <ajaxToolkit:Accordion ID="acc1" runat="server" 
 HeaderCssClass="header" ContentCssClass="content" 
 Width="300px" FadeTransitions="true">
 </ajaxToolkit:Accordion>
 </div>
</form>

この例を完了するために、アコーディオン コントロールで参照される 2 つの CSS クラスは、ブラウザーのスタイル情報を提供します。

<style type="text/css">
 .header {background-color: blue;}
 .content {border: solid;}
</style>

アコーディオン内のデータは、サーバー側のコードによって動的に追加されました (クリックしてフルサイズの画像を表示します)