Associação de Dados com um Accordion (VB)
por Christian Wenz
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 são provenientes diretamente da fonte de dados (Clique para exibir a imagem em tamanho real)
