Aggiunta dinamica di un riquadro Accordion (VB)

di Christian Wenz

Scaricare il PDF

Il controllo Accordion in AJAX Control Toolkit fornisce più riquadri e consente all'utente di visualizzare uno di essi alla volta. I pannelli vengono in genere dichiarati all'interno della pagina stessa, ma il codice lato server può essere usato per ottenere lo stesso risultato.

Informazioni generali

Il controllo Accordion in AJAX Control Toolkit fornisce più riquadri e consente all'utente di visualizzare uno di essi alla volta. I pannelli vengono in genere dichiarati all'interno della pagina stessa, ma il codice lato server può essere usato per ottenere lo stesso risultato.

Gradi

Il controllo Accordion espone tutte le proprietà importanti al codice lato server. Tra le altre cose, la Panes proprietà concede l'accesso alla raccolta di pannelli che costituiscono la fisarmonica. Ogni riquadro è di tipo AccordionPane. È quindi semplice creare un riquadro di questo tipo:

Dim ap1 As New AccordionPane()

La proprietà di HeaderContainer fornisce l'accesso ai controlli ASP.NET all'interno della sezione dell'intestazione del pannello; la proprietà di ContentContainer di AccordionPane esegue la stessa operazione per la sezione del contenuto del pannello. In questo modo ASP.NET codice può aggiungere contenuto ai riquadri:

ap1.HeaderContainer.Controls.Add(New LiteralControl("Using Code"))
ap1.ContentContainer.Controls.Add(New LiteralControl("Adding panes using code is really flexible."))

Infine, i riquadri devono essere aggiunti alla Panes raccolta di Accordion:

acc1.Panes.Add(ap1)

Ecco un codice completo sul lato server che aggiunge due riquadri a un controllo Accordion:

<script runat="server">
Sub Page_Load()
 If Not Page.IsPostBack Then
 Dim ap1 As New AccordionPane()
 ap1.HeaderContainer.Controls.Add(New LiteralControl("Using Markup"))
 ap1.ContentContainer.Controls.Add(New LiteralControl("Adding panes using markup is really simple."))
 Dim ap2 As New AccordionPane()
 ap2.HeaderContainer.Controls.Add(New LiteralControl("Using Code"))
 ap2.ContentContainer.Controls.Add(New LiteralControl("Adding panes using code is really flexible."))
 acc1.Panes.Add(ap1)
 acc1.Panes.Add(ap2)
 End If
End Sub
</script>

L'unico elemento mancante è l'Accordion stesso, che dipende dalla presenza del controllo ASP.NET ScriptManager.

<form id="form1" runat="server">
 <asp:ScriptManager ID="asm" runat="server" />
 <div>
 <ajaxToolkit:Accordion ID="acc1" runat="server" 
 HeaderCssClass="header" ContentCssClass="content" Width="300px" FadeTransitions="true">
 </ajaxToolkit:Accordion>
 </div>
</form>

Per completare l'esempio, le due classi CSS a cui si fa riferimento nel controllo Accordion forniscono informazioni sullo stile per il browser:

<style type="text/css">
 .header {background-color: blue;}
 .content {border: solid;}
</style>

I dati nella fisarmonica sono stati aggiunti dinamicamente dal codice lato server (fare clic per visualizzare l'immagine a dimensione intera)