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个额外的私有属性：

“CollapsableControl”
“面板”

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

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

有什么建议吗？

修改我修复了丢失ID的行为 - 只需将CollapsableControl.AssociatedControlID设置为Panel.ClientID ...但是 - 当放入＆lt; %%＆gt;时在面板中，它不会被渲染?? !!

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

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

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

3 个答案: