在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(); 
}