Reduzieren und Erweitern eines Bereichs über JavaScript (C#)

von Christian Wenz

PDF herunterladen

Das CollapsiblePanel-Steuerelement im ASP.NET AJAX Control Toolkit erweitert einen Bereich und bietet ihm die Möglichkeit, den Inhalt zu reduzieren und erneut zu erweitern. Diese beiden Aktionen können auch über benutzerdefinierten JavaScript-Code ausgelöst werden.

Überblick

Das CollapsiblePanel-Steuerelement im ASP.NET AJAX Control Toolkit erweitert einen Bereich und bietet ihm die Möglichkeit, den Inhalt zu reduzieren und erneut zu erweitern. Diese beiden Aktionen können auch über benutzerdefinierten JavaScript-Code ausgelöst werden.

Schritte

Erstellen Sie zunächst eine neue ASP.NET Seite, und fügen Sie das ScriptManager in das eine Element ein <form> . Dadurch wird die ASP.NET AJAX-Bibliothek geladen, die für das Control Toolkit erforderlich ist:

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

Erstellen Sie dann einen Bereich mit Text, damit der Effekt zum Reduzieren/Erweitern sichtbar ist:

<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 der Bereich auf eine CSS-Klasse, die hier angezeigt wird (und im Wesentlichen eine Hintergrundfarbe und die Breite des Bereichs definiert):

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

Das CollapsiblePanelExtender -Steuerelement erfordert das TargetControlID -Attribut, damit das Toolkit weiß, welcher Bereich auf Anforderung reduziert oder erweitert werden soll:

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

Leider macht der Extender derzeit keine bestimmte API zum Reduzieren oder Erweitern des Bereichs verfügbar, aber einige nicht dokumentierte Methoden tun dies. Fügen Sie der Seite zunächst drei HTML-Schaltflächen hinzu, die dann das clientseitige JavaScript auslösen, um den Inhalt des Bereichs 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 die $find() -Methode verwendet werden, um auf zuzugreifen CollapsiblePanelExtender. $find("cpe") gibt einen Verweis darauf zurück. Von dort an lösen spezifische Methoden die anstehenden Aufgaben.

Die Methode zum Öffnen (Erweitern) des Bereichs wird aufgerufen _doOpen(). Der folgende Code implementiert die Funktion, die doOpen() aufgerufen wird, wenn auf die erste Schaltfläche geklickt wird:

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

Zum Schließen oder Reduzieren 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 Zustand des Bereichs um: von reduziert auf erweitert und umgekehrt. Macht CollapsiblePanelExtender die toggle() -Methode verfügbar, die genau dies tut: kehrt den Zustand des Bereichs 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 reduziert ist oder nicht. Abhängig vom Rückgabewert dieser Funktion wird der Bereich dann entweder erweitert (_doOpen() -Methode) oder reduziert ()-Methode:_doClose()

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 Bereichs: von reduziert in erweitert und zurück (Klicken Sie hier, um das Bild in voller Größe anzuzeigen).

Nächste