共用方式為

資料繫結至 Accordion (C#)

  • 發行項

作者 ：擷取 Wenz

下載 PDF

AJAX 控制件工具組中的 Accordion 控制項提供多個窗格，讓使用者一次顯示其中一個窗格。 面板通常會在頁面本身內宣告，但系結至數據源可提供更大的彈性。

概觀

AJAX 控制件工具組中的 Accordion 控制項提供多個窗格，讓使用者一次顯示其中一個窗格。 面板通常會在頁面本身內宣告，但系結至數據源可提供更大的彈性。

步驟

首先，需要數據源。 此範例使用 AdventureWorks 資料庫和 Microsoft SQL Server 2005 Express Edition。 資料庫是 Visual Studio 安裝 (選擇性的一部分，包括 express edition) ，也可以在 下 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資料庫檔案。

在此範例中，我們假設呼叫 SQL Server 2005 Express Edition SQLEXPRESS 的實例，並位於與網頁伺服器相同的計算機上;這也是預設的設定。 如果您的設定不同，您必須調整資料庫的連線資訊。

若要啟用 ASP.NET AJAX 和 Control Toolkit 的功能，控件 ScriptManager 必須放在頁面上 (，但在 <form> 元素內) ：

<asp:ScriptManager ID="asm" runat="server"/>

然後，將數據源新增至頁面。 為了使用有限的數據量，我們只選取 AdventureWorks 資料庫的 Vendor 數據表中的前五個專案。 如果您使用 Visual Studio 助理 來建立數據源，請注意目前版本中的 Bug 不會在數據表名稱前面加上 (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]" />

請記住資料源的名稱 (識別碼) 。 然後，這個非常識別必須用於 DataSourceID Accordion 控件的 屬性：

<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>

若要結束此範例，您必須在其屬性 HeaderCssClassContentCssClass 和) 中定義在 Accordion 控件中參考的兩個 CSS 類別 (。 將下列標記放在 <head> 頁面的 區段中：

<style type="text/css"> 
 .header {background-color: blue;} 
 .content {border: solid;}
</style>

協議中的數據直接來自數據源

協議中的數據直接從數據源 (按兩下即可檢視完整大小的影像)

下一步