Adicionar dinamicamente um painel accordion (C#)

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:

AccordionPane ap1 = 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">
void Page_Load() 
{
 if (!Page.IsPostBack)
 {
 AccordionPane ap1 = new AccordionPane();
 ap1.HeaderContainer.Controls.Add(new LiteralControl("Using Markup"));
 ap1.ContentContainer.Controls.Add(new 
 LiteralControl("Adding panes using markup is really simple."));
 AccordionPane ap2 = 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);
 }
}
</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)