ASP .NET - Vinculando um TreeView a um XMLDataSource

Hoje vamos vincular um controle TreeView da ASP .NET a um componente XmlDataSource exibindo os resultados em uma página ASP .NET Web Forms.

O controle TreeView pode ser usado para consumir informação de uma fonte de dados hierárquica como um arquivo XML e de estruturas de tabelas e pastas e então exibir esta informação em uma página web.

O principais recursos do controle TreeView são:

Vinculação de dados automática, o que permite que os nós do controle sejam ligados aos dados hierárquicos, como um documento XML;
Suporte a navegação através de integração com o controle SiteMapDataSource;
Texto de nó que pode ser exibido tanto como texto selecionável quanto como hyperlinks;
Aparência personalizável através de temas, imagens definidas pelo usuário, e estilos;
Acesso via código ao modelo de objetos TreeView o qual permite criar arvores de forma dinâmica criar árvores, popular nós, definir propriedades, etc.;
Preenchimento de nós através de callbacks do lado do cliente para o servidor (em navegadores com suporte);
A capacidade de exibir uma caixa de seleção ao lado de cada nó;

O controle TreeView é feito de um ou mais nós (nodes) e cada entrada na árvore (tree) é chamado nó (node) e é representado pelo objeto TreeNode. A seguir temos uma descrição dos diferentes tipos de nós no TreeView:

Tipo de nó	Descrição
Root(Raiz)	Um nó que não possui nenhum nó pai e possui um ou mais nós filhos.
Parent(Pai)	Um nó que possui um nó pai e um ou mais nós filhos.
Leaf(Folha)	Um nó que não possui nenhum nó filho.

Por padrão um controle TreeView possui somente um nó Root, mas podemos criar múltiplos nós Root em sua estrutura.

Cada nó tem uma propriedade Text e uma propriedade Value. O valor da propriedade Text é exibida no controle TreeView, enquanto a propriedade Value é usada para armazenar quaisquer dados adicionais sobre o nó, como dados passados para o evento de postagem que está associado com o nó.

Quando um nó é clicado ele pode disparar um evento de seleção (via postback) ou navegar para outra página. Quando a propriedade NavigateUrl não estiver definida, clicar em um nó irá disparar o evento SelectedNodeChanged que pode ser tratado para fornecer a funcionalidade desejada.

Cada nó também possui uma propriedade SelectAction que pode ser usada para determina ações específicas que acontecem quando um nó for clicado, tal como expandir ou contrair os nós. Ao invés de disparar um evento Selection para navegar para uma página quando o nó for clicado, defina a propriedade NavigateUrl do nó para o valor diferente de string vazia("").

Obtendo o caminho virtual e o físico

O método MapPath é usado para resolver caminhos virtuais e caminhos físicos.

Quando rodamos uma aplicação ASP .NET usando o servidor de desenvolvimento na máquina local o caminho não é o mesmo que seria se estivéssemos rodando no servidor.

Quando usamos MapPath a utilização do til (~) indica a raiz do caminho virtual. É preciso usar o til (~) para que a ASP .NET consiga distinguir se o caminho é relativo (com o til) ou absoluto (sem o til).

Exemplos:

1- Caminhos virtuais	2- Caminhos Físicos
~/App_Data/Sample.xml ~/ ~/Map.txt	C:\Website\Files\Sample.xml C:\Website\Default.aspx C:\Website\Map.txt

Podemos usar MapPath em qualquer arquivo em nosso web site ASP .NET. (No projeto ASP .NET)

Nota: Os métodos Server.MapPath e Request.MapPath atuam praticamente da mesma forma.

Podemos também obter um caminho virtual usando a propriedade ApplicationPath :

//retorna o caminho virtual da aplicação
string appPath = HttpContext.Current.Request.ApplicationPath; ( C# )

Dim appPath As String = HttpContext.Current.Request.ApplicationPath ( VB .NET )

Para converter o caminho virtual para o caminho físico podemos usar Request.MapPath:

//converte o caminho virtual da aplicação em camiho físico
string physicalPath = HttpContext.Current.Request.MapPath(appPath); ( C# )

Dim physicalPath As String = HttpContext.Current.Request.MapPath(appPath) ( VB .NET )

Objetivo

Exibir a estrutura de arquivos de uma pasta no servidor

Recursos usados:

Visual Studio Express 2012 for web
Linguagem VB .NET e/ou C#

Criando o web site

Abra o Visual Studio 2012 Express for Web e clique em New Web Site;

Selecione a linguagem Visual Basic (ou C#) e o template ASP .NET Empty Web Site e informe o nome TreeView_XMLDataSource;

A seguir no menu WEBSITE clique em Add New Item e selecione o template WebForm aceitando no nome padrão Default.aspx;

Vamos agora criar um arquivo XML que será nossa fonte de dados.

No menu WEBSITE clique em Add New Item e selecione o template XML File informando o nome Vendas.xml;

Defina o seguinte código no arquivo Vendas.xml:

<?xml version="1.0" encoding="utf-8" ?>
<Clientes>
  <Cliente ClienteId="1" Nome="Macoratti">

    <Pedidos>
      <Pedido PedidoId="1" DataEnvio="06-09-2011">
        <PedidoItens>
          <PedidoItem PedidoItemId="1" Numero="123" Descricao="Grande" Quantidade="5" Preco="22.00"></PedidoItem>
          <PedidoItem PedidoItemId="2" Numero="1234" Descricao="Pequeno" Quantidade="6" Preco="99.00"></PedidoItem>
        </PedidoItens>
      </Pedido>

      <Pedido PedidoId="2" DataEnvio="09-12-2011">
        <PedidoItens>
          <PedidoItem PedidoItemId="3" Numero="153" Descricao="Medio" Quantidade="7" Preco="232.00"></PedidoItem>
          <PedidoItem PedidoItemId="4" Numero="1236" Descricao="Metade" Quantidade="8" Preco="299.00"></PedidoItem>
        </PedidoItens>
      </Pedido>
    </Pedidos>

    <Faturas>
      <Fatura FaturaId="5" Valor="99.23" />
      <Fatura FaturaId="6" Valor="88.89" />
    </Faturas>

  </Cliente>
  <Cliente ClienteId="2" Nome="Miriam">
    <Pedidos>
      <Pedido PedidoId="3" DataEnvio="08-09-2011">
        <PedidoItens>
          <PedidoItem PedidoItemId="11" Numero="1223" Descricao="Grande" Quantidade="52" Preco="22.00"></PedidoItem>
          <PedidoItem PedidoItemId="22" Numero="12134" Descricao="Pequeno" Quantidade="62" Preco="99.00"></PedidoItem>
        </PedidoItens>

      </Pedido>
      <Pedido PedidoId="4" DataEnvio="09-12-2011">
        <PedidoItens>
          <PedidoItem PedidoItemId="33" Numero="153" Descricao="Medio" Quantidade="57" Preco="232.00"></PedidoItem>
          <PedidoItem PedidoItemId="44" Numero="1236" Descricao="Metade" Quantidade="89" Preco="299.00"></PedidoItem>
        </PedidoItens>

      </Pedido>

    </Pedidos>
    <Faturas>
      <Fatura FaturaId="7" Valor="99.23" />
      <Fatura FaturaId="8" Valor="88.89" />
    </Faturas>

  </Cliente>
</Clientes>

Temos aqui um arquivo XML que mostra uma estrutura hierárquica de Clientes, Pedidos, Itens do Pedido e Faturas. (Este é apenas um exemplo e você pode usar o arquivo XML que desejar.)

A seguir selecione o arquivo Default.aspx abrindo-o no editor.

Selecione a guia Source e inclua um controle XMLDataSource a partir da ToolBox na página.

Com o controle na página clique em - XMlDataSource Tasks e a seguir clique em Configure DataSource...

A seguir na janela Configure Data Source, em Data File, clique no botão Browse e localize o arquivo Vendas.xml selecionando-o em seguida:

Agora vamos incluir um controle TreeView a partir da ToolBox na página Default.aspx no modo Source e configure suas propriedades conforme abaixo:

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>TreeView com XMLDataSource</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:XmlDataSource ID="Xmldatasource1" runat="server" DataFile="~/Vendas.xml"></asp:XmlDataSource>
        <asp:TreeView ID="TreeView1" runat="server" DataSourceID="Xmldatasource1" ShowLines="true" Width="511px">
        <DataBindings>
        <asp:TreeNodeBinding DataMember="Cliente" TextField="Nome" ValueField="ClienteId" />
        <asp:TreeNodeBinding DataMember="Pedido" TextField="DataEnvio" ValueField="PedidoId" />
        <asp:TreeNodeBinding DataMember="PedidoItem" TextField="Descricao" ValueField="PedidoItemId" />
        <asp:TreeNodeBinding DataMember="Fatura" TextField="Valor" ValueField="FaturaId" />
        </DataBindings>
        </asp:TreeView>
    </div>
    </form>
</body>
</html>

Note que definimos a propriedade DataSourceID do controle TreeView como sendo igual ao ID do componente XMLDataSource(Xmldatasource1) ao qual definimos o nosso arquivo Vendas.xml.

A seguir definimos as propriedades DataMember, TextField e ValueField do controle TreeView na seção <DataBindings>.

O controle TreeView contém uma propriedade DataBindings que é uma coleção de objetos TreeNodeBinding que definem a ligação entre um DataItem e um TreeNode.

A propriedade DataBindings obtém uma coleção de objetos TreeNodeBinding que define um relacionamento entre os itens de dados e o nó com o qual ele esta vinculado.

O componente XMLDataSouce implementa a interface IHierarchicalDataSouce e define a propriedade DataSourceId do controle TreeView para o valor do ID do controle de fonte de dados, e o controle TreeView vincula automaticamente o controle da fonte de dados especificado.

Visualizando o projeto em modo Design teremos o seguinte resultado:

Executando o projeto do web site iremos obter:

Pegue o projeto completo aqui : TreeView_XMLDataSource.zip

Flp 3:1 Quanto ao mais, irmãos meus, regozijai-vos no Senhor. Não me é penoso a mim escrever-vos as mesmas coisas, e a vós vos dá segurança.

Flp 3:2 Acautelai-vos dos cães; acautelai-vos dos maus obreiros; acautelai-vos da falsa circuncisão.

Veja os Destaques e novidades do SUPER DVD Visual Basic (sempre atualizado) : clique e confira !

Quer migrar para o VB .NET ?

Veja mais sistemas completos para a plataforma .NET no Super DVD .NET , confira...
Curso Básico VB .NET - Vídeo Aulas

Quer aprender C# ??

Chegou o Super DVD C# com exclusivo material de suporte e vídeo aulas com curso básico sobre C#.
Curso C# Basico - Video Aulas

Gostou ? Compartilhe no Facebook Compartilhe no Twitter

Referências:

José Carlos Macoratti

ASP .NET - Vinculando um TreeView a um XMLDataSource

ASP - Navegação com Site Map , Menu , TreeView e Master ...

VB .NET - Populando o controle TreeView com tabelas e ...

C # - Usando o controle TreeView - Macoratti.net

Os novos controles de vinculação de dados - Macoratti.net

Usando XmlDataSource - Macoratti.net

Exibindo dados XML e filtrando com XPath - Macoratti.net