La creazione di una zona pieghevole in ASP.NET

Question

attualmente ho costruito un collapseControl che si comporta come un'etichetta (associatedControlID) per controllare il collasso dello stato di un controllo.

seguente controllo Mi piacerebbe costruire:

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

ho pensato a qualcosa di simile:
mettere il mio già costruire collapsableControl e qualche altro controllo (pannello ad es.) insieme per ottenere un collapsableArea.

prima prova:
ho provato a estendere un pannello e fatto quanto segue:

this.Parent.Controls.Add(collapsableControl);

, ma questo mi ha dato: "non è corretto ciclo di vita passo", "non può modificare", "nullReference", ... eccezioni

Così ho dato un altro tentativo (che credo la scelta migliore, a causa di non ottenendo tagKey):
ho esteso un segnaposto e ha fatto il seguente:

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

questo ha causato altri problemi, come: voglio solo impostare il testo del pannello, lo stile del pannello, ...

wired!

hai qualche soluzione per questo scenario?

modifica
Mi si avvicinò con un'altra soluzione:
un'altra soluzione http://img109.imageshack.us/img109/3307/stackoverflowcollapseab.jpg

"CollapsableArea" è di tipo "Control", contenente 2 proprietà private in più:

1. "CollapsableControl"
2. "Pannello"

ho pensato che sarebbe sufficiente, per reindirizzare il getter dei CollapsableArea.Controls per CollapsableArea.Panel.Controls. in CollapsableArea.CreateChildControls () i instanciate e aggiungi il CollapsableControl e pannello a base.Controls e in CollapsableArea.RenderChildren () rendono quei 2

i miei problemi ora: il CollapsableControl otterrà un IDcliente (senza impostare un ID) - la centrale non rendere CollapsableControl fallirà (o svenuto), se pannello contiene <%%> - i tag

qualche suggerimento?

modifica Ho sistemato il comportamento del ID mancante - è sufficiente impostare CollapsableControl.AssociatedControlID per Panel.ClientID ... ma - quando mettendo <%%> nel pannello, non sarà ottenere reso ?? !!

Answer 1

oh, come viene - Ho risolto questo problema:

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

Se siete dopo un pannello semplice, piuttosto che re-inventare la ruota è possibile utilizzare il pannello di controllo pieghevole:

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

potrebbe essere il modo più semplice per ottenere la funzionalità siete dopo?

Answer 3

Il controllo dovrebbe ottenere una proprietà di controllo modello per definire contenuti pieghevole. E come hai detto una proprietà AssociatedControlID che ottiene l'id controllo Label.

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

Si deve registrare un jQuery per gli script di avvio della pagina.

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