Adición de un panel Accordion de forma dinámica (VB)

por Christian Wenz

Descargar PDF

El control Accordion del Kit de herramientas de control de AJAX proporciona varios paneles y permite al usuario mostrar uno de ellos cada vez. Normalmente, los paneles se declaran dentro de la propia página, pero se puede usar código del lado servidor para lograr el mismo resultado.

Información general

El control Accordion del Kit de herramientas de control de AJAX proporciona varios paneles y permite al usuario mostrar uno de ellos cada vez. Normalmente, los paneles se declaran dentro de la propia página, pero se puede usar código del lado servidor para lograr el mismo resultado.

Pasos

El control Accordion expone todas las propiedades importantes al código del lado servidor. Entre otras cosas, la propiedad Panes concede acceso a la colección de paneles que componen el control Acordeón. Cada panel tiene el tipo AccordionPane. Por lo tanto, es muy sencillo crear este panel:

Dim ap1 As New AccordionPane()

La propiedad HeaderContainer de AccordionPane proporciona acceso a los controles ASP.NET dentro de la sección de encabezado del panel; la propiedad ContentContainer de AccordionPane hace lo mismo con la sección de contenido del panel. Esto permite que el código de ASP.NET agregue contenido a los paneles:

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

Por último, los paneles deben agregarse a la colección Panes de Accordion:

acc1.Panes.Add(ap1)

Este es un código completo del lado servidor que agrega dos paneles a un control 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>

El único elemento que falta es el propio Accordion, que depende de la presencia del control ScriptManager de ASP.NET:

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

Para finalizar el ejemplo, las dos clases CSS a las que se hace referencia en el control Accordion proporcionan información de estilo al explorador:

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

Los datos del acordeón se agregaron dinámicamente con código del lado servidor (haga clic para ver la imagen a tamaño completo).

Anterior