Erstellen einer zusammenklappbaren Bereich in ASP.NET

Question

zur Zeit habe ich eine collapseControl gebaut, die auf ein Etikett (AssociatedControlID) ähnlich verhält wie der Zusammenbruch-Zustand eines Steuer zu steuern.

Kontrolle folgende ich möchte bauen:

collapsableArea http://img692.imageshack.us/img692/3307/stackoverflowcollapseab. jpg

Ich dachte an so etwas wie:
legte meine bereits collapsableControl und einige andere Steuerung (z. B. Panel) zusammen zu bekommen collapsableArea bauen.

erster Versuch:
Ich habe versucht, eine Platte zu verlängern und haben die folgenden:

this.Parent.Controls.Add(collapsableControl);

, aber das gab mir: „nicht korrekt Lebenszyklusschritt“, „nicht ändern“, „Nullreference“, ... Ausnahmen

Also gab ich es noch einmal zu versuchen (was ich die bessere Wahl glauben, da keine TagKey bekommen):
i erweitert einen Platzhalter und tat das folgende:

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

Dies verursacht andere Probleme, wie: Ich möchte nur den Text der Tafel setzen, die Art der Platte, ...

verkabelt!

Sie haben keine Lösungen für dieses Szenario?

Bearbeiten
Ich kam mit einer anderen Lösung:
eine andere Lösung http://img109.imageshack.us/img109/3307/stackoverflowcollapseab.jpg

"CollapsableArea" ist vom Typ "Control", die 2 zusätzliche private Eigenschaften:

1. "CollapsableControl"
2. "Panel"

Ich dachte, es wäre genug, den Getter der CollapsableArea.Controls zu CollapsableArea.Panel.Controls umleiten. in CollapsableArea.CreateChildControls () i instanziiert und die CollapsableControl und Panel base.Controls hinzufügen und in CollapsableArea.RenderChildren () machen solche mit 2

meine Probleme jetzt: die CollapsableControl eine clientID bekommen (ohne eine ID-Einstellung) - die Platte wird nicht machen CollapsableControl fehl (oder passed out), wenn Panel enthält <%%> - Tags

irgendwelche Vorschläge?

Bearbeiten i fixierte das Verhalten der fehlenden ID - nur gesetzt CollapsableControl.AssociatedControlID zu Panel.ClientID ... aber - beim Putten <%%> in der Platte, wird es nicht gemacht bekommen ?? !!

Answer 1

oh, wie kommt - ich habe dieses Problem gelöst:

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

Wenn Sie nach einer einfachen Platte sind, eher dann neu zu erfinden das Rad Sie die zusammenklappbaren Panel Control verwenden:

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

Könnte der einfachste Weg, um die Funktionalität sind Sie nach bekommen?

Answer 3

Ihre Kontrolle sollte eine Template Control-Eigenschaft erhalten zu collapsable Inhalt zu definieren. Und wie gesagt, Sie eine AssociatedControlID Eigenschaft, die das Label-Steuerelement-ID wird.

public class CollapsableArea : WebControl, INamingContainer
{
    public string AssociatedControlID { get; set; }
    public ITemplate ContentTemplate { get; set; }
}

Sie haben einen Jquery zu den Startskripten der Seite zu registrieren.

$("#The AssociatedControlID client control id").click(function(e) {
    $("#The CollapsableArea client control id").toggle();
}