Adicionar dinamicamente um painel accordion (VB)

por Christian Wenz

Baixar PDF

O controle Accordion no Kit de Ferramentas de Controle AJAX fornece vários painéis e permite que o usuário exiba um deles por vez. Os painéis geralmente são declarados dentro da própria página, mas o código do lado do servidor pode ser usado para obter o mesmo resultado.

Visão geral

O controle Accordion no Kit de Ferramentas de Controle AJAX fornece vários painéis e permite que o usuário exiba um deles por vez. Os painéis geralmente são declarados dentro da própria página, mas o código do lado do servidor pode ser usado para obter o mesmo resultado.

Etapas

O controle Accordion expõe todas as propriedades importantes ao código do lado do servidor. Entre outras coisas, a Panes propriedade concede acesso à coleção de painéis que compõem o Accordion. Todos os painéis são do tipo AccordionPane. Portanto, é trivial criar um painel desse tipo:

Dim ap1 As New AccordionPane()

A HeaderContainer propriedade de AccordionPane fornece acesso aos controles ASP.NET na seção de cabeçalho do painel; a ContentContainer propriedade de AccordionPane faz o mesmo para a seção de conteúdo do painel. Isso permite que ASP.NET código adicione conteúdo aos painéis:

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

Por fim, os painéis devem ser adicionados à Panes coleção do Accordion:

acc1.Panes.Add(ap1)

Aqui está um código completo do lado do servidor que adiciona dois painéis a um controle 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>

O único elemento ausente é o próprio Accordion, que depende da presença do controle 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>

Para concluir o exemplo, as duas classes CSS referenciadas no controle Accordion fornecem informações de estilo para o navegador:

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

Os dados no accordion foram adicionados dinamicamente pelo código do lado do servidor (clique para exibir a imagem em tamanho real)