AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

Asp.net Ajax Accordion控件的用法

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

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();
复制代码



本文转自齐师傅博客园博客，原文链接http://www.cnblogs.com/youring2/archive/2011/04/18/2020159.html，如需转载请自行联系原作者
文章标签：
前端开发
.NET
UED
数据格式
开发框架
关键词：
.NET控件
.NET用法
ASP.NET控件
ASP控件
ASP.NET用法
老朱教授
目录
相关文章
红目香薰
|
6月前
|
存储 开发框架 NoSQL
ASP.NET WEB——项目中Cookie与Session的用法
ASP.NET WEB——项目中Cookie与Session的用法
红目香薰
88 0
东方睿赢
|
3月前
|
开发框架 JavaScript 前端开发
震撼！破解 ASP.NET 服务器控件 Button 执行顺序之谜，颠覆你的开发认知！
【8月更文挑战第16天】在ASP.NET开发中，通过Button控件实现先执行JavaScript再触后台处理的需求十分常见。例如，在用户点击按钮前需前端验证或提示，确保操作无误后再传递数据至后台深度处理。此过程可通过设置Button的`OnClientClick`属性调用自定义JavaScript函数完成验证；若验证通过，则继续触发后台事件。此外，结合jQuery也能达到相同效果，利用`__doPostBack`手动触发服务器端事件。这种方式增强了应用的交互性和用户体验。
东方睿赢
44 8
东方睿赢
|
2月前
|
开发框架 JavaScript 前端开发
震撼！破解 ASP.NET 服务器控件 Button 执行顺序之谜，颠覆你的开发认知！
【9月更文挑战第2天】
东方睿赢
97 5
代码掌控者
|
3月前
|
开发框架 前端开发 .NET
闲话 ASP.NET Core 数据校验（二）：FluentValidation 基本用法
闲话 ASP.NET Core 数据校验（二）：FluentValidation 基本用法
代码掌控者
42 1
艾尼麻麻
|
5月前
|
JSON 前端开发 JavaScript
前端Ajax、Axios和Fetch的用法和区别笔记
前端Ajax、Axios和Fetch的用法和区别笔记
艾尼麻麻
91 2
亚丁号
|
6月前
|
SQL 开发框架 JavaScript
分享33个ASP.NET电子商务源码和40个ASP.NET控件组件源码，总有一款适合您
分享33个ASP.NET电子商务源码和40个ASP.NET控件组件源码，总有一款适合您
亚丁号
84 0
红目香薰
|
6月前
|
SQL 开发框架 前端开发
ASP.NET WEB项目中GridView与Repeater数据绑定控件的用法
ASP.NET WEB项目中GridView与Repeater数据绑定控件的用法
红目香薰
82 0
Zh.晨光
|
6月前
|
开发框架 .NET
Asp.Net就业课堂之模板控件
Asp.Net就业课堂之模板控件
Zh.晨光
66 1
Zh.晨光
|
6月前
|
开发框架 .NET 数据安全/隐私保护
Asp.Net第二章服务器端控件
Asp.Net第二章服务器端控件
Zh.晨光
55 0
Zh.晨光
|
6月前
|
开发框架 JavaScript .NET
Asp.Net就业课之三验证控件
Asp.Net就业课之三验证控件
Zh.晨光
69 0

热门文章

最新文章

  • 1
    免费的Asp.net ColorPicker
  • 2
    Asp.Net Web API 2第十七课——Creating an OData Endpoint in ASP.NET Web API 2（OData终结点）
  • 3
    ASP.NET弹出遮罩层示例
  • 4
    [回馈]ASP.NET Core MVC开发实战之商城系统(三)
  • 5
    ajax省市县三级联动
  • 6
    15.4. Ajax + JSON
  • 7
    jquery ajax return值 没有返回 的解决方法
  • 8
    最简单的Ajax
  • 9
    ASP.NET与JQUERY的AJAX文件上传 视频课件+源码Demo
  • 10
    Ext.Ajax.request和formPanel.getForm().submit两种提交方法的异同
  • 1
    ASP.NET Core Web API之Token验证
    79
  • 2
    技术经验分享：ASP.NETCoreMVC打造一个简单的图书馆管理系统(修正版)（七）学生信息增删
    35
  • 3
    详细解读ASP常用三十三种代码
    38
  • 4
    详细解读ASP常用三十三种代码
    27
  • 5
    （20）ASP.NET Core EF创建模型（必需属性和可选属性、最大长度、并发标记、阴影属性）
    40
  • 6
    ASP.NET Session的认识和解释
    41
  • 7
    LIMS（实验室）信息管理系统源码、有哪些应用领域？采用C# ASP.NET dotnet 3.5 开发的一套实验室信息系统源码
    81
  • 8
    ASP淘特二手房房地产系统源码
    65
  • 9
    学习ASP.NET 中的 默认应用程序配置源
    38
  • 10
    【.NET Developer】创建ASP.NET Core Blazor项目并打包为Linux镜像发布到Azure应用服务
    229

    • 相关课程

    更多
  • Ajax 前端开发入门与实战
  • Ajax入门

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    阿里云OSS设置跨域访问