Создание сворачиваемой области в ASP.NET

Question

в настоящее время я создал collapseControl, который ведет себя аналогично label (associatedControlID) для управления состоянием свертывания элемента управления.

следующий элемент управления, который я хотел бы создать:

Складываемая область http://img692.imageshack.us/img692/3307/stackoverflowcollapseab.jpg

я подумал о чем-то вроде:
поместите мой уже построенный collapsableControl и некоторые другие элементы управления (например.панель) вместе, чтобы получилась складываемая область.

первая попытка:
я попытался расширить панель и сделал следующее:

this.Parent.Controls.Add(collapsableControl);

но это дало мне:"неверный шаг жизненного цикла", "не удается изменить", "NullReference", ...исключения

поэтому я попробовал еще раз (что, на мой взгляд, является лучшим выбором из-за отсутствия ключа тега).:
я расширил заполнитель и сделал следующее:

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

это вызвало другие проблемы, такие:я только хочу задать текст панели, стиль панели, ...

подключенный!

есть ли у вас какие-либо решения для этого сценария?

Редактировать:
я придумал другое решение:
другое решение http://img109.imageshack.us/img109/3307/stackoverflowcollapseab.jpg

"CollapsableArea" имеет тип "Control", содержащий 2 дополнительных частных свойства:

1. "Сворачиваемый элемент управления"
2. "Панель"

я думал, этого будет достаточно, чтобы перенаправить получатель CollapsableArea.Элементы управления в CollapsableArea.Панель.Элементы управления.в CollapsableArea.CreateChildControls() я создаю экземпляр и добавляю CollapsableControl и панель в базу.Элементы управления и в CollapsableArea.RenderChildren() визуализируют эти 2

мои проблемы сейчас:CollapsableControl получит идентификатор клиента (без установки идентификатора) - панель не получит отрисовка CollapsableControl завершится неудачно (или будет отключена), если панель содержит <% %>-теги

есть какие-нибудь предложения?

Редактировать: я исправил поведение отсутствующего идентификатора - просто установил CollapsableControl.AssociatedControlID в Panel.ClientID...но - когда ставишь <% %> на панели это не будет отображаться??!!

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

Ваш элемент управления должен получить свойство элемента управления шаблона для определения сворачиваемого содержимого.И, как вы сказали, свойство AssociatedControlID, которое получает идентификатор элемента управления Label.

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