Erstellen einer zusammenklappbaren Bereich in ASP.NET
-
19-09-2019 - |
Frage
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:
- "CollapsableControl"
- "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 ?? !!
Lösung 2
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);
}
}
}
Andere Tipps
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?
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();
}