ASP.NET 可折叠可拖动面板服务器控件

• 下载演示项目 - 16.5 Kb
• 下载源代码 - 6.91 KB

引言

本文描述了用于 ASP.NET 的一个简单的可折叠面板控件。这是一个服务器端控件，因此您可以将其添加到 Visual Studio 工具箱并在您的项目中重复使用。

可折叠面板扩展了 WebControl，并提供了

• 一个设计器，用户可以在其中放置其他控件（使用默认的 ReadWriteControlDesigner）。
• 可折叠面板可以嵌套。
• 面板是可拖动的（所有与拖动相关的 JavaScript 代码都由 Tim Taylor 提供，请访问他！）。

其他一些属性也使其成为您项目中一个简单但有用的控件。

可折叠面板的代码说明

运行时，可折叠面板只不过是一个带有两个行的表格，位于一个 <div> 中。第一行是面板标题和图像。第二行是包含用户添加的其他控件的行。客户端脚本将在单击图像或标题时隐藏第二行。

[标题] [图标]

[用户内容在此处]

CreateContainerControls() 方法创建最外层的表格。它为表格的第二行（用户内容所在的位置）提供一个唯一的 ID，以便可以通过 JavaScript 访问以折叠/展开。因为该控件可以嵌套，所以需要实现 INamingContainer 接口，这将确保我们在寻址嵌套控件时获得唯一的命名空间。此方法最初将第二行的显示样式设置为 PanelState.Collapsed 或 PanelState.Expanded 作为初始状态。

CreateHeaderControls() 和 CreateTitle() 方法创建标题和图像。根据设置的属性，onClick JavaScript 将使用 Attributes.Add("onClick",GetOnClickScript()) 添加到图像和/或标题。

Render() 和 RenderChildren() 方法将控件 HTML 和任何用户添加的控件/HTML 呈现到浏览器。

IPostBackDataHandler 接口已实现，用于捕获回发数据并触发控件的 PanelStateChanged 事件。

重写的 OnPreRender(EventArgs e) 方法检查并注册客户端 JavaScript，该 JavaScript 执行实际的展开/折叠操作。

为了让用户能够直观地设计面板，该控件实现了 ReadWriteControlDesigner。控件使用的设计器通过将属性 [Designer("System.Web.UI.Design.ReadWriteControlDesigner, System.Design")] 应用于类定义来定义。但是，通过使用此设计器，用户将无法在设计时看到面板的标题部分。如果您使用 ControlDesigner 实现设计器，那么可以在设计器上显示完整的面板，但它不允许您以可视方式添加控件。考虑到这些选项，我选择了 ReadWriteControlDesigner，因为它允许用户在面板内以可视方式布局控件。也许有一种方法可以使用 ReadWriteControlDesigner 在将自定义 HTML 呈现到设计器表面时（以便您也可以显示标题/图像）。如果有人碰巧知道如何做到这一点，请告诉我。

为了在运行时呈现 HTML，我使用了框架中的类，例如 Table、TableRow 等... 但是，如果您使用 StringBuilder 并创建 HTML 标签，它会更快。为了可读性，我保持原样。

如果设置了 Draggable 属性，则控件会发出在 C_DRAGGABLE_REGISTRATION 中定义为常量的启动 JavaScript。要使其工作，您必须在页面的头部包含四个 JavaScript 文件（检查演示项目）。您可能希望将 JavaScript 嵌入为资源，然后在运行时发出它们（家庭作业）。

这些属性是不言自明的。希望这能有所帮助。如果发现任何错误，请告诉我。更好的是，纠正它们并告诉我 :) 非常感谢任何评论。