在一项目中,欲使用ASP.NET AJAX Control Toolkit中的Accordion控件。
效果如下:
哈哈,眼熟吧,用的是Matt大牛的东西,这老哥的美工和程序结合的简直太完美了!!!!Matt大牛的原文
套用了Matt大牛的的css文件和图像文件,开工了!
麻烦来了,
Matt大牛原文的数据结构,标题是硬编码的,列表项用的是ListView绑定Obj数据源。
可我的项目要求,标题和列表项均从数据库中产生。数据用链表形式表示,在一个数据表中。
改!
用数据绑定?不行,Accordion控件的数据绑定的数据格式只支持,title,content,这样的结构。我这样的数据结构不支持!
用MATT大牛的方式,中间再绑定一个ListView,两个数据控件之间的交互比较困难!!头疼啊!!
用GooGle搜了一下,中文的资料根本就没有,只有老赵的博客中有一篇,描述了将DataTable绑定到Accordion控件,但也是title,content,这样的结构。
在英文的asp.net的论坛中搜索了一下,找到了一个解决方法:
原文
哈哈,改成自己的:
Aspx代码:
<ajaxToolkit:Accordion runat="server" ID="accordion" FadeTransitions="false" RequireOpenedPane="true" AutoSize="None" CssClass="accordion" HeaderCssClass="header" ContentCssClass="content">
</ajaxToolkit:Accordion>
</ajaxToolkit:Accordion>
c#代码
/*
您自己的获取数据库代码
取得是标题内容
*/
foreach (res in result)
{
i ++; //计数器,配合创建ID使用
//创建折叠面板对象
AjaxControlToolkit.AccordionPane p = new AjaxControlToolkit.AccordionPane();
//为折叠面板创建ID
p.ID = "AccordionPane_" + i.ToString();
//将标题加入折叠面板头部
p.HeaderContainer.Controls.Add(res.title);
/*
您自己的取标题链接的数据库内容的代码
*/
foreach (var menures in menuResult)
{
/*
根据您自己的需要,创建面板中的内容,我的程序内容格式为
<ul>
<li>内容1</li>
<li>内容2</li>
<li>内容3</li>
<li>内容4</li>
<li>内容5</li>
<li>内容6</li>
</ul>
*/
}
//创建折叠面板内容
p.ContentContainer.Controls.Add(ul);
//将创建的折叠面板加入到页面的控件中。
accordion.Panes.Add(p);
}
您自己的获取数据库代码
取得是标题内容
*/
foreach (res in result)
{
i ++; //计数器,配合创建ID使用
//创建折叠面板对象
AjaxControlToolkit.AccordionPane p = new AjaxControlToolkit.AccordionPane();
//为折叠面板创建ID
p.ID = "AccordionPane_" + i.ToString();
//将标题加入折叠面板头部
p.HeaderContainer.Controls.Add(res.title);
/*
您自己的取标题链接的数据库内容的代码
*/
foreach (var menures in menuResult)
{
/*
根据您自己的需要,创建面板中的内容,我的程序内容格式为
<ul>
<li>内容1</li>
<li>内容2</li>
<li>内容3</li>
<li>内容4</li>
<li>内容5</li>
<li>内容6</li>
</ul>
*/
}
//创建折叠面板内容
p.ContentContainer.Controls.Add(ul);
//将创建的折叠面板加入到页面的控件中。
accordion.Panes.Add(p);
}
编译,测试运行,大功告成!!!
与同好共勉!!!