ASP.NET2.0AJAXで折りたたみ可能なパネルを作成する場合、CollapsiblePanelExtenderを利用します。
複数の情報を個別に表示したい場合などは、Accordionコントロールも用意されていますがAccordionは複数の項目の一つを展開する事ができますが、同時に複数の項目を展開する事ができません。
Accordingの動作はAccordion Demonstrationで確認できます。
このサンプルではRepeaterコントロールを利用して複数のCollapsiblePanelExtenderを作成します。
このサンプルの利用目的はQ&Aリストのように親子関係の情報を表示する場合などでしょうかね。
以下が完成したリストです。項目は２つしかないですが、サーバサイドでアイテムを作成しています。
実装手順は次の通りです。
- Repeaterコントロールを配置し、HeaderTemplate,ItemTemplate,FooterTemplateを設定する。（詳細は後で説明）
- 画面のLoad処理にてRepeaterコントロールのDataSourceを設定し、DataBindします。
- RepeaterコントロールのItemDataBoundイベントにてRepeaterコントロールのItemTemplateにて設定したコントロールに情報を設定する。
以上の手順で完了します。今回はRepeaterコントロールのDataSourceにCollasibleItemというクラスを作成していますが、勿論DBの情報を設定する事もできます。
詳細な作成手順は以下となります。
Repeaterコントロールの配置
<asp:Repeater ID="rptrCollasible" runat="server" OnItemDataBound="rptrCollasible_ItemDataBound" >
<HeaderTemplate>
<!--Tableの開始タグを設定-->
<table>
</HeaderTemplate>
<ItemTemplate>
<!--Tableの行要素を設定（リストのタイトル部としてHyperLinkコントロールを配置）-->
<tr>
<td>
<asp:HyperLink ID="hyperLinkTitle" runat="server" CssClass="CollasibleTitle"></asp:HyperLink>
</td>
</tr>
<!--Tableの行要素を設定（リストの子要素と展開されるエリア）-->
<tr>
<td>
<asp:Panel ID="pnlChild" runat="server" Height="0" CssClass="CollasiblePanel">
<!--↓div要素をサーバコントロールとして配置（このエリアに子要素の情報が設定されます）-->
<div id="childItem" runat="server" class="CollasibleItemArea"></div>
</asp:Panel>
</td>
</tr>
<!--CollapsiblePanelExtenderを配置し、TargetとしてpnlChildを、展開・折りたたみのトリガーとしてhyperLinkTitleを設定-->
<cc1:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="server"
TargetControlID="pnlChild"
ExpandControlID="hyperLinkTitle"
CollapseControlID="hyperLinkTitle"
CollapsedSize=0
Collapsed="true">
</cc1:CollapsiblePanelExtender>
</ItemTemplate>
<FooterTemplate>
<!--Tableの終了タグを設定-->
</table>
</FooterTemplate>
</asp:Repeater>
次にLoad処理とCollasibleItemクラスを記します。
Load処理とリストのアイテム情報を格納するCollasibleItemクラス
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
//Collasibleリストを作成する
List<CollasibleItem> itemList = new List<CollasibleItem>();
itemList.Add(new CollasibleItem("折りたたみリストのタイトル１","折りたたみリストアイテム１の情報"));
itemList.Add(new CollasibleItem("折りたたみリストのタイトル２", "アイテムの表示領域はHtmlGenericControl(divをサーバコントロール化したもの)を利用している為、<font color='red'>このように</font>HTMLタグ（fontタグ）も利用できます。"));
//Repeaterにバインドする。
this.rptrCollasible.DataSource = itemList;
this.rptrCollasible.DataBind();
}
}
//リストのアイテム情報を格納するクラス
class CollasibleItem
{
string _title = "";
string _itemInfo = "";
public CollasibleItem(string title,string itemInfo)
{
this._title = title;
this._itemInfo = itemInfo;
}
public string Title
{
get
{
return this._title;
}
}
public string ItemInfo
{
get
{
return this._itemInfo;
}
}
}
最後にRepeaterコントロールのItemDataBound処理を記します。
この処理でリストの各項目にDataSourceの情報を個別に設定します。
RepeaterコントロールのItemDataBound処理
protected void rptrCollasible_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
{
CollasibleItem item = e.Item.DataItem as CollasibleItem;
//コントロールを取得
HyperLink titleLink = e.Item.FindControl("hyperLinkTitle") as HyperLink;
HtmlGenericControl childItemDiv = e.Item.FindControl("childItem") as HtmlGenericControl;
LinkButton lnkbtnTitle = e.Item.FindControl("lnkbtnTitle") as LinkButton;
//コントロールに情報を設定
titleLink.Text = item.Title;
//aタグのスタイルを設定したいので、ダミーのURLを設定し、クリック時のイベントを発生しないようにする。
titleLink.NavigateUrl = "~/";
titleLink.Attributes.Add("onclick", "return false;");
childItemDiv.InnerHtml = item.ItemInfo;
}
}
このサンプルで利用したスタイルシートの設定は以下の通りです。
スタイルシート設定
.CollasibleTitle
{
color:#cc3300;
}
.CollasibleTitle:hover
{
color:#ffffff;
text-decoration:none;
background-color:#ff6633;
}
.CollasibleItemArea
{
width:500px;
overflow:hidden;
background:#ffffff;
border:solid 1px gray;
margin:0 0 0 10px;
padding:5px;
}
.CollasiblePanel
{
overflow:hidden;
}