ASP.NET 2.0 折叠面板服务器控件

• 下载演示项目 - 22.8 Kb
• 下载源代码 - 36.5 Kb

引言

你们中的许多人可能已经见过甚至使用过 Atlas Control Toolkit 中附带的折叠面板控件。这个自定义服务器控件可以进行数据绑定，并提供类似的功能，但有一些差异。

背景

我编写这个控件的主要原因是我需要折叠面板的功能来节省我最近为一个客户完成构建的 Web 应用程序的搜索区域中的空间。最初，我一直在尝试同时使用折叠面板和 Atlas Control Toolkit 提供的可折叠面板组。虽然这些都是优秀的控件，但如果不进行大量的自定义，它们都不能真正满足我的需求。因此，我决定花时间编写一个满足我需求的服务器控件。我的要求是折叠面板能够保持其选择状态（允许用户返回页面并修改其搜索）。折叠面板还必须包含可以快速全部选中或取消选中的复选框，以及可以单独选中或取消选中的复选框。还有一个要求是，如果折叠面板中的一个窗格被展开，所有其他没有选中复选框的打开窗格都将被关闭。同样，目的是节省空间。此外，用户认为折叠面板应该向他们显示他们在特定面板中做出的选择数量。

注意事项

这个控件是在考虑到特定目的的情况下编写的，并且可能无法按目前的方式重用。我打算花时间最终使它合理地通用。可能向内容区域添加模板等。本文的目的是真正提供一个如何实现相对复杂的复合数据绑定控件的示例。

使用代码

折叠面板的基本思想是它可以像任何其他数据绑定控件一样绑定到数据源。然而，稍微不同的是，它实际上绑定到集合的集合。折叠面板中的每个窗格绑定到单独的集合。每个窗格的标题对应于集合的属性。例如，如果窗格绑定到 DataTable，则标题文本可能对应于 TableName 属性。如果窗格绑定到集合，则需要创建一个自定义集合，该集合公开您想要绑定到标题的属性。例如

public class NamedList<T> : List<T>
{
    private readonly string m_strListTitle;
    
    public NamedList(string _strListTitle)
    {
        m_strListTitle = _strListTitle;
    }
    
    public string ListTitle
    {
        get
        {
            return m_strListTitle;
        }
    }
}

在这里，您可以将折叠面板窗格绑定到 ListTitle 属性，这就是将出现在标题上的文本。

折叠面板控件使用起来相对简单：只需将其放到您的页面上，然后通过设计器或以声明方式设置其属性。有关示例，请参见包含的示例项目。折叠面板控件可以数据绑定到任何实现 IEnumerable 或 IListSource 的数据源。请注意，目前它无法正确绑定到 DataSet。如果您需要绑定到 DataTable，而不是将它们添加到 DataSet，而是将它们添加到 IList<DataTable>。在某个时候，我将添加对 DataSet 的支持。

关注点

维护每个窗格的展开/折叠状态带来了一些挑战，但是一旦我意识到使用隐藏输入字段的基本技术并将其与确保折叠面板窗格对象实现 IPostBackDataHandler 结合起来，实现起来就相对简单了。

作为另一个有趣的方面，我并没有真正拥有太多注入 JavaScript 的背景。此控件大量使用了这种技术，并且它真正让我惊叹于您可以使用 JavaScript 实现的目标。

历史

• 发布于 2006 年 9 月 23 日