数据绑定到 Accordion (VB)

  • 项目

作者 ：Christian Wenz

下载 PDF

AJAX 控件工具包中的可折叠控件提供了多个窗格，并允许用户一次显示其中一个窗格。 面板通常在页面本身内声明，但绑定到数据源可提供更大的灵活性。

概述

AJAX 控件工具包中的可折叠控件提供了多个窗格，并允许用户一次显示其中一个窗格。 面板通常在页面本身内声明，但绑定到数据源可提供更大的灵活性。

步骤

首先，需要数据源。 此示例使用 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，并且驻留在与 Web 服务器相同的计算机上;这也是默认设置。 如果设置不同，则必须调整数据库的连接信息。

若要激活 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]" />

请记住数据源的名称 (ID) 。 然后，必须在可折叠控件的 属性中 DataSourceID 使用此标识：

<ajaxToolkit:Accordion ID="acc1" runat="server"
 HeaderCssClass="header" ContentCssClass="content"Width="300px" 
 DataSourceID="sds1" FadeTransitions="true">

在可折叠控件中，可以为控件的各个部分提供模板，包括标头 (<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"> 
 Sub Page_Load() 
 acc1.DataBind()
 End Sub 
</script>

若要结束此示例，需要定义两个 CSS 类，这些类在 Accordion 控件 (其属性 HeaderCssClass 和 ContentCssClass) 中引用。 将以下标记放在 <head> 页面的 部分中：

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

可折叠项中的数据直接来自数据源

可折叠项中的数据直接来自数据源 (单击以查看全尺寸图像)

上一页下一页