ASP.NET: TreeView IE WebControl com banco de dados

Este artigo aborda o uso do controle WebControl TreeView que vem junto com o pacote IE WebControl.

por Ramon Durães

Estaremos utilizando o controle WebControl TreeView que vem junto com o pacote IE WebControl.
http://download.microsoft.com/download/2/9/0/290e3bc2-a238-447f-ad45-98e590b3048b/TreeViewControl.msi

O exemplo abaixo acessa uma base de dados agrupando o resultado e adicionando ao ListView. O segredo desse componente é adicionar os Nodes. Que são os itens. Então tenha sempre a preocupação de quando adicionar um Node, este Node tem que ser adicionado em um local na arvore.

Figura 1 - TreeView com banco de dados

Insira um webform e adicione um componente TreeView

Figura 2 - Adicionando Treeview

Inserido procedimento Page_Load

Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) _
    Handles MyBase.Load
        If Not Me.Page.IsPostBack Then
            "Procedimento para Carregar Treeview
            Me.CarregaTreeView()
        End If
End Sub

Inserido procedimento para carregar TreeView

"Aqui está o codigo para carregarTreeview 
    Sub CarregaTreeView() 
        Dim strQuery As System.Text.StringBuilder 
        Dim strCategoria As String = "" 
        Dim dtProdutos As DataTable 

        strQuery.Append("select  P.ProductID,ProductName,C.CategoryName ")
	strQuery.Append("from Products P,Categories C ") 
        strQuery.Append("where P.CategoryID=C.CategoryID ") 
        strQuery.Append("order by C.CategoryName,P.ProductName asc ") 
        dtProdutos = Me.ExecutaQuery(strQuery.ToString) 

        TreeView1.Nodes.Clear()   " Limpando Treeview 
        TreeView1.ExpandLevel = 1 " Expandindo 

        Dim Node As New TreeNode  " Inicializando Node 
        Dim i As Int32 = 0 " Variavel para loop 

        "////////////////////////////////////////////////////////////////// 
        "////    Adicionando Node Raiz                                   // 
        "////////////////////////////////////////////////////////////////// 
        Node.ImageUrl = "imagestree/xpMyComp.gif" " Normal
        Node.ExpandedImageUrl = "imagestree/xpMyComp.gif" " Expandido
        Node.Text = "Produtos"
        TreeView1.Nodes.AddAt(0, Node) " Adicionando  

        "////////////////////////////////////////////////////////////////////////////
        "//                     Adicionando nodes                                  //
        "//       O Código abaixo realiza loop pelo DataTable e Agrupa             //
        "//////////////////////////////////////////////////////////////////////////// 

        Try 
            For i = 0 To dtProdutos.Rows.Count - 1 
                If Not strCategoria.Equals(dtProdutos.Rows(i)(2)) Then
                    "Node Pai Produtos
                    strCategoria = Convert.ToString(dtProdutos.Rows(i)(2))
                    Node = New TreeNode
                    Node.ImageUrl = "imagestree/xpPanel.gif" " Image
                    Node.ExpandedImageUrl = "imagestree/xpPanel.gif"
                    Node.Text = strCategoria " Descricao
                    TreeView1.Nodes(0).Nodes.Add(Node) " Adicionando  

                    "Node Produtos_Filho 
                    Node = New TreeNode
                    Node.ImageUrl = "imagestree/person.gif"
                    Node.ExpandedImageUrl = "imagestree/person.gif"
                    Node.Text = Convert.ToString(dtProdutos.Rows(i)(1))
                    Node.NavigateUrl = "produtos.aspx?id=" + _
			Convert.ToString(dtProdutos.Rows(i)(0))
                    Node.Target = "_TOP"
                    TreeView1.Nodes(0).Nodes(TreeView1.Nodes(0).Nodes.Count - 1).Nodes.Add(Node) 
                Else 
                    "Node Produtos_Filho 
                    Node = New TreeNode
                    Node.ImageUrl = "imagestree/person.gif"
                    Node.ExpandedImageUrl = "imagestree/person.gif"
                    Node.Text = Convert.ToString(dtProdutos.Rows(i)(1))
                    Node.NavigateUrl = "produtos.aspx?id=" + _
			Convert.ToString(dtProdutos.Rows(i)(0))
                    Node.Target = "_TOP"
                    TreeView1.Nodes(0).Nodes(TreeView1.Nodes(0).Nodes.Count - 1).Nodes.Add(Node) 
                End If 
            Next 
        Catch ex As Exception
            Response.Write("Falha Treeview " + ex.Message.ToString)
        End Try 
End Sub 

Inserido procedimento para consulta ao banco de dados

"Executa query no banco de dados e retorna DataTable
"Ajustar String de acesso banco de dados de acordo com necessidade 
Private Function ExecutaQuery(ByVal query As String) As DataTable 
    Dim conn As New SqlConnection("Data Source=127.0.0.1; Initial atalog=Northwind;UID=sa;Pwd=") 
    Dim da As New SqlDataAdapter(query, conn)
    Dim dt As New DataTable 

    Try 
	da.Fill(dt)  
    Catch ex As SqlException 
	Response.Write("Erro SQL" + ex.Message.ToString) 
    Catch ex As Exception 
	Response.Write("Erro Geral:" + ex.Message.ToString) 
    Finally 
    	dt.Dispose()
        da.Dispose()
	conn.Dispose() 
    End Try 
	
    Return dt 
End Function

Finalizando

Este é um ótimo componente e colocando boas imagens você conseguirá um bom resultado na sua aplicação. Para fazer download das imagens que utilizei, clique aqui.

O que você gostaria de ver ?

Aguardo seu comentário! Participe!!! Até próximo artigo!