Início > ASP.NET > Como utilizar uma Tree View no ASP.NET

Como utilizar uma Tree View no ASP.NET

Um assunto que gera muitas dúvidas é como criar um Menu hierárquico em seu WebSite, alimentando esse Menu dinamicamente de acordo com o Perfil do Usuário que está acessando o WebSite. Para realizar essa função de uma forma muito simples é necessário utilizar basicamente dois elementos:

  • Componente TreeView do ASP.NET
  • Recursividade

Incluindo uma TreeView na página ASPX

Para incluir uma TreeView na sua página basta arrastar o componente existente na toolbox, ele está localizado no Menu “Navigation”, conforme visto na Figura 1.

 

image

Figura 1

 

Após arrastá-la para a página teremos o código e a visualização conforme vistos na figura 2

image

image

Figura 2

 

A TreeView é composta pelos “Nodes” um Node é representado pela classe TreeNode, a idéia básica da construção de uma árvore é termos um node raiz e suas folhas, sendo que cada uma das folhas pode ter suas folhas e assim por diante, criando uma estrutura multi nível.

 

Recursividade

 

Uma função é chamada de Recursiva quando para a sua solução ela precisa recorrer a ela mesma, ou seja, uma função Recursiva em algum momento de sua execução fará uma chamada para ela mesma. É importante ter bastante cuidado ao criar uma função recursiva para que ela não fique em “loop” infinito.

No caso de montar um menu hierárquivo a melhor forma de “popular” esse menu é através de uma função recursiva, pois como cada item do menu pode ter sub-itens sem limitação, após a função criar o item ela pode chamar ela mesma para criar os filhos desse item e assim por diante.

 

Preenchendo a Tree View

No exemplo desse Artigo temos uma classe chamada “Item” que representa os dados de um item do Menu, esses dados poderiam ser obtidos por exemplo de uma tabela de Funcionalidades x Perfil de um usuário de um Sistema. As propriedades dessa classe são:

  • Nome: Nome do Item;
  • Url: Endereço para acessar a funcionalidade;
  • Id: Código único para o item;
  • IdPai: Código do Item pai.

O código C# da classe é mostrado na figura 3.

Figura 3
  1. /// <summary>
  2.     /// Classe que representa um item do Menu
  3.     /// </summary>
  4.     public class Item
  5.     {
  6.         public string Nome { get; set; }
  7.         public string Url { get; set; }
  8.         public int Id { get; set; }
  9.         public int? IdPai { get; set; }
  10.     }

 

Para esse exemplo foram criados elementos “fictícios” para o menu e estes armazenados em uma coleção do tipo Item chamada de colItem, conforme a figura 4.

 

Figura 4
  1. public List<Item> colItem = new List<Item>();
  2.  
  3.  
  4.      /// <summary>
  5.      /// Simula alguns itens da árvore de Menus
  6.      /// </summary>
  7.      private void CarregarItens()
  8.      {
  9.  
  10.          Item pai = new Item();
  11.          pai.Nome = "ROOT";
  12.          pai.Id = 0;
  13.          pai.Url = "";
  14.          pai.IdPai = null;
  15.  
  16.          Item filho1 = new Item();
  17.          filho1.Nome = "FILHO 1";
  18.          filho1.Id = 1;
  19.          filho1.Url = "http://url1&quot;;
  20.          filho1.IdPai = 0;
  21.  
  22.          Item filho2 = new Item();
  23.          filho2.Nome = "FILHO 2";
  24.          filho2.Id = 2;
  25.          filho2.Url = "";
  26.          filho2.IdPai = 0;
  27.  
  28.          Item filho21 = new Item();
  29.          filho21.Nome = "FILHO 21";
  30.          filho21.Id = 21;
  31.          filho21.Url = "http://url21&quot;;
  32.          filho21.IdPai = 2;
  33.  
  34.  
  35.          Item filho22 = new Item();
  36.          filho22.Nome = "FILHO 22";
  37.          filho22.Id = 22;
  38.          filho22.Url = "http://url22&quot;;
  39.          filho22.IdPai = 2;
  40.  
  41.  
  42.          this.colItem.Add(pai);
  43.          this.colItem.Add(filho1);
  44.          this.colItem.Add(filho2);
  45.          this.colItem.Add(filho21);
  46.          this.colItem.Add(filho22);
  47.  
  48.      }

 

Na figura 5 é mostrado o código fonte da função recursiva “CarregarTreeView”, responsável por gerar os elementos “multi-nível” do Menu. É importante observar que essa função recebe como parâmetro um item, que é o itemPai e seu respectivo Node Criado.

 

Figura 5
  1. /// <summary>
  2. /// Função Recursiva para gerar um Menu Hierárquico
  3. /// </summary>
  4. /// <param name="pai"></param>
  5. /// <param name="nodePai"></param>
  6. private void CarregarTreeView(Item pai, TreeNode nodePai)
  7. {
  8.     // Recupera os itens do Menu que são do ITEM (pai) passado como parâmetro para a função
  9.     List<Item> temp = (from x in colItem
  10.                        where x.IdPai == pai.Id
  11.                        select x).ToList();
  12.  
  13.     // Para cada filho encontrado
  14.     foreach (Item ite in temp)
  15.     {
  16.         // Cria um novo "node" para o menu atribuindo nome, código e url
  17.         TreeNode node = new TreeNode(ite.Nome, ite.Id.ToString(), string.Empty, ite.Url, string.Empty);
  18.         // se o item for pai, ou seja não tem url de navegação
  19.         // configura para que ao clicar no seu nome abra os seus filhos
  20.         if (node.NavigateUrl == string.Empty)
  21.         {
  22.             node.SelectAction = TreeNodeSelectAction.Expand;
  23.         }
  24.         // Chama a função recursivamente para o novo node criado.
  25.         this.CarregarTreeView(ite,node);
  26.  
  27.         // Adiciona ao node pai o seu filho
  28.         nodePai.ChildNodes.Add(node);
  29.     }
  30. }

 

Para inicializar a recursão foi criada a função InicializarMenu que faz o carregamento dos itens “fakes”  e cria o primeiro elemento do Menu, o item root que dará início à recursão.

 

Figura 6
  1. /// <summary>
  2.      /// Utilizado para criar o elemento "root" do menu e
  3.      /// inicializar a recursão.
  4.      /// </summary>
  5.      private void InicializarMenu()
  6.      {
  7.          this.CarregarItens();
  8.  
  9.          // Gera o Primeiro item, o Pai do TreeView
  10.          // no caso do exemplo o item pai é o de código 0
  11.          var itemPai = (from x in colItem
  12.                         where x.Id == 0
  13.                         select x).ToList();
  14.  
  15.          Item ite = itemPai[0] as Item;
  16.  
  17.          // Cria o node para o PAI
  18.          TreeNode node = new TreeNode(ite.Nome, ite.Id.ToString(), string.Empty, ite.Url, string.Empty);
  19.  
  20.          // Define que ao clicar no nome do NODE ele mostre os elementos filhos
  21.          node.SelectAction = TreeNodeSelectAction.Expand;
  22.  
  23.          // Inicializa a recursão com o item pai e seu node.
  24.          this.CarregarTreeView(ite, node);
  25.  
  26.          // o parâmetro 0 deixa a treeview recolhida
  27.          TreeView1.ExpandDepth = 0;
  28.          // Adiciona o node e seus filhos à treew view
  29.          TreeView1.Nodes.Add(node);
  30.          // popula a tree view
  31.          TreeView1.DataBind();
  32.  
  33.      }

 

A classe TreeNode tem algumas propriedades importantes:

  • ChildNodes: coleção com os filhos do Node;
  • DataItem: Permite guardar algum valor para ser associado ao item;
  • Depth: nível do node no Menu;
  • Expanded: se true força o node a ser carregado de modo aberto;
  • NavigateUrl: Url que será acessada ao clicar no Node;
  • Parent: Obtem o Node pai do deste;
  • SelectAction: Indica a ação que será feita ao clicar no item, os valores possível são os definidos na enumração TreeNodeSelectAction;
  • Text: Texto que será exibido ;
  • Target: utilizado para abrir a página definida no NavigateUrl em um frame específico;
  • ToolTip: Dica do Node;
  • Value: valor do tipo string que pode ser usado para armazenar alguma informação adicional

A enumeração TreeNodeSelectAction irá definir a ação realizada ao clicar em algum item do menu, são possíveis os seguintes valores:

  • Expand: ao clicar serão exibidos os itens filhos e o evento TreeNodeExpanded é disparado
  • None: nenhum ação á realizada;
  • Select: navega para o item definido na NavigateUrl e o evento SelectedNodeChanged é disparado.
  • SelectExpand: executa os procedimentos descritos em Expand e Select.

Nas figuras 7 e 8 são mostrados os códigos necessários para testar o exemplo.

 

Figura 7
  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. using System.Web.UI;
  6. using System.Web.UI.WebControls;
  7. using System.IO;
  8.  
  9. namespace WebTreeView
  10. {
  11.     /// <summary>
  12.     /// Classe que representa um item do Menu
  13.     /// </summary>
  14.     public class Item
  15.     {
  16.         public string Nome { get; set; }
  17.         public string Url { get; set; }
  18.         public int Id { get; set; }
  19.         public int? IdPai { get; set; }
  20.     }
  21.  
  22.     public partial class Tree : System.Web.UI.Page
  23.     {
  24.  
  25.         public List<Item> colItem = new List<Item>();
  26.  
  27.  
  28.         /// <summary>
  29.         /// Simula alguns itens da árvore de Menus
  30.         /// </summary>
  31.         private void CarregarItens()
  32.         {
  33.  
  34.             Item pai = new Item();
  35.             pai.Nome = "ROOT";
  36.             pai.Id = 0;
  37.             pai.Url = "";
  38.             pai.IdPai = null;
  39.  
  40.             Item filho1 = new Item();
  41.             filho1.Nome = "FILHO 1";
  42.             filho1.Id = 1;
  43.             filho1.Url = "http://url1&quot;;
  44.             filho1.IdPai = 0;
  45.  
  46.             Item filho2 = new Item();
  47.             filho2.Nome = "FILHO 2";
  48.             filho2.Id = 2;
  49.             filho2.Url = "";
  50.             filho2.IdPai = 0;
  51.  
  52.             Item filho21 = new Item();
  53.             filho21.Nome = "FILHO 21";
  54.             filho21.Id = 21;
  55.             filho21.Url = "http://url21&quot;;
  56.             filho21.IdPai = 2;
  57.  
  58.  
  59.             Item filho22 = new Item();
  60.             filho22.Nome = "FILHO 22";
  61.             filho22.Id = 22;
  62.             filho22.Url = "http://url22&quot;;
  63.             filho22.IdPai = 2;
  64.  
  65.  
  66.             this.colItem.Add(pai);
  67.             this.colItem.Add(filho1);
  68.             this.colItem.Add(filho2);
  69.             this.colItem.Add(filho21);
  70.             this.colItem.Add(filho22);
  71.  
  72.         }
  73.  
  74.         protected void Page_Load(object sender, EventArgs e)
  75.         {
  76.             if (!Page.IsPostBack)
  77.             {
  78.                 this.InicializarMenu();
  79.             }
  80.         }
  81.  
  82.  
  83.         /// <summary>
  84.         /// Utilizado para criar o elemento "root" do menu e
  85.         /// inicializar a recursão.
  86.         /// </summary>
  87.         private void InicializarMenu()
  88.         {
  89.             this.CarregarItens();
  90.  
  91.             // Gera o Primeiro item, o Pai do TreeView
  92.             // no caso do exemplo o item pai é o de código 0
  93.             var itemPai = (from x in colItem
  94.                            where x.Id == 0
  95.                            select x).ToList();
  96.  
  97.             Item ite = itemPai[0] as Item;
  98.  
  99.             // Cria o node para o PAI
  100.             TreeNode node = new TreeNode(ite.Nome, ite.Id.ToString(), string.Empty, ite.Url, string.Empty);
  101.  
  102.             // Define que ao clicar no nome do NODE ele mostre os elementos filhos
  103.             node.SelectAction = TreeNodeSelectAction.Expand;
  104.  
  105.             // Inicializa a recursão com o item pai e seu node.
  106.             this.CarregarTreeView(ite, node);
  107.  
  108.             // o parâmetro 0 deixa a treeview recolhida
  109.             TreeView1.ExpandDepth = 0;
  110.             // Adiciona o node e seus filhos à treew view
  111.             TreeView1.Nodes.Add(node);
  112.             // popula a tree view
  113.             TreeView1.DataBind();
  114.  
  115.         }
  116.  
  117.  
  118.         /// <summary>
  119.         /// Função Recursiva para gerar um Menu Hierárquico
  120.         /// </summary>
  121.         /// <param name="pai"></param>
  122.         /// <param name="nodePai"></param>
  123.         private void CarregarTreeView(Item pai, TreeNode nodePai)
  124.         {
  125.             // Recupera os itens do Menu que são do ITEM (pai) passado como parâmetro para a função
  126.             List<Item> temp = (from x in colItem
  127.                                where x.IdPai == pai.Id
  128.                                select x).ToList();
  129.  
  130.             // Para cada filho encontrado
  131.             foreach (Item ite in temp)
  132.             {
  133.                 // Cria um novo "node" para o menu atribuindo nome, código e url
  134.                 TreeNode node = new TreeNode(ite.Nome, ite.Id.ToString(), string.Empty, ite.Url, string.Empty);
  135.                 // se o item for pai, ou seja não tem url de navegação
  136.                 // configura para que ao clicar no seu nome abra os seus filhos
  137.                 if (node.NavigateUrl == string.Empty)
  138.                 {
  139.                     node.SelectAction = TreeNodeSelectAction.Expand;
  140.                 }
  141.                 // Chama a função recursivamente para o novo node criado.
  142.                 this.CarregarTreeView(ite, node);
  143.  
  144.                 // Adiciona ao node pai o seu filho
  145.                 nodePai.ChildNodes.Add(node);
  146.             }
  147.         }
  148.     }
  149. }

Código Fonte da página TreeView.aspx.cs

 

 

Figura 8
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Tree.aspx.cs" Inherits="WebTreeView.Tree" %>
  2.  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  4.  
  5. <html xmlns="http://www.w3.org/1999/xhtml"&gt;
  6. <head runat="server">
  7.     <title></title>
  8. </head>
  9. <body>
  10.     <form id="form1" runat="server">
  11.     <div>
  12.         <asp:TreeView ID="TreeView1" runat="server">
  13.     </asp:TreeView>
  14.     </div>
  15.     </form>
  16.  
  17. </body>
  18. </html>

Código Fonte da página TreeView.aspx

A partir desse artigo ficou claro que criar um menu multi-nível não é tão complicado como parece, desde que seja utilizado o conceito de Recursividade.

Até o próximo artigo.

Referências

TreeView: http://msdn.microsoft.com/pt-br/library/k5c13faz.aspx

Anúncios
Categorias:ASP.NET
  1. Nenhum comentário ainda.
  1. No trackbacks yet.

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: