在 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”属于“Control”类型，包含 2 个额外的私有属性：

1. “可折叠控件”
2. “面板”

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

我现在的问题： CollapsableControl 将获得一个 clientID（不设置 ID） - 面板不会 如果面板包含 -tags

，则呈现 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

您的控件应该获得一个模板控件属性来定义可折叠的内容。正如您所说，获取 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();
}