アコーディオン ウィンドウの動的な追加 (C#)

作成者: Christian Wenz

PDF のダウンロード

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

概要

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

手順

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

AccordionPane ap1 = new AccordionPane();

の AccordionPane プロパティは、ウィンドウのヘッダー セクション内の ASP.NET コントロールへのアクセスを提供します。の プロパティAccordionPaneはHeaderContainer、ウィンドウ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>

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

前へ次へ