以動態方式新增一個 Accordion 窗格 (C#)
AJAX Control Toolkit 中的 Accordion 控制項提供多個窗格，並讓使用者一次顯示其中一個。 面板通常會在頁面本身內宣告，但可使用伺服器端程式碼來達到相同的結果。
概觀
AJAX Control Toolkit 中的 Accordion 控制項提供多個窗格，並讓使用者一次顯示其中一個。 面板通常會在頁面本身內宣告，但可使用伺服器端程式碼來達到相同的結果。
步驟
Accordion 控制項會將所有重要的屬性公開給伺服器端程式碼。 除此之外，Panes 屬性會將存取權授與組成 Accordion 的窗格集合。 每個窗格都有類型 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."));
最後，必須將窗格新增至 Accordion 的 Panes 集合：
acc1.Panes.Add(ap1);
以下是將兩個窗格新增至 Accordion 控制項的完整伺服器端程式碼：
<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>
唯一遺漏的元素是 Accordion 本身，這取決於 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>
若要完成範例，Accordion 控制項中所參考的兩個 CSS 類別會提供瀏覽器樣式資訊：
<style type="text/css">
.header {background-color: blue;}
.content {border: solid;}
</style>
Accordion 中的資料是由伺服器端程式碼動態新增 (點按以檢視完整大小的影像)
