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

分享于 

4分钟阅读

Web开发

  繁體

Collapsible panel

介绍

本文介绍了一个简单的用于 ASP.NET的可折叠面板控件。 这是服务器端控件,因此可以将它添加到 Visual Studio 工具箱中,并在你的项目中使用它。

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

  • 用户可以放置其他控件 inside ( 使用默认 ReadWriteControlDesigner )的设计器。
  • 可以嵌套的面板可以嵌套。
  • 面板可以拖动( 所有的JavaScript代码都是由 Tim提供的,访问他)。

其他一些属性也允许它在你的项目中用作一个简单但有用的控件。

可以折叠面板的代码说明

运行时的可折叠面板是一个只有两个行 inside的table <div> 。第一行有面板 header 和图像。 第二行是包含由用户添加的其他控件的行。 客户端脚本将在单击图像或者标题时隐藏第二行。

[Title ][Icon ]
[User content goes here ]

CreateContainerControls() 方法创建最外面的table。 它为 table (。用户内容的位置)的第二行提供一个 uniqueID,以便JavaScript可以通过 collapse/扩展访问它。 因为控件可以嵌套,所以需要实现 INamingContainer 接口,这将确保在处理嵌套控件时获得惟一的名称空间。 这里方法最初将行样式的第二个显示设置为 PanelState.Collapsed 或者 PanelState.Expanded,作为初始状态。

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

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

实现 IPostBackDataHandler 接口以捕获 postback 数据并提高控件事件的PanelStateChanged

重写的OnPreRender(EventArgs e) 方法检查并注册客户端 JavaScript,它执行实际扩展/collapse。

为了让用户能够可视化地设计面板,控件实现了 ReadWriteControlDesigner。 控件使用的设计器通过应用属性来定义 [Designer("System.Web.UI.Design.ReadWriteControlDesigner, System.Design") ] 但是,使用这里设计器在设计时不能看到面板的header 部分。 如果使用 ControlDesigner 实现设计器,则可以在设计器上显示完整面板,但不允许视觉上添加控件。 考虑到这些选项,我选择 ReadWriteControlDesigner,因为它允许用户视觉地布局控件 inside 面板。 可以在将自定义HTML呈现到设计器表面( 这样你就可以显示标题/图像) 时使用 ReadWriteControlDesigner。 如果有人知道怎么做,请告诉我。

为了在运行时呈现 HTML,我使用了框架中的类,比如 TableTableRow 等等。 但是,如果你使用 StringBuilder 并创建HTML标签,那么它会更快。 为了便于阅读,我将它的保留为。

如果设置了 Draggable 属性,则控件将发出启动 JavaScript,它定义为 C_DRAGGABLE_REGISTRATION 中的常量。 为此,你必须在页面(。查看演示项目)的header 中包含4 个JavaScript文件。 你可能希望将javascript作为资源嵌入,然后在运行时( 家庭工作) 中。

这些属性几乎是自我解释的。 希望这是有意义的。 如果找到任何 Bug,请让我知道。 更好的是,纠正它们,让我知道:任何评论都是非常。


Server  控制  COL  asp  asp-net  PAN  
相关文章