Réduire et déployer un Panel depuis du Javascript

Cet article est la traduction la plus fidèle possible de l'article original de Christian Wenz: Collapsing and Expanding a Panel from JavaScript

Le contrôle CollapsiblePanel de l'ASP.NET AJAX Control Toolkit étend les fonctionnalités d'un Panel et lui fournit la capacité de réduire son contenu et de l'étendre à nouveau. Ces deux actions peuvent également être déclenchées à partir de code JavaScript personnalisé.

Tout d'abord, créez une nouvelle page ASP.NET et ajoutez le contrôle ScriptManager à l'intérieur de la balise <form>. Cela charge les bibliothèque ASP.NET AJAX qui sont requises par le Control Toolkit:

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

Ensuite, créez un Panel avec du texte de sorte que l'effet de réduction/étirement puisse être vu:

<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 Panel référence une classe CSS qui est indiqué ci-dessous (et définit une couleur de fond ainsi que la largeur du Panel) :

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

Le contrôle CollapsiblePanelExtender a besoin de l'attribut TargetControlID afin que toolkit puisse savoir quel Panel il doit réduire ou étendre sur demande:

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

Malheureusement, l'extender ne permet actuellement pas d'exposer spécifique une API pour la réduction ou l'extension du Panel, mais certaines méthodes non documentées le font. Tout d'abord, ajoutez trois boutons HTML sur la page qui vont déclencher le JavaScript côté client afin réduire ou d'étendre le contenu du panel :

<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 (qui commence avec <script type="text/javascript"> la méthode $find() doit être utilisée pour accéder au CollapsiblePanelExtender. $find("cpe") renvoie une référence à celui-ci . A partir de là, on utilisera des méthodes spécifiques pour résoudre la tâche à accomplir.

La méthode pour ouvrir (déplier) le panel est appelée _doOpen() ; le code ci-dessous met en oeuvre la fonction doOpen() appelée lorsque le premier bouton est cliqué :

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

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

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

Le troisième bouton permet de basculer l'état du panel : de réduit à déployé, et vice versa. Le contrôle CollapsiblePanelExtender expose la méthode toggle() qui permet d'inverser l'état du panel. Mais il y a aussi une autre approche (qui est utilisée de manière interne par la méthode toggle()) : La méthode get_Collapsed() du CollapsiblePanelExtender() nous permet de savoir si le panel est replié ou non. En fonction de la valeur de retour de cette fonction, le panel est alors déplié ( grâce à la méthode _doOpen()) ou replié (grâce à la méthode _doClose()) :

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