开发者社区> 老朱教授> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

Asp.net Ajax Accordion控件的用法

简介:
+关注继续查看

Accordion,翻译过来是“手风琴、可折叠”的意思,微软Asp.net ajax提供了Accordion可折叠面板控件,方便用户在系统菜单、信息展示中使用,用户体验是相当的好啊。

这个控件允许定义多个面板,当用户选中一个面板时,其余面板都会折叠起来,只显示选中面板的内容。如果我说的不够清楚,请在这里查看示例:http://www.asp.net/ajax/ajaxcontroltoolkit/Samples/Accordion/Accordion.aspx。此外,这个控件还支持数据绑定。

 

看完了示例,该知道这个控件功能好用了吧,下面就是用法了,先说说简单的用法,定义面板、设计面板,就是这么简单,下面给出一段代码,一看就能明白:

 

复制代码
        <ajaxToolkit:Accordion ID="MyAccordion" runat="Server" SelectedIndex="0" HeaderCssClass="accordionHeader"
            HeaderSelectedCssClass
="accordionHeaderSelected" ContentCssClass="accordionContent"
            AutoSize
="Limit" FadeTransitions="true" TransitionDuration="250" FramesPerSecond="40"
            Width
="700" Height="200" RequireOpenedPane="false" SuppressHeaderPostbacks="true">
            
<Panes>
                
<ajaxToolkit:AccordionPane HeaderCssClass="accordionHeader" runat="server" ContentCssClass="accordionContent">
                    
<Header>
                        
<span>1. 菜单一</span>
                    
</Header>
                    
<Content>
                        
<span>菜单一的内容菜单一的内容菜单一的内容菜单一的内容菜单一的内容菜单一的内容菜单一的内容菜单一的内容菜单一的内容菜单一的内容菜单一的内容菜单一的内容菜单一的内容菜单一的内容菜单一的内容菜单一的内容菜单一的内容菜单一的内容</span>
                    
</Content>
                
</ajaxToolkit:AccordionPane>
                
<ajaxToolkit:AccordionPane ID="AccordionPane1" HeaderCssClass="accordionHeader" HeaderSelectedCssClass="accordionHeaderSelected"
                    runat
="server" ContentCssClass="accordionContent">
                    
<Header>
                        
<span>2. 菜单二</span>
                    
</Header>
                    
<Content>
                        
<span>菜单二的内容菜菜单二的内容菜菜单二的内容菜菜单二的内容菜菜单二的内容菜菜单二的内容菜菜单二的内容菜菜单二的内容菜菜单二的内容菜菜单二的内容菜菜单二的内容菜菜单二的内容菜菜单二的内容菜菜单二的内容菜菜单二的内容菜</span>
                    
</Content>
                
</ajaxToolkit:AccordionPane>
                
<ajaxToolkit:AccordionPane ID="AccordionPane2" HeaderCssClass="accordionHeader" HeaderSelectedCssClass="accordionHeaderSelected"
                    runat
="server" ContentCssClass="accordionContent">
                    
<Header>
                        
<span>3. 菜单三</span>
                    
</Header>
                    
<Content>
                        
<span>菜单一的内容菜单一的内容菜单一的内容菜单一的内容菜单一的内容菜单一的内容菜单一的内容菜单一的内容菜单一的内容菜单一的内容菜单一的内容菜单一的内容菜单一的内容菜单一的内容菜单一的内容菜单一的内容菜单一的内容菜单一的内容</span>
                    
</Content>
                
</ajaxToolkit:AccordionPane>
            
</Panes>
        
</ajaxToolkit:Accordion>
复制代码

 

 

这个是不需要写后台代码的,拿去用就好了,既方便,又实用。

 

接下来说一下数据绑定的,在使用数据绑定时,首先需要设计好HeaderTemplate和ContentTemplate两个模板,然后在后台添加数据绑定代码就可以了。

模板设计和GridView的模板设计基本相同,下面是一段示例代码:

 

复制代码
       <ajaxToolkit:Accordion ID="BindAccordion" runat="Server" HeaderCssClass="accordionHeader"
            HeaderSelectedCssClass
="accordionHeaderSelected" ContentCssClass="accordionContent"
            AutoSize
="None" FadeTransitions="true" TransitionDuration="250" FramesPerSecond="40"
            Width
="700" Height="200" RequireOpenedPane="false" SuppressHeaderPostbacks="false">
            
<HeaderTemplate>
                
<span><%# DataBinder.Eval(Container.DataItem, "HeaderText")%></span>
            
</HeaderTemplate>
            
<ContentTemplate>
                
<span><%# DataBinder.Eval(Container.DataItem, "ContentText")%></span>
            
</ContentTemplate>
        
</ajaxToolkit:Accordion>
复制代码

有了这段代码,接下来就是后台的数据绑定了。能够接受的数据源不能使DataTable,不知道为什么,笔者试了DataView和List<>,都是可以的,唯独不能用DataTable,但这个没有关系,如果你的数据格式是DataTable,直接用它的DefaultView就可以了。下面是代码:

 

复制代码
                //第一种绑定方法
                DataTable dt = new DataTable();
                dt.Columns.Add(
"HeaderText");
                dt.Columns.Add(
"ContentText");
                dt.Rows.Add(
new object[] { "菜单一""内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容" });
                dt.Rows.Add(
new object[] { "菜单二""内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容" });
                dt.Rows.Add(
new object[] { "菜单三""内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容" });
                dt.Rows.Add(
new object[] { "菜单四""内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容" });
                dt.Rows.Add(
new object[] { "菜单五""内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容" });
                
//数据源需要是一个DataView,不知为何
                this.BindAccordion.DataSource = dt.DefaultView;
                
this.BindAccordion.DataBind();

                
复制代码

上面是实用DataTable的方法,也是我们常常用到的。另外一个是List<>,为了方便起见,我们先定义一个类:

 

复制代码
    class myItem
    {
        
public string HeaderText
        { 
getset; }
        
public string ContentText
        { 
getset; }
    }
复制代码

然后实用这个类的List来作为数据源:

 

复制代码
                //第二种绑定方法
                List<myItem> itemList = new List<myItem>() 
                { 
                    
new myItem { HeaderText = "菜单一", ContentText="内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容" },
                    
new myItem { HeaderText = "菜单二", ContentText="内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容" },
                    
new myItem { HeaderText = "菜单三", ContentText="内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容" }
                };
                
this.BindAccordion.DataSource = itemList;
                
this.BindAccordion.DataBind();
复制代码



本文转自齐师傅博客园博客,原文链接:http://www.cnblogs.com/youring2/archive/2011/04/18/2020159.html,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
如何构建ASP.NET MVC4&JQuery&AJax&JSon示例
背景:   博客中将构建一个小示例,用于演示在ASP.NET MVC4项目中,如何使用JQuery Ajax。 步骤: 1,添加控制器(HomeController)和动作方法(Index),并为Index动作方法添加视图(Index.cshtml),视图中HTML如下: 输入你的姓名: 输入你的年龄: 提交 清空   视图中包含两个文本框,分别用来输入名字和年龄,包含连个按钮,分别用来提交信息和清空文本框的内容,同时包含一个段落,用来显示Ajax返回的数据信息。
950 0
+关注
3545
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载