AjaxControlToolkit

 

1、首先添加AjaxControlToolkit 动态链接库的引用。
2、在项目的Web.Config 中的紫色标记位置添加如下标签：
<system.web>
       <trust level="Medium"/>
       <pages>
         <controls>
           <add tagPrefix="asp" namespace="System.Web.UI" assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
        <add namespace="AjaxControlToolkit" assembly="AjaxControlToolkit" tagPrefix="ajaxToolkit"/>
         </controls>
       </pages>
3、在使用Accordion 的页面中添加如下类型的代码。

<ajaxToolkit:Accordion
    ID="MyAccordion" //用于编程的时候访问此控件的名字
          runat="Server" //指明属于服务器端控件
    SelectedIndex="0" //默认选择的折叠信息页
    HeaderCssClass="accordionHeader" //信息标题的CSS式样
    HeaderSelectedCssClass="accordionHeaderSelected" //选择了信息标题后的CSS式样
    ContentCssClass="accordionContent" //内容的CSS式样
    AutoSize="None" //内容高度和宽度是否自动适应。None自动适应。Limit和Fill在IE6、7的效果一样，都是限制高度
    FadeTransitions="true" //是否启用信息展开时候的渐进溅出效果
    TransitionDuration="250" //渐进的时候的延迟，以毫秒计算
    FramesPerSecond="40" //在渐进效果中的刷新频率
    RequireOpenedPane="false" //是否必须要展开其中的至少一个信息。这个属性决定着是否本身实现展开和收缩。如果是False，就只能通过点击别的信息来收起本身的信息。如果是True就可以通过点击单个信息标题实现展开和收缩效果。
    SuppressHeaderPostbacks="true"> //是否支持标题的Postback属性。当你需要在标题中包含超级连接的时候很有用。
    <Panes>//需要自己手动添加的代码，用来包容ajaxToolkit:AccordionPane。因为ajaxToolkit:AccordionPane不能直接放在ajaxToolkit:Accordion中。
              <ajaxToolkit:AccordionPane  //可折叠信息
            HeaderCssClass="accordionHeader"  //信息标题的CSS式样
            HeaderSelectedCssClass="accordionHeaderSelected" //选择标题后的CSS式样
            ContentCssClass="accordionContent"> //内容的CSS式样
                  <Header> . . . </Header> //标题信息标签，标签之间填写标题
                  <Content> . . . </Content> //内容标签，标签之间填写内容
              </ajaxToolkit:AccordionPane>          
              .
              .
              .
    </Panes> //需要自己手动添加的代码
    <HeaderTemplate>...</HeaderTemplate> //用于数据绑定的标题模板，可以通过后台编程的方式动态生成可折叠信息
    <ContentTemplate>...</ContentTemplate> //用于数据绑定的内容模板，可以通过后台编程的方式动态生成可折叠信息
</ajaxToolkit:Accordion>

Accordion高级技巧 之 动态绑定技术

前台页面中编写如下代码：

<ajaxToolkit:Accordion id="dictionaryBound" runat="server"

            HeaderCssClass="accordionHeader" ContentCssClass="accordionContent">

            <HeaderTemplate>

                Header: <%# Eval("Key") %>

            </HeaderTemplate>

            <ContentTemplate>

                Data: <%# Eval("Value") %>

            </ContentTemplate>

        </ajaxToolkit:Accordion>

后台页面中编写类似于下面的代码：

using System.Data.SqlClient;

using System.Collections.Generic;

protected void Page_Load(object sender, EventArgs e)

        {

            if (!IsPostBack)

            {

                SqlDataAdapter sda = new SqlDataAdapter("SELECT [RegionID] as Header, [RegionDescription] as Content FROM [Region]", "Data Source=E5CA92C31A97444;Initial Catalog=Northwind;Integrated Security=True");

                DataTable dt = new DataTable();

                sda.Fill(dt);

                Dictionary<string, string> values = new Dictionary<string, string>();

                foreach (DataRow dr in dt.Rows)

                {

                    values[dr["Header"].ToString()] = dr["Content"].ToString();

                }

                dictionaryBound.DataSource = values;

                dictionaryBound.DataBind();

            }

        }