Lista de Dados com Subitens – Parte II

 

Olá pessoal,

 

Dando continuidade ao nosso tutorial, peço que abra o arquivo ListaDeProdutos.aspx. Clique no botão ViewCode.

 

Iremos criar primeiramente o código que monta a lista de categorias. Como usaremos o banco de dados Northwind do SQL Server, devemos importar o Namespace System.Data.SqlClient e também o namespace System.Data, pois, utilizaremos o objeto DataTable.

 

Imports System.Data.SqlClient

Imports System.Data

 

Vamos criar a conexão com o banco de dados, que será com o escopo público, uma vez que utilizaremos esta mesma conexão para mais de uma consulta ao banco de dados.

 

Public sqlConn As New SqlConnection("Initial Catalog=Northwind;Data Source=Servidor;user id=SeuLogin;pwd=SuaSenha")

 

Não esqueça de fazer as devidas configurações nas string de conexão.

 

Agora digite o código abaixo, que conecta ao banco de dados e monta a lista de categorias.

 

Private Sub MontaCategorias()

        'Cria o adaptador de dados, selecionando os dados da tabela categorias

        Dim sqlAdp As New SqlDataAdapter("Select CategoryID,CategoryName from Categories", sqlConn)

        'Cria a tabela virtual de dados

        Dim dt As New DataTable

        'Preencha a tabela com os dados da consulta

        sqlAdp.Fill(dt)

        'Anexa a chave-primária da consulta ao DataList

        dlCategorias.DataKeyField = "CategoryId"

        'Indica a fonte de dados

        dlCategorias.DataSource = dt

        'Renderiza o controle

        dlCategorias.DataBind()

 

    End Sub

 

Chame este método no Page_Load:

 

Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load

        If Not Page.IsPostBack Then

            MontaCategorias()

        End If

    End Sub

 

Façamos um teste, rode a aplicação:

 

 

Isto quer dizer que o código funcionou.

 

Agora, vamos listar os subitens, que são os produtos de cada categoria.

 

Usaremos o evento ItemCreated do DataList dlCategorias para gerar os subitens, isto, porque será gerado durante o momento da criação do DataList. Digite o código conforme abaixo:

 

    Private Sub dlCategorias_ItemCreated(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.DataListItemEventArgs) Handles dlCategorias.ItemCreated

        Dim x As Integer

        'Interage com todos os itens do datalist para poder percorrer a cada índice da chave-primária

        For x = 0 To dlCategorias.Items.Count

            Dim sqlAdp As New SqlDataAdapter("Select ProductName from Products where CategoryID=" & dlCategorias.DataKeys(x) & "", sqlConn)

            'Cria a tabela virtual de dados

            Dim dt As New DataTable

            'Preencha a tabela com os dados da consulta

            sqlAdp.Fill(dt)

 

            'Cria a instância do objeto DataGrid

            Dim dgItems As DataGrid

            'Indica que o Datagrid criado acima será o que está dentro do dlCategorias

            dgItems = e.Item.FindControl("dgItems")

 

            'Indica a fonte de dados

            dgItems.DataSource = dt

            'Renderiza o Datagrid

            dgItems.DataBind()

        Next

    End Sub

 

Uma breve explicação sobre o código acima:

 

Utilizamos a instrução de repetição For, para interagir com os itens do DataList. Uma vez que este itens não estão selecionados, deve se utilizar esta forma para poder percorrer todas os índices de chave-primária. Vejam que mais a frente utilizei a variável x como índice de chave-primária a cada vez que a consulta era executada:

 

Dim sqlAdp As New SqlDataAdapter("Select ProductName from Products where CategoryID=" & dlCategorias.DataKeys(x) & "", sqlConn)

 

Mais abaixo, foi necessário criar uma instância do objeto DataGrid para armazenar o DataGrid que está dentro do DataList.

 

            Dim dgItems As DataGrid

            'Indica que o Datagrid criado acima será o que está dentro do dlCategorias

            dgItems = e.Item.FindControl("dgItems")

 

Isto foi necessário porque não é possível obter as propriedades e métodos deste DataGrid diretamente, pois, está vinculado a outro controle. Para vincular este DataGrid a novo DataGrid criado, utilizamos o método FindControl, que deve-se passar o nome do controle a ser localizado.

 

Creio que estas explicações deram uma clareada em vossas mentes, não?

 

Vamos testar a aplicação:

 

 

 

Vejam que ficou ótimo, mas pode ficar um pouquinho melhor se adicionarmos rolagem a esta lista.

 

Vá a ToolBox e adicione um Panel, e faça os ajustes de tamanho como desejar.

 

 

Apague seu conteúdo, e vá até a guia HTML.

 

Localize o código-fonte que gera o Panel1.

 

Adicione o seguinte trecho ao atributo Style:

 

OVERFLOW=auto

 

Veja a linha completa do código HTML:

 

<asp:Panel id="Panel1" style="OVERFLOW=auto;Z-INDEX: 102; LEFT: 344px; POSITION: absolute; TOP: 32px" runat="server"    Width="288px" Height="320px">Panel</asp:Panel>

 

Ok, agora volte a guia Design e arraste o DataList para dentro do Panel.

 

 

Faça os devidos ajustes e execute a aplicação.

 

 

Agora sim, perfeito. Vejam que com pouco código conseguimos uma solução impressionante.

 

 

Espero que tenham gostado, e dúvidas ou sugestões mandem para lanodecastro@hotmail.com

 

Estou aguardando, muitos abraços, e parabéns para mim que completei mais um ano de vida no dia 17 de setembro

 

Lano de Castro