今回は、AccordionコントロールにAccordionPaneを動的に追加する方法を紹介します。
下記は、動的にAccordionPaneを追加する際に必要な最低限のソースです。
（<Pane>も<AccordionPane>も必要ありません。）
<%@ Page Language="VB" AutoEventWireup="true" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
<title>Accordionテスト4</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div>
<ajaxToolkit:Accordion ID="Accordion1" runat="server"
HeaderCssClass="accordionHeader"
ContentCssClass="accordionContent">
</ajaxToolkit:Accordion>
</div>
</form>
</body>
</html>
次に動的にAccordionPaneを追加する方法ですが
Dim ap As New AjaxControlToolkit.AccordionPane
のようにしてAccordionPaneのインスタンスを作成します。
次に
HeaderContainer.Controls.Add
ContentContainer.Controls.Add
でヘッダーとコンテンツを作成し、Accordionコントロールのペインに追加します。
下記がそのコードです。
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
For I As Integer = 1 To 3
Dim ap As New AjaxControlToolkit.AccordionPane
ap.HeaderContainer.Controls.Add(New LiteralControl("ヘッダー" & I.ToString()))
ap.ContentContainer.Controls.Add(New LiteralControl("コンテンツ" & I.ToString()))
Me.Accordion1.Panes.Add(ap)
Next
End Sub
実行した結果は下記の通りです。
次回はAccordionコントロールにデータベースを連結する方法を紹介します。