資料繫結至 Accordion (C#)
AJAX Control Toolkit 中的 Accordion 控制項提供多個窗格，並讓使用者一次顯示其中一個。 面板通常會在頁面本身內宣告，但繫結至資料來源可提供更大的彈性。
概觀
AJAX Control Toolkit 中的 Accordion 控制項提供多個窗格，並讓使用者一次顯示其中一個。 面板通常會在頁面本身內宣告，但繫結至資料來源可提供更大的彈性。
步驟
首先，需要資料來源。 此範例會使用 AdventureWorks 資料庫和 Microsoft SQL Server 2005 Express Edition。 資料庫是 Visual Studio 安裝 (包括快速版本) 的選擇性部分，也可做為 https://go.microsoft.com/fwlink/?LinkId=64064 下的個別下載。 AdventureWorks 資料庫是 SQL Server 2005 範例和範例資料庫的一部分 (於 https://www.microsoft.com/download/details.aspx?id=10679 下載)。 設定資料庫最簡單的方式，是使用 Microsoft SQL Server Management Studio (/sql/ssms/download-sql-server-management-studio-ssms) 並附加 AdventureWorks.mdf 資料庫檔案。
在此範例中，我們假設會呼叫 SQLEXPRESS SQL Server 2005 Express Edition 的執行個體，並位於與網頁伺服器相同的機器上；這也是預設設定。 如果您的設定不同，您必須調整資料庫的連線資訊。
若要啟用 ASP.NET AJAX 和 Control Toolkit 的功能，ScriptManager 控制項必須放在頁面上的任何位置 (但在 <form> 元素內)：
<asp:ScriptManager ID="asm" runat="server"/>
然後，將資料來源新增至頁面。 為了使用有限的資料量，我們只選取 AdventureWorks 資料庫的 Vendor 資料表中的前五個項目。 如果您使用 Visual Studio 助理來建立資料來源，請注意目前版本中有版本錯誤，即不會在資料表名稱 (Vendor) 前面加上 Purchasing。 以下標記顯示了正確的語法：
<asp:SqlDataSource ID="sds1" runat="server" ConnectionString="Data
Source=(local)\SQLEXPRESS;Initial Catalog=AdventureWorks;Integrated Security=True"
ProviderName="System.Data.SqlClient" SelectCommand="SELECT TOP 5
[VendorID], [Name] FROM [Purchasing].[Vendor]" />
記得資料來源的名稱 (ID)。 然後，這個獨特的識別必須用於 Accordion 控制項的 DataSourceID 屬性：
<ajaxToolkit:Accordion ID="acc1" runat="server"
HeaderCssClass="header" ContentCssClass="content"Width="300px"
DataSourceID="sds1" FadeTransitions="true">
在 Accordion 控制項內，您可以為控制項的各個部分提供範本，包括標頭 (<HeaderTemplate>) 和內容 (<ContentTemplate>)。 在這些元素內，只要使用 DataBinder.Eval() 方法，從資料來源輸出資料：
<HeaderTemplate><b>Vendor #<%#DataBinder.Eval(Container.DataItem, "VendorID")%></b>
</HeaderTemplate>
<ContentTemplate><%#DataBinder.Eval(Container.DataItem, "Name")%></ContentTemplate>
</ajaxToolkit:Accordion>
載入頁面時，資料來源必須繫結至與這個伺服器端程式碼的摺疊面板：
<script runat="server">
void Page_Load()
{
acc1.DataBind();
}
</script>
若要結束此範例，您必須定義 Accordion 控制項中參考的兩個 CSS 類別 (在其屬性 HeaderCssClass 和 ContentCssClass中)。 將下列標記放在頁面的 <head> 區段中：
<style type="text/css">
.header {background-color: blue;}
.content {border: solid;}
</style>
摺疊面板中的資料直接來自資料來源 (點按以檢視完整大小的影像)
