動態新增 Accordion 窗格 (C#)

作者 ：擷取 Wenz

下載 PDF

AJAX 控制項工具組中的 Accordion 控制項提供多個窗格，讓使用者一次顯示其中一個窗格。 面板通常會在頁面本身內宣告，但伺服器端程式碼可用來達成相同的結果。

概觀

AJAX 控制項工具組中的 Accordion 控制項提供多個窗格，讓使用者一次顯示其中一個窗格。 面板通常會在頁面本身內宣告，但伺服器端程式碼可用來達成相同的結果。

步驟

Accordion 控制項會將所有重要屬性公開給伺服器端程式碼。 此外，屬性會 Panes 授與構成 Accordion 之窗格集合的存取權。 每個窗格都有 類型 AccordionPane 。 因此，建立這類窗格會很簡單：

AccordionPane ap1 = new AccordionPane();

的 HeaderContainerAccordionPane 屬性可讓您存取窗格標頭區段內的 ASP.NET 控制項;的 ContentContainer 屬性 AccordionPane 會針對窗格的內容區段執行相同的動作。 這可讓 ASP.NET 程式碼將內容新增至窗格：

ap1.HeaderContainer.Controls.Add(new LiteralControl("Using Code"));
ap1.ContentContainer.Controls.Add(new 
    LiteralControl("Adding panes using code is really flexible."));

最後，必須將窗格 () 新增至 Panes Accordion 的集合：

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>

協定中的資料是由伺服器端程式碼動態新增， (按一下即可檢視大小完整的映射)

上一個下一個