Contraer y expandir un panel desde JavaScript (C#)

por Christian Wenz

Descargar PDF

El control CollapsiblePanel del Kit de herramientas de control de ASP.NET AJAX extiende un panel y le proporciona la capacidad de contraer su contenido y expandirlo de nuevo. Estas dos acciones también se pueden desencadenar desde código JavaScript personalizado.

Información general

El control CollapsiblePanel del Kit de herramientas de control de ASP.NET AJAX extiende un panel y le proporciona la capacidad de contraer su contenido y expandirlo de nuevo. Estas dos acciones también se pueden desencadenar desde código JavaScript personalizado.

Pasos

En primer lugar, cree una nueva página ASP.NET e incluya el elemento ScriptManager dentro del elemento <form>. Esta acción carga la biblioteca de ASP.NET AJAX que requiere el Kit de herramientas de control:

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

A continuación, cree un panel con texto para que se pueda ver el efecto de contraer o expandir:

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

Como puede ver, el panel hace referencia a una clase CSS que se muestra aquí (y básicamente define un color de fondo y el ancho del panel):

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

El control CollapsiblePanelExtender requiere el atributo TargetControlID para que el kit de herramientas sepa qué panel contraer o expandir tras la solicitud:

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

Por desgracia, el extensor no expone actualmente una API específica para contraer o expandir el panel, pero algunos métodos no documentados lo harán. En primer lugar, agregue tres botones HTML a la página, los cuales desencadenarán el código JavaScript del lado cliente para contraer o expandir el contenido del 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();" />

En el código JavaScript del lado cliente (iniciado con <script type="text/javascript">), el método $find() debe usarse para tener acceso a CollapsiblePanelExtender. $find("cpe") devolverá una referencia a él. A partir de ahí, los métodos específicos resolverán la tarea en cuestión.

El método para abrir (expandir) el panel se llama _doOpen(); el código siguiente implementa la función doOpen() a la que se llama cuando se hace clic en el primer botón:

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

Para cerrar o contraer el panel, debe ejecutarse el método _doClose(). Por lo tanto, cuando el usuario hace clic en el segundo botón, se llama al código JavaScript siguiente:

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

El tercer botón alterna el estado del panel: de contraído a expandido y viceversa. El control CollapsiblePanelExtender expone el método toggle(), que hace exactamente eso: invierte el estado del panel. Sin embargo, también hay otro enfoque (que se usa internamente en el método toggle()): el método get_Collapsed() de CollapsiblePanelExtender() indica si el panel está contraído o no. Según el valor devuelto de esta función, el panel se expande (método _doOpen()) o se contrae (método _doClose()):

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

El tercer botón cambia el estado del panel: de contraído a expandido y al revés (haga clic para ver la imagen a tamaño completo).

Siguiente