Treeview dinâmica com ASP.NET e Ajax

Após ler o artigo “Explorando o ASP.NET AJAX” escrito por Ramon Durães (leia o artigo no seguinte endereço: https://imasters.com.br/artigo/9331/aspnet/explorando_o_aspnet_ajax/), fiquei um tanto impressionado com os recursos de AJAX para o ASP.NET 3.5. Então, resolvi brincar um pouco com estes recursos!

Fiz uma aplicação simples capaz de montar uma treeview dinamicamente via Ajax. Vamos lá!

Para desenvolver este exemplo, vou utilizar o Visual Web Developer 2008 Express Edition, que pode ser adquirido no seguinte endereço: http://www.microsoft.com/express/download/.

Inicie, criando um novo Web Site. Para este exemplo, vou utilizar a linguagem C#.

Adicione os seguintes componentes à página:

ScriptManager (seção Ajax Extensions da Toolbox)
UpdatePanel (seção Ajax Extensions da Toolbox)

Toda página que necessita utilizar algum recurso de ASP.NET AJAX precisa do controle ScriptManager. Ele que gerencia os scripts que são gerados para a página cliente.

O controle UpdatePanel é que permite que façamos atualizações na página sem recarregá-la.

Coloque dentro de seu UpdatePanel, os seguintes componentes:

TextBox (seção Standard da Toolbox): renomear para “txtName”
Button (seção Standard da Toolbox) : renomear para “btnAdd”, coloque na propriedade “Text”, o texto “Add”.
TreeView (seção Navigation da Toolbox): renomear para “trvPrinc”

Depois de feito isso, sua aplicação deve estar com a seguinte aparência:

Vamos agora configurar nossa treeview. Clique na treeview e depois clique no botão em forma de seta que aparece na parte superior direita dela.

Clique na opção “Edit Nodes“. Irá abrir a seguinte tela:

Clique no botão em destaque para adicionar um nó para a treeview. Depois, selecione o nó, vá à propriedade “Text” e coloque o texto “Times” e dê OK.

Rode a aplicação novamente. A aparência deve ser algo como a imagem abaixo:

Se você quiser melhorar a aparência da treeview, clique na treeview, no botão em forma de seta e depois na opção “Auto Format“. Ao fazer isso será aberta uma tela com vários temas para serem usados na treeview. Escolha um de sua preferência.

Clique na treeview, expanda a propriedade “SelectedNodeStyle” e, na opção BackColor, defina uma cor qualquer. Essa cor será a cor de fundo de um nó da treeview quando selecionado.

Agora dê um duplo clique no botão “btnAdd” e escreva o seguinte código no método criado:

if (trvPrinc.SelectedNode is TreeNode) 
{
trvPrinc.SelectedNode.ChildNodes.Add(new TreeNode(txtName.Text));
}

O código acima verifica se a propriedade da treeview SelectedNode é uma instância do objeto TreeNode e, caso seja, instanciamos um novo TreeNode e passamos este objeto criado para o método Add do objeto ChildNodes (TreeNodeCollection). Isso fará que, quando adicionarmos um nó para a treeview, este nó será filho do nó que está selecionado.

Agora execute a aplicação. A minha ficou com a seguinte aparência: