Compressione ed espansione di un pannello da JavaScript (C#)

di Christian Wenz

Scaricare il PDF

Il controllo CollapsiblePanel nel ASP.NET AJAX Control Toolkit estende un pannello e fornisce la possibilità di comprimerne il contenuto ed espanderlo di nuovo. Queste due azioni possono essere attivate anche da codice JavaScript personalizzato.

Informazioni generali

Il controllo CollapsiblePanel nel ASP.NET AJAX Control Toolkit estende un pannello e fornisce la possibilità di comprimerne il contenuto ed espanderlo di nuovo. Queste due azioni possono essere attivate anche da codice JavaScript personalizzato.

Gradi

Prima di tutto, creare una nuova pagina ASP.NET e includere l'oggetto ScriptManager all'interno di un <form> elemento. In questo modo viene caricata la libreria ASP.NET AJAX richiesta da Control Toolkit:

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

Creare quindi un pannello con un testo in modo che sia possibile visualizzare l'effetto di compressione/espansione:

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

Come si può notare, il pannello fa riferimento a una classe CSS che viene mostrata qui (e definisce fondamentalmente un colore di sfondo e la larghezza del pannello):

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

Il CollapsiblePanelExtender controllo richiede l'attributo TargetControlID in modo che il toolkit conosca quale pannello comprimere o espandere su richiesta:

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

Sfortunatamente, l'extender attualmente non espone un'API specifica per comprimere o espandere il pannello, ma alcuni metodi non documentati funzioneranno. Prima di tutto, aggiungere tre pulsanti HTML alla pagina, che attiverà quindi javaScript sul lato client per comprimere o espandere il contenuto del pannello:

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

Nel codice JavaScript sul lato client (avviato con <script type="text/javascript">), il metodo $find() deve essere usato per accedere al CollapsiblePanelExtender. $find("cpe") restituirà un riferimento a esso. D'ora in poi, metodi specifici risolveranno il compito da svolgere.

Il metodo per l'apertura (espansione) del pannello viene chiamato _doOpen(). Il codice seguente implementa la doOpen() funzione chiamata quando si fa clic sul primo pulsante:

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

Per chiudere o comprimere il pannello, è necessario eseguire il _doClose() metodo . Quindi, quando l'utente fa clic sul secondo pulsante, viene chiamato il codice JavaScript seguente:

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

Il terzo pulsante attiva/disattiva lo stato del pannello: da compresso a espanso e viceversa. CollapsiblePanelExtender Espone il toggle() metodo che esegue esattamente questa operazione: inverte lo stato del pannello. Esiste tuttavia anche un altro approccio (usato internamente dal metodo): il toggle()get_Collapsed() metodo di CollapsiblePanelExtender() indica se il pannello è compresso o meno. A seconda del valore restituito di questa funzione, il pannello viene quindi espanso (_doOpen() metodo) o compresso (_doClose()):

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

Il terzo pulsante modifica lo stato del pannello: da compresso a espanso e indietro (fare clic per visualizzare l'immagine a dimensione intera)