一个 ASP.NET 2.0 accordion 服务器控件

分享于 

4分钟阅读

Web开发

  繁體

Sample Image

介绍

许多人可能已经看到或者甚至使用了控件工具箱控件中的accordion 控件。 这里自定义服务器控件可以是数据绑定,并提供类似的功能,但有一些不同。

背景

我主要是因为我需要 accordion的功能来节省我最近构建的web应用程序的搜索区域的空间。 最初,我一直试图使用 accordion 控件工具箱中提供的和一组可折叠面板。 虽然这都是优秀的控制,但没有真正的定制,也不适合我的需求。 因此,我决定花时间编写一个服务器控件来满足我的需求。 我要求 accordion 能够保持它的选择状态( 允许用户返回到页面并修改它的搜索)。 accordion 还必须包含可以快速选择或者取消选择的复选框,并且可以单独选择或者取消选择这些复选框。 还要求如果扩展了 accordion 中的窗格,则不会关闭所有未选中复选框的它的他打开窗格。 同样的目的是为了节省空间。 这里外,用户觉得 accordion 应该显示他们在特定面板中所做的选择数。

提醒

这种控制是用特定的目的编写的,并且可能无法重用,因为它目前是。 我打算花点时间让它更加通用。 可能在内容区域中添加模板,本文的目的是提供一个示例,说明如何实现一个相对复杂的复合数据绑定控件。

使用代码

基本的想法 behind 是 accordion,它可以像它的他数据绑定控件一样绑定到数据源。 但是,它有点不同,它实际上绑定到一个集合的Collection。 accordion 中的每个窗格都绑定到单个 Collection。 每个窗格的标题对应于 Collection 上的一个属性。 例如如果窗格绑定到 DataTable,则标题文本可能与 TableName 属性对应。 如果窗格绑定到 Collection,则需要创建一个自定义 Collection,公开要绑定到标题的属性。 例如:

publicclass NamedList<T> : List<T>
{
 privatereadonlystring m_strListTitle;
 public NamedList(string _strListTitle)
 {
 m_strListTitle = _strListTitle;
 }
 publicstring ListTitle
 {
 get {
 return m_strListTitle;
 }
 }
}

这里,可以绑定 ListTitle 属性上的accordion 窗格,这是将出现在标题上的文本。

accordion 控件的使用相对简单: 只需将它的放到页面上,或者通过设计器设置它的属性,或者以声明方式。 有关示例,请参见示例项目。 accordion 控件可以是绑定到实现 IEnumerable 或者 IListSource的任何数据源的数据。 注意,当前它将不会正确绑定到 DataSet。 如果需要绑定到 DataTable,而不是将它们添加到 DataSet 中,则将它们添加到 IList<DataTable>。 在某些时候,我将添加对 DataSet的支持。

Points of interest

为了保证 accordion 窗格对象的实现,但是一旦我实现了隐藏输入字段的基本技术,并结合使用 IPostBackDataHandler,这就比较简单了,这是相当简单的。

另外,我还没有在注入JavaScript时获得很多的background。 这个控件很大程度上使用了这个技术,它真的令我感到令人惊讶的是。

历史记录

  • 已经发布 09/23/2006

Server  控制  asp  asp-net  acc  Accordion  
相关文章