Recolher e expandir um painel de JavaScript (C#)

por Christian Wenz

Baixar código ou baixar PDF

O controle CollapsiblePanel no kit de ferramentas de controle do ASP.NET AJAX estende um painel e fornece a capacidade de recolher seu conteúdo e expandi-lo novamente. Essas duas ações também podem ser disparadas a partir do código JavaScript personalizado.

Visão geral

O controle CollapsiblePanel no kit de ferramentas de controle do ASP.NET AJAX estende um painel e fornece a capacidade de recolher seu conteúdo e expandi-lo novamente. Essas duas ações também podem ser disparadas a partir do código JavaScript personalizado.

Etapas

Em primeiro lugar, crie uma nova página ASP.NET e inclua o ScriptManager dentro do elemento um <form>. Isso carrega a biblioteca do ASP.NET AJAX que é exigida pelo kit de ferramentas de controle:

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

Em seguida, crie um painel com texto para que o efeito recolher/expandir possa ser visto:

<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 você pode ver, o painel faz referência a uma classe CSS que é mostrada aqui (e basicamente define uma cor de plano de fundo e a largura do painel):

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

O controle CollapsiblePanelExtender requer o atributo TargetControlID para que o kit de ferramentas saiba qual painel deve ser recolhido ou expandido após a solicitação:

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

Infelizmente, o extensor atualmente não expõe uma API específica para recolher ou expandir o painel, mas alguns métodos não documentados farão isso. Em primeiro lugar, adicione três botões HTML à página, o que irá disparar o JavaScript do lado do cliente para recolher ou expandir o conteúdo do painel:

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

No código JavaScript do lado do cliente (iniciado com <script type="text/javascript">), o método $find() precisa ser usado para acessar o CollapsiblePanelExtender. $find("cpe") retornará uma referência a ele. A partir daí, métodos específicos resolverão a tarefa em questão.

O método para abrir (expandir) o painel é chamado de _doOpen(); o código a seguir implementa a função doOpen() chamada quando o primeiro botão é clicado:

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

Para fechar ou recolher o painel, o método _doClose() precisa ser executado. Assim, quando o usuário clica no segundo botão, o seguinte código JavaScript é chamado:

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

O terceiro botão alterna o estado do painel: de recolhido para expandido, e vice-versa. O CollapsiblePanelExtender expõe o método toggle() que faz exatamente isso: reverte o estado do painel. No entanto, há também outra abordagem (que é usada internamente pelo método toggle()): o método get_Collapsed() da CollapsiblePanelExtender() nos informa se o painel está recolhido ou não. Dependendo do valor de retorno dessa função, o painel será expandido (método_doOpen()) ou o método recolhido (_doClose()):

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

o terceiro botão altera o estado do painel: de recolhido para expandido e para trás

O terceiro botão altera o estado do painel: de recolhido para expandido e de volta (clique para exibir a imagem em tamanho normal)