Mit JavaScript (C#) ein Panel zusammenklappen und erweitern.

von Christian Wenz

PDF herunterladen

Das CollapsiblePanel-Steuerelement im ASP.NET AJAX Control Toolkit erweitert ein Panel und bietet ihm die Möglichkeit, seinen Inhalt zu reduzieren und es erneut zu erweitern. Diese beiden Aktionen können auch aus benutzerdefiniertem JavaScript-Code ausgelöst werden.

Übersicht

Das CollapsiblePanel-Steuerelement im ASP.NET AJAX Control Toolkit erweitert ein Panel und bietet ihm die Möglichkeit, seinen Inhalt zu reduzieren und es erneut zu erweitern. Diese beiden Aktionen können auch aus benutzerdefiniertem JavaScript-Code ausgelöst werden.

Schritte

Zuerst erstellen Sie eine neue ASP.NET-Seite und fügen das ScriptManager innerhalb des <form>-Elements ein. Dadurch wird die ASP.NET AJAX-Bibliothek geladen, die vom Steuerelement-Toolkit benötigt wird:

<asp:ScriptManager ID="asm" runat="server" />

Erstellen Sie dann ein Panel mit einem Text, damit der Effekt des Reduzierens/Erweiterens sichtbar wird.

<asp:Panel ID="Panel1" CssClass="panelClass" runat="server">
 ASP.NET AJAX is a free framework for quickly creating a new generation of more 
 efficient, more interactive and highly-personalized Web experiences that work 
 across all the most popular browsers.<br />
 ASP.NET AJAX is a free framework for quickly creating a new generation of more 
 efficient, more interactive and highly-personalized Web experiences that work 
 across all the most popular browsers.<br />
 ASP.NET AJAX is a free framework for quickly creating a new generation of more 
 efficient, more interactive and highly-personalized Web experiences that work 
 across all the most popular browsers.<br />
</asp:Panel>

Wie Sie sehen können, verweist das Panel auf eine CSS-Klasse, die hier angezeigt wird (und definiert im Grunde eine Hintergrundfarbe und die Breite des Panels):

<style type="text/css">
 .panelClass {background-color: lime; width: 300px;}
</style>

Das CollapsiblePanelExtender Steuerelement erfordert das TargetControlID Attribut, damit das Toolkit weiß, welches Panel nach Anforderung reduziert oder erweitert werden soll:

<ajaxToolkit:CollapsiblePanelExtender ID="cpe" runat="server"
 TargetControlID="Panel1" />

Leider stellt der Extender derzeit keine spezifische API zum Reduzieren oder Erweitern des Panels bereit, aber einige nicht dokumentierte Methoden sind verfügbar. Fügen Sie zunächst der Seite drei HTML-Schaltflächen hinzu, die dann das clientseitige JavaScript auslösen, um den Inhalt des Panels zu reduzieren oder zu erweitern:

<input type="button" id="Button1" runat="server" value="Open" onclick="doOpen();" />
<input type="button" id="Button2" runat="server" value="Close" onclick="doClose();" />
<input type="button" id="Button3" runat="server" value="Toggle" onclick="doToggle();" />

Im clientseitigen JavaScript-Code (gestartet mit <script type="text/javascript">) muss für den Zugriff auf die CollapsiblePanelExtender die $find()-Methode verwendet werden. $find("cpe") gibt einen Verweis darauf zurück. Von dort aus lösen spezifische Methoden die aufgabe.

Die Methode zum Öffnen (Erweitern) des Panels heißt _doOpen(); der folgende Code implementiert die Funktion doOpen(), die aufgerufen wird, wenn auf die erste Schaltfläche geklickt wird.

function doOpen() 
{
 $find("cpe")._doOpen();
}

Zum Schließen oder Zusammenklappen des Bereichs muss die _doClose() Methode ausgeführt werden. Wenn der Benutzer also auf die zweite Schaltfläche klickt, wird der folgende JavaScript-Code aufgerufen:

function doClose() 
{
 $find("cpe")._doClose();
}

Die dritte Schaltfläche schaltet den Status des Panels um: von eingeklappt zu ausgeklappt und umgekehrt. Die CollapsiblePanelExtender stellt die toggle() Methode bereit, die genau das tut: Sie kehrt den Zustand des Panels um. Es gibt jedoch auch einen anderen Ansatz (der intern von der toggle() Methode verwendet wird): Die get_Collapsed() Methode von CollapsiblePanelExtender() gibt an, ob das Panel eingeklappt ist oder nicht. Je nach Rückgabewert dieser Funktion wird das Panel dann entweder erweitert (_doOpen()-Methode) oder eingeklappt (_doClose()-Methode).

function doToggle() 
{
 var cpe = $find("cpe");
 //cpe._toggle();
 if (cpe.get_Collapsed()) {
 cpe._doOpen();
 } else {
 cpe._doClose();
 }
}

Die dritte Schaltfläche ändert den Status des Panels: von reduziert in erweitert und zurück (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)