Réduction et développement d’un panneau à partir de JavaScript (C#)

par Christian Wenz

Télécharger le PDF

Le contrôle CollapsiblePanel dans le ASP.NET AJAX Control Toolkit étend un panneau et lui permet de réduire son contenu et de le développer à nouveau. Ces deux actions peuvent également être déclenchées à partir de code JavaScript personnalisé.

Vue d’ensemble

Le contrôle CollapsiblePanel dans le ASP.NET AJAX Control Toolkit étend un panneau et lui permet de réduire son contenu et de le développer à nouveau. Ces deux actions peuvent également être déclenchées à partir de code JavaScript personnalisé.

Étapes

Tout d’abord, créez une page ASP.NET et incluez le ScriptManager dans l’élément unique <form> . Cela charge la bibliothèque AJAX ASP.NET requise par control Toolkit :

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

Ensuite, créez un panneau avec du texte afin que l’effet réduire/développer soit visible :

<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>

Comme vous pouvez le voir, le panneau fait référence à une classe CSS qui est illustrée ici (et définit essentiellement une couleur d’arrière-plan et la largeur du panneau) :

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

Le CollapsiblePanelExtender contrôle nécessite l’attribut TargetControlID afin que le kit de ressources sache quel panneau réduire ou développer à la demande :

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

Malheureusement, l’extendeur n’expose actuellement pas d’API spécifique pour réduire ou développer le panneau, mais certaines méthodes non documentées le feront. Tout d’abord, ajoutez trois boutons HTML à la page, ce qui déclenchera ensuite la réduction ou le développement du contenu du panneau côté client :

<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();" />

Dans le code JavaScript côté client (démarré par <script type="text/javascript">), la $find() méthode doit être utilisée pour accéder CollapsiblePanelExtenderau . $find("cpe") retourne une référence à celui-ci. À partir de là, des méthodes spécifiques résolvent la tâche en cours.

La méthode permettant d’ouvrir (développer) le panneau est appelée _doOpen(); le code suivant implémente la doOpen() fonction appelée lorsque vous cliquez sur le premier bouton :

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

Pour fermer ou réduire le panneau, la _doClose() méthode doit être exécutée. Par conséquent, lorsque l’utilisateur clique sur le deuxième bouton, le code JavaScript suivant est appelé :

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

Le troisième bouton bascule l’état du panneau : de réduit à développé, et vice versa. expose CollapsiblePanelExtender la toggle() méthode qui effectue exactement cela : inverse l’état du panneau. Toutefois, il existe également une autre approche (qui est utilisée en interne par la méthode) : la toggle()get_Collapsed() méthode du CollapsiblePanelExtender() indique si le panneau est réduit ou non. En fonction de la valeur de retour de cette fonction, la méthode du panneau est développée (_doOpen() méthode) ou réduite (_doClose()) :

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

Le troisième bouton modifie l’état du panneau : réduit à développé et arrière (cliquez pour afficher l’image en taille réelle)

Next