【ASP.NET コントロール】ASP.NET AJAX Control Toolkit　(CollapsiblePanel編)

ASP.NET 
 * 折りたたみ機能（開閉可能なパネル）を有するコントロールは、以下の通り。
　【1】CollapsiblePanelコントロール
http://blogs.yahoo.co.jp/dk521123/26999505.html
　【2】Accordionコントロール
http://blogs.yahoo.co.jp/dk521123/27014486.html

特徴

 * どちらもポストバック対応(詳細は以下の仕様を参照）
 * どちらもコツさえつかめば、簡単に実装できる!!

差異

 * 大きな差異は、以下の通り。
  + CollapsiblePanelコントロールが『既存のサーバ・コントロールを拡張するExtenderコントロール』である
  + Accordionコントロールは『単体で動作するコントロール』である
 * 動きの差異は、実際にデモを動かしてもらえば分かる
 * 詳細は、以下のサイトの「CollapsiblePanel／Accordionコントロールの違い」を参照のこと。
http://www.atmarkit.co.jp/fdotnet/dotnettips/595aspajaxcollapspnl/aspajaxcollapspnl.html

【1】CollapsiblePanelコントロール

デモ

http://www.asp.net/ajaxlibrary/AjaxControlToolkitSampleSite/CollapsiblePanel/CollapsiblePanel.aspx

仕様

http://msdn.microsoft.com/ja-jp/asp.net/ff713707.aspx

デモンストレーション（英語）

 * 実際にサンプルを作るところをみせてくれる。
http://www.asp.net/ajax/videos/how-do-i-use-the-aspnet-ajax-collapsable-panel-extender

サンプル

 * 意外と簡単にできる。

デザイン

<html xmlns="">http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:Panel ID="Panel1" runat="server" CssClass="collapsePanelHeader">
            <asp:Image ID="Image1" runat="server" />
            <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
        </asp:Panel>
        <asp:Panel ID="Panel2" runat="server" CssClass="collapsePanel">
            ID :
            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
            <br />
            Name :
            <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
        </asp:Panel>
        <asp:Button ID="Button1" runat="server" Text="Button" />
        <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
        <br />
        <asp:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="server" 
            CollapseControlID="Panel1" Collapsed="True" 
            CollapsedImage="~/Images/collapse.jpg" ExpandControlID="Panel1" 
            ExpandedImage="~/Images/expand.jpg" ImageControlID="Image1" TargetControlID="Panel2" 
            TextLabelID="Label1">
        </asp:CollapsiblePanelExtender>
    </div>
    </form>
</body>
</html>

コードビハインド（本質じゃない）

Protected Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
    Me.Label2.Text = "Result : " & Me.TextBox1.Text & " " & Me.TextBox2.Text
End Sub

参考文献

http://www.atmarkit.co.jp/fdotnet/dotnettips/595aspajaxcollapspnl/aspajaxcollapspnl.html

使用上の注意

http://msdn.microsoft.com/ja-jp/asp.net/ff713707.aspx
より、抜粋。

注: CollapsiblePanel エクステンダーは、標準的な CSS ボックス モデルの使用を前提としています。Internet Explorer の旧バージョンでは、このモデルが完全にはサポートされていませんでした。したがって、Internet Explorer の基準に準拠したモードでページをレンダリングするよう指定するには、!DOCTYPE 宣言 (このページの最上部を参照、既定で新しい ASP.NET ページに有効) を使用します。

参考文献

http://devadjust.exblog.jp/4941631/

補足：jQuery版

http://asp35.com/Samples/090705VB-1.aspx
http://asp35.com/Samples/090705VB-2.aspx