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

Question

目前我已经构建了一个崩溃控件，其行为类似于标签（关联控件ID）来控制控件的折叠状态。

我想构建以下控件：

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);

这导致了其他问题，例如：我只想设置面板的文本，面板的样式，...

有线！

对于这种情况你有什么解决方案吗？

编辑：
我想出了另一个解决方案：
另一个解决方案http://img109.imageshack.us/img109/3307/stackoverflowcollapseab.jpg< /a>

“CollapsableArea” 的类型为“Control”，包含 2 个额外的私有属性：

1. “CollapsableControl”
2. “Panel”

我认为将 CollapsableArea.Controls 的 getter 重定向到 CollapsableArea.Panel.Controls 就足够了。在 CollapsableArea.CreateChildControls() 中，我实例化并将 CollapsableControl 和 Panel 添加到 base.Controls 中，并在 CollapsableArea.RenderChildren() 中渲染

我现在的两个问题： CollapsableControl 将获取 clientID（无需设置 ID）- 面板不会 如果面板包含 <% %> 标签，渲染 CollapsableControl 将失败（或失效），

有什么建议吗？

编辑： 我修复了丢失 ID 的行为 - 只需将 CollapsableControl.AssociatedControlID 设置为 Panel.ClientID...但是 - 当放置 <% %> 时在面板中，它不会被渲染？！！

Answer 1

如果您想要一个简单的面板，而不是重新发明轮子，您可以使用可折叠面板控件：

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

可能是获得您想要的功能的最简单方法？

Answer 2

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

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 3

您的控件应该获取模板控件属性来定义可折叠内容。正如您所说，AssociatedControlID 属性获取 Label 控件 id。

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