Associação de Dados com um Accordion (VB)

  • Artigo

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 de cada vez. Os painéis geralmente são declarados dentro da própria página, mas a associação a uma fonte de dados oferece mais flexibilidade.

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 de cada vez. Os painéis geralmente são declarados dentro da própria página, mas a associação a uma fonte de dados oferece mais flexibilidade.

Etapas

Em primeiro lugar, uma fonte de dados é necessária. Este exemplo usa o banco de dados AdventureWorks e o microsoft SQL Server 2005 Express Edition. O banco de dados é uma parte opcional de uma instalação do Visual Studio (incluindo a edição expressa) e também está disponível como um download separado em https://go.microsoft.com/fwlink/?LinkId=64064. O banco de dados AdventureWorks faz parte do SQL Server 2005 Samples and Sample Databases (baixe em https://www.microsoft.com/download/details.aspx?id=10679). A maneira mais fácil de configurar o banco de dados é usar o Microsoft SQL Server Management Studio (/sql/ssms/download-sql-server-management-studio-ssms) e anexar o arquivo de AdventureWorks.mdf banco de dados.

Para este exemplo, pressupomos que a instância do SQL Server 2005 Express Edition é chamada SQLEXPRESS e reside no mesmo computador que o servidor Web; essa também é a configuração padrão. Se a configuração for diferente, você precisará adaptar as informações de conexão para o banco de dados.

Para ativar a funcionalidade de ASP.NET AJAX e o Kit de Ferramentas de Controle, o ScriptManager controle deve ser colocado em qualquer lugar na página (mas dentro do <form> elemento):

<asp:ScriptManager ID="asm" runat="server"/>

Em seguida, adicione uma fonte de dados à página. Para usar uma quantidade limitada de dados, selecionamos apenas as cinco primeiras entradas na tabela Vendor do banco de dados AdventureWorks. Se você estiver usando o Visual Studio assistente para criar a fonte de dados, lembre-se de que um bug na versão atual não prefixa o nome da tabela (Vendor) com Purchasing. A marcação a seguir mostra a sintaxe correta:

<asp:SqlDataSource ID="sds1" runat="server" ConnectionString="Data
 Source=(local)\SQLEXPRESS;Initial Catalog=AdventureWorks;Integrated Security=True" 
 ProviderName="System.Data.SqlClient" SelectCommand="SELECT TOP 5 
 [VendorID], [Name] FROM [Purchasing].[Vendor]" />

Lembre-se do nome (ID) da fonte de dados. Essa própria identificação deve ser usada na DataSourceID propriedade do controle Accordion:

<ajaxToolkit:Accordion ID="acc1" runat="server"
 HeaderCssClass="header" ContentCssClass="content"Width="300px" 
 DataSourceID="sds1" FadeTransitions="true">

No controle Accordion, você pode fornecer modelos para várias partes do controle, incluindo o cabeçalho (<HeaderTemplate>) e o conteúdo (<ContentTemplate>). Dentro desses elementos, basta gerar os dados da fonte de dados usando o DataBinder.Eval() método :

<HeaderTemplate><b>Vendor #<%#DataBinder.Eval(Container.DataItem, "VendorID")%></b>
 </HeaderTemplate> 
 <ContentTemplate><%#DataBinder.Eval(Container.DataItem, "Name")%></ContentTemplate> 
</ajaxToolkit:Accordion>

Quando a página é carregada, a fonte de dados deve estar associada ao accordion com este código do lado do servidor:

<script runat="server"> 
 Sub Page_Load() 
 acc1.DataBind()
 End Sub 
</script>

Para concluir este exemplo, você precisa definir as duas classes CSS referenciadas no controle Accordion (em suas propriedades HeaderCssClass e ContentCssClass). Coloque a seguinte marcação na <head> seção da página:

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

Os dados no accordion vêm diretamente da fonte de dados

Os dados no accordion são provenientes diretamente da fonte de dados (Clique para exibir a imagem em tamanho real)

AnteriorAvançar