Uma alternativa de visualização dos dados de forma hierárquica, ou no formato de árvore genealógica é através do controle TreeView, que inclusive está disponível nas IDEs de várias linguagens de programação do mercado.
Nosso objetivo é apresentar uma forma de se carregar este controle dinamicamente, fazendo com que o mesmo se comporte como um menu lateral. Para tanto, vamos utilizar duas classes de modelo (com um método de persistência em cada) para simular uma base de dados que contenha as informações de menu e submenu.
Crie um novo projeto do tipo Web Site no Visual Studio (estamos utilizando a versão 2010 Ultimate no escopo deste artigo) em linguagem C#.
Clique com o botão direito sobre o nome da solução (na aba Solution Explorer) e em seguida clique na opçãoAdd New Item.
Selecione a opção Class e nomeie o arquivo para Menu.cs. Adicione mais uma classe no projeto com o nome de SubMenu.cs.
Inicialmente, vamos implementar a classe Menu conforme a listagem abaixo.
public class Menu
{
public Menu()
{
//
// TODO: Add constructor logic here
//
}
public int IDMenu { get; set; }
public string Descricao { get; set; }
public Menu(int id, string descricao)
{
this.IDMenu = id;
this.Descricao = descricao;
}
public static List<Menu> GetMenu()
{
List<Menu> lista = new List<Menu>()
{
new Menu(1, "Cadastro"),
new Menu(2, "Ferramentas"),
new Menu(3, "Relatórios")
};
return lista;
}
}
Em seguida, vamos codificar a classe SubMenu.
public class SubMenu
{
public SubMenu()
{
//
// TODO: Add constructor logic here
//
}
public int IDMenu { get; set; }
public int IDSubMenu { get; set; }
public string Descricao { get; set; }
public string URL { get; set; }
public SubMenu(int idMenu, int idSub, string descricao, string url)
{
this.IDMenu = idMenu;
this.IDSubMenu = idSub;
this.Descricao = descricao;
this.URL = url;
}
public static List<SubMenu> GetSubMenu()
{
List<SubMenu> lista = new List<SubMenu>()
{
new SubMenu(1, 1, "Clientes", "Clientes.aspx"),
new SubMenu(1, 2, "Funcionários", "Funcionario.aspx"),
new SubMenu(2, 1, "Backup", "Backup.aspx"),
new SubMenu(2, 2, "Restauração", "Restauracao.aspx"),
new SubMenu(3, 1, "Listagem de Clientes por UF", "ListClienteUF.aspx"),
new SubMenu(3, 2, "Relatório Sintético por Período", "RelSintPeriodo.aspx")
};
return lista;
}
}
Na Solution Explorer, dê um duplo clique sobre a página Default.aspx do projeto, e adicione um controleTreeView que está alocado na categoria Navigation da Toolbox.
Para concluir, só resta implementar a rotina que irá alimentar o controle dinamicamente. Pressione a tecla de atalho F7 para termos acesso ao Code Behind da página, e codifique de acordo com a listagem a seguir.
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
this.BindMenuTreeView();
}
void BindMenuTreeView()
{
foreach (Menu m in Menu.GetMenu())
{
TreeNode menu = new TreeNode(m.Descricao);
foreach (SubMenu s in SubMenu.GetSubMenu())
{
if (m.IDMenu == s.IDMenu)
{
TreeNode sub = new TreeNode(s.Descricao, "", "", s.URL, "");
menu.ChildNodes.Add(sub);
}
}
TreeView1.Nodes.Add(menu);
}
}
}
Salve o projeto e teste a aplicação pressionando a tecla de atalho F5. Se tudo correr bem, o resultado será o da imagem abaixo.
Concluindo, espero que tenham gostado, e que o exemplo sirva como uma alternativa para se carregar um TreeView de forma dinâmica.
Nenhum comentário:
Postar um comentário
Deixe aqui seu comentário