.NET + Ajax

Treeview dinâmica com ASP.NET e Ajax

Quinta-feira, 14/08/2008 às 12h00, por Danilo Abranches

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: http://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:

Clique no nó Times, depois no campo de texto, digite "RJ" e clique em Add.

Agora clique em RJ e, depois no campo de texto, digite "Vasco" e clique em Add.

Posso adicionar quantos nós quiser e isso sem precisar recarregar a página uma vez se quer!

É incrível o que você consegue fazer utilizando esses novos componentes do ASP.NET! Muito legal!

É isso ai pessoal, até a próxima!

Comente também

1 Comentário

Fabio Lima

Boa tarde Danilo,

Preciso de uma ajuda com um probleminha no objeto TreeView. Gostaria que você pudesse me ajudar.

Ao rodar a minha aplicação recebo o seguinte erro:

Mensagem: Objeto esperado
Linha: 149
Caractere: 1
Código: 0
URI: http://localhost:52447/DeskWeb/Modulos/Processos/ListaProcessos.aspx?idUsuarioSistema=5&iTipoAcesso=Nivel%204&vlDataHoraSistema=01/01/2003%2004:44:42

erro no código da página:

<script type="text/javascript">
//<![CDATA[

WebForm_InitCallback();var ctl00_ContentPlaceHolder1_treeView_Data = new Object();
ctl00_ContentPlaceHolder1_treeView_Data.images = ctl00_ContentPlaceHolder1_treeView_ImageArray;
ctl00_ContentPlaceHolder1_treeView_Data.collapseToolTip = "Recolher {0}";
ctl00_ContentPlaceHolder1_treeView_Data.expandToolTip = "Expandir {0}";
ctl00_ContentPlaceHolder1_treeView_Data.expandState = theForm.elements['ctl00_ContentPlaceHolder1_treeView_ExpandState'];
ctl00_ContentPlaceHolder1_treeView_Data.selectedNodeID = theForm.elements['ctl00_ContentPlaceHolder1_treeView_SelectedNode'];
for (var i=0;i<6;i++) {
var preLoad = new Image();
if (ctl00_ContentPlaceHolder1_treeView_ImageArray[i].length > 0)
preLoad.src = ctl00_ContentPlaceHolder1_treeView_ImageArray[i];
}
ctl00_ContentPlaceHolder1_treeView_Data.lastIndex = 5;
ctl00_ContentPlaceHolder1_treeView_Data.populateLog = theForm.elements['ctl00_ContentPlaceHolder1_treeView_PopulateLog'];
ctl00_ContentPlaceHolder1_treeView_Data.treeViewID = 'ctl00$ContentPlaceHolder1$treeView';
ctl00_ContentPlaceHolder1_treeView_Data.name = 'ctl00_ContentPlaceHolder1_treeView_Data';
//]]>
</script>

Ele mostra as informações do banco, mas sem as imagens de "collapse".

Se puder me ajudar a entender esse problema.

Obrigado.

Fabio

Há 1 ano Responder

Qual a sua opinião?

Cursos Online

Planejamento Estratégico Digital

A web tem se tornado fundamental para o sucesso das marcas. Entrar de forma estruturada, com uma boa estratégia é indispensável. Esse curso é voltado a marcas que desejam fazer a diferença.