Ajax Control Toolkit使用实例 （2） Accordion

Accordion控件简介

Accordion控件可以让你同时展示多个可折叠的数据面板，但同一时刻只能有一个被展开。Accordion控件包含了多个AccordionPane控件来实现其功能，每个AccordionPane都有独立的Header和Content数据域。我们跟踪被选中面板的状态并通过回发来控制其是否展开显示。

如何将Ajax Control Tookit添加到设计模式下的工具箱以及如何获取此控件相关的帮助信息，请参见上一篇文章Ajax Control Toolkit使用实例(1) AutoCompleteExtender，这里不再赘述。

Accordion控件的使用

有了前一篇文章作铺垫，后续的操作就变得很简单了。

1.在Web.Config中注册控件集；

在<system.web>结点下添加<pages>配置节：

<pages>
  <controls>
    <add tagPrefix="asp" assembly="AjaxControlToolkit" namespace="AjaxControlToolkit"/>
  </controls>
</pages>

当然你也可以在单个页面使用@Register指令进行控件注册，如果使用此方式，那么你需要在每个调用Ajax控件的页面都进行控件注册。

2.添加ToolkitScriptManager控件；

3.添加SqlDataSource控件并作相应的配置使其充当数据源，以便进行数据绑定；

4.添加Accordion控件，进行数据绑定，并对绑定模板进行样式设置等。

为了能让绑定项看起来美观一些，我们可以对面板的头和内容模板的样式进行控制，下面是我在示例中使用的样式：

<style type="text/css">
    .accordionHeader
    {
        background-color: #537368;
        border: 1px solid #537368;
        color: white;
        cursor: pointer;
        font-family: Arial,Sans-Serif;
        font-size: 12px;
        font-weight: bold;
        margin-top: 5px;
        padding: 5px;
    }

    .accordionHeaderSelected
    {
        background-color: #65867B;
        border: 1px solid #2F4F4F;
        color: white;
        cursor: pointer;
        font-family: Arial,Sans-Serif;
        font-size: 12px;
        font-weight: bold;
        margin-top: 5px;
        padding: 5px;
    }

    .accordionContent
    {
        -moz-border-bottom-colors: none;
        -moz-border-image: none;
        -moz-border-left-colors: none;
        -moz-border-right-colors: none;
        -moz-border-top-colors: none;
        background-color: #D3DEEF;
        border-color: -moz-use-text-color #2F4F4F #2F4F4F;
        border-right: 1px dashed #2F4F4F;
        border-style: none dashed dashed;
        border-width: medium 1px 1px;
        padding: 10px 5px 5px;
    }
</style>

这里为了方便演示，使用SqlDataSource进行了前端数据绑定，大家可以通过后台数据绑定(可枚举的数据列表均可作为数据源)来控制数据的展示，以便加入分页等操作。下面是此示例的前台页面源，相当简单：

---

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

<asp:SqlDataSource runat="server" ID="asds1" ConnectionString="Data Source=.;Initial Catalog=Northwind;Integrated Security=true;" ProviderName="System.Data.SqlClient" SelectCommand="Select top 10 * from Customers"></asp:SqlDataSource>

<asp:Accordion runat="server" ID="acc1" HeaderCssClass="accordionHeader" HeaderSelectedCssClass="accordionHeaderSelected"

ContentCssClass="accordionContent" DataSourceID="asds1">
    <HeaderTemplate>
        <%#DataBinder.Eval(Container.DataItem, "[CompanyName]")%>
    </HeaderTemplate>
    <ContentTemplate>
        <span style="font-weight: bold">[ContactName]：</span><%#DataBinder.Eval(Container.DataItem, "[ContactName]")%><br />
        <span style="font-weight: bold">[ContactTitle]：</span><%#DataBinder.Eval(Container.DataItem, "[ContactTitle]")%><br />
    </ContentTemplate>

</asp:Accordion>

---

最终的效果如下图：

本文演示所用的数据库是微软的演示库Northwind，此数据库的生成脚本请大家自行百度。