Aggiunta dinamica di un riquadro Accordion (VB)
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.
Panoramica
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.
Passaggi
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 riquadri che costituiscono la Accordion. Ogni riquadro è di tipo AccordionPane. È quindi semplice creare un riquadro di questo tipo:
Dim ap1 As New AccordionPane()
La HeaderContainer proprietà di AccordionPane fornisce l'accesso ai controlli ASP.NET all'interno della sezione intestazione del riquadro. La ContentContainer proprietà di AccordionPane esegue la stessa operazione per la sezione contenuto del riquadro. 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 lato server completo 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 è il 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)
