专栏首页.Net Core技术分享Asp.net Ajax Accordion控件的用法

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
        { get; set; }
        public string ContentText
        { get; set; }
    }

然后实用这个类的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();

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • C#创建https请求并使用pfx证书

    WebRequest req = WebRequest.Create(url);

    拓荒者-NET
  • MediatR-进程内的消息通信框架

    MediatR是一款进程内的消息订阅、发布框架,提供了Send方法用于发布到单个处理程序、Publish方法发布到多个处理程序,使用起来非常方便。目前支持 .N...

    拓荒者-NET
  • ASP.NET Core 依赖注入基本用法

    ASP.NET Core从框架层对依赖注入提供支持。也就是说,如果你不了解依赖注入,将很难适应 ASP.NET Core的开发模式。本文将介绍依赖注入的基本概念...

    拓荒者-NET
  • CSS自定义滚动条的样式

    本文会介绍CSS滚动条选择器,并在演示中展示如何在Webkit的内核浏览器和IE浏览器中,自定义一个横向以及一个纵向的滚动条。

    前端林子
  • 头部内容时代,内容创业的痛点到底在哪?

    孟永辉
  • SMART让您的内容和SEO更智能

    黄伟SEO
  • 高晓虎:互联网内容娱乐的早期投资

      1月18日晚,在第19期互联网前沿沙龙上,创新工场投资总监高晓虎提出,中国互联网结构正在加速融合演变,新内容泛娱乐是时代的产物。一个优秀的新内容公司有两个判...

    腾讯研究院
  • 内容运营的核心与技巧

    (1)内容运营是指运营者利用新媒体渠道,用文字、图片、或者视频等形式将企业信息友好的呈现在用户面前,并激发用户参与、分享、传播的完整运营过程。

    大葡萄
  • 当我们谈论内容时,我们在谈什么?

    作为数字音乐界『双App』之一的虾米音乐迎来了一个爆款内容:《我的少女时代》主题曲《小幸运》在虾米音乐播放量超过三千万,这首由田馥甄演唱的歌,在数字音乐平台的表...

    罗超频道
  • 微博开推的内容开放协议,会再造一个互联网吗?

    内容创业浪潮正在深刻改变互联网的形态:基于URL的WEB已不再是主流形式,反而是一个个内容平台,正在形成大量的“内容孤岛”:微博、微信、今日头条、百家号、企鹅号...

    罗超频道

扫码关注云+社区

领取腾讯云代金券