Adicionar Dinamicamente um Painel de Acordeão (C#)

por Christian Wenz

Descarregar PDF

O controlo Accordion no AJAX Control Toolkit fornece múltiplos painéis e permite ao utilizador exibir um deles de cada vez. Os painéis são normalmente declarados dentro da própria página, mas o código do lado do servidor pode ser usado para alcançar o mesmo resultado.

Descrição geral

O controlo Accordion no AJAX Control Toolkit fornece múltiplos painéis e permite ao utilizador exibir um deles de cada vez. Os painéis são normalmente declarados dentro da própria página, mas o código do lado do servidor pode ser usado para alcançar o mesmo resultado.

Passos

O controlo 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 ali são do tipo AccordionPane. É, portanto, trivial criar um painel desse tipo.

AccordionPane ap1 = new AccordionPane();

A HeaderContainer propriedade de AccordionPane fornece acesso aos controlos ASP.NET dentro da secção de cabeçalho do painel; a ContentContainer propriedade de AccordionPane faz o mesmo para a secção de conteúdo do painel. Isto 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."));

Finalmente, o(s) painel(es) devem ser adicionados à Panes coleção do acordeão:

acc1.Panes.Add(ap1);

Aqui está um código completo do lado do servidor que adiciona dois painéis a um controlo 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 em falta é o acordeão propriamente dito, que depende da presença do controlo 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 terminar o exemplo, as duas classes CSS referenciadas no controlo Accordion fornecem informação de estilo para o navegador:

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

Os dados no acordeão eram adicionados dinamicamente por código do lado do servidor (Clique para ver a imagem em tamanho real)