在ASP.NET中创建可折叠区域

Question

目前我已经构建了一个collapseControl，它的行为与标签（associatedControlID）类似，用于控制控件的折叠状态。

下面的控制，我想建：

collapsableArea http://img692.imageshack.us/img692/3307/stackoverflowcollapseab.jpg

我认为是这样的：
把我已经建立collapsableControl和其他一些控制（如面板）在一起，以得到collapsableArea。

第一次尝试：
我试图扩大面板也做了以下内容：

this.Parent.Controls.Add(collapsableControl); 

但是这给了我：“不正确的生命周期阶段”，“不能修改”，“nullReference” ...例外

，所以我给它的另一个尝试（我认为更好的选择，因为没有得到tagKey）：
我伸出一个占位符，也做了以下内容：

this.Controls.Add(collapsableControl); 
this.Controls.Add(collapsablePanel); 

这引起了其他问题，如：我只想设置面板的文字，面板的样式，...

有线！

你有这方案的解决方案吗？

编辑：
我提出了另一种解决方案：
another solution http://img109.imageshack.us/img109/3307/stackoverflowcollapseab.jpg

“CollapsableArea” 是 “控制” 类型的，含有2个额外的专用属性：

1. “CollapsableControl”
2. “面板”

我认为这将足以将CollapsableArea.Controls的getter重定向到CollapsableArea.Panel.Controls。在CollapsableArea.CreateChildControls（）我实例化，并添加CollapsableControl和小组base.Controls和CollapsableArea.RenderChildren（）现在使那些2个

我的问题： 的CollapsableControl会得到一个clientId（不设置一个ID） - 面板不会 渲染CollapsableControl将失败（或传出），如果面板包含<％> - 标签

有什么建议吗？

编辑： 我固定缺少ID的行为 - 以Panel.ClientID ...但刚刚成立CollapsableControl.AssociatedControlID - 在面板投入<％％>的时候，它不会渲染？ ！

Answer 1

哦，是怎么来 - 我已经解决了这个问题：

public sealed class CollapsableArea : Control 
{ 
    private const string ViewStateKeyCollapsableContentClientID = "collapsableContentClientID"; 

    private string CollapsableContentClientID 
    { 
     get 
     { 
      var obj = this.ViewState[ViewStateKeyCollapsableContentClientID]; 
      if (obj == null) 
      { 
       var collapsableContentClientID = Guid.NewGuid().ToString(); 
       this.ViewState[ViewStateKeyCollapsableContentClientID] = collapsableContentClientID; 
       return collapsableContentClientID; 
      } 
      return (string)obj; 
     } 
    } 

    /// <summary> 
    /// Gets or sets the header text. 
    /// </summary> 
    /// <value>The header text.</value> 
    public string HeaderText 
    { 
     get 
     { 
      this.EnsureChildControls(); 
      return this._collapseControl.Text; 
     } 
     set 
     { 
      this.EnsureChildControls(); 
      this._collapseControl.Text = value; 
     } 
    } 

    public override ControlCollection Controls 
    { 
     get 
     { 
      // redirect controls 
      return this._collapsableContent.Controls; 
     } 
    } 

    #region child controls 

    private readonly Panel _collapsableContent = new Panel(); 
    private readonly CollapsableControl _collapseControl = new CollapsableControl(); 

    #endregion 

    public override Control FindControl(string id) 
    { 
     // need to redirect 
     if (string.Equals(id, this._collapsableContent.ID)) 
     { 
      return this._collapsableContent; 
     } 
     return this._collapsableContent.FindControl(id); 
    } 

    protected override void CreateChildControls() 
    { 
     base.Controls.Clear(); 

     var collapsableContentClientID = this.CollapsableContentClientID; 
     this._collapsableContent.ID = collapsableContentClientID; 
     this._collapseControl.AssociatedControlID = collapsableContentClientID; 
     base.Controls.Add(this._collapseControl); 
     base.Controls.Add(this._collapsableContent); 
    } 

    protected override void RenderChildren(HtmlTextWriter writer) 
    { 
     this._collapseControl.RenderControl(writer); 
     // hack for code blocks 
     if (!this.Controls.IsReadOnly) 
     { 
      this._collapsableContent.RenderControl(writer); 
     } 
     else 
     { 
      this._collapsableContent.RenderBeginTag(writer); 
      base.RenderChildren(writer); 
      this._collapsableContent.RenderEndTag(writer); 
     } 
    } 
} 

Answer 2

如果你是一个简单的面板之后，而不是重新发明轮子，你可以使用可折叠面板控制：

http://www.asp.net/AJAX/AjaxControlToolkit/Samples/CollapsiblePanel/CollapsiblePanel.aspx

可能让你以后的功能最简单的方法？

Answer 3

你的控件应该得到一个Template控件属性来定义可折叠的内容。正如你所说的一个获得Label控件ID的AssociatedControlID属性。

public class CollapsableArea : WebControl, INamingContainer 
{ 
    public string AssociatedControlID { get; set; } 
    public ITemplate ContentTemplate { get; set; } 
} 

你必须注册一个jquery到页面的启动脚本。

$("#The AssociatedControlID client control id").click(function(e) { 
    $("#The CollapsableArea client control id").toggle(); 
}