Demonstra Passo a passo: Exibindo dados hierárquicos em um controle TreeView
O controle TreeView do ASP.NET é projetado para apresentar aos usuários dados em uma estrutura hierárquica.Os usuários podem abrir nós individuais que por sua vez contêm nós filhos.O controle TreeView é adequado para exibir dados XML, mas pode ser usado para quaisquer dados que possam ser representados em uma hierarquia.Esta explicação passo a passo mostra noções básicas de uso do controle TreeView e várias maneiras de se exibir dados hierárquicos.
Tarefas ilustradas nesta explicação passo a passo incluem:
Usando o controle TreeView para exibir dados XML.
Personalizando a exibição do controle TreeView.
Exibindo registros de tabelas de bancos de dados relacionadas no controle TreeView.
Pré-requisitos
A fim de concluir este explicação passo a passo, será necessário:
Visual Web Developer Microsoft (Visual Studio).
Microsoft Data Access Components (MDAC) versão 2.7 ou posterior.
Se você está usando o Microsoft Windows XP ou o Windows Server 2003, você já tem MDAC 2.7.Entretanto, se você estiver usando o Microsoft Windows 2000, você deve atualizar o MDAC já instalado no seu computador.Para obter mais informações, consulte "Instalação do Microsoft Data Access Components (MDAC) " na MSDN Library.
Acesso ao banco de dados do SQL Server Northwind.Para obter informações sobre como baixar e instalar o banco de dados Northwind de exemplo do SQL servidor, consulte Instalando o banco de dados de exemplo no Microsoft SQL servidor Web site.
.gif "Observação")
Observação:Se você precisa de informações sobre como efetuar o logon para o computador que está executando o SQL Server, contate o administrador do servidor.
Nome de usuário e senha de uma conta do SQL Server que tenha acesso ao banco de dados Northwind, se o banco de dados do SQL Server não estiver no mesmo computador que o servidor Web.
Criando o Site Web
Crie um novo site e uma nova página seguindo estas etapas.
Para criar um site do sistema de arquivos
Abra o Visual Web Developer.
Sobre o Arquivo menu, clicar Novoe, em seguida, clicar Site da Web.If you are using Visual Web Developer Express, on the File menu, click NewWeb Site.
The Novo site caixa de diálogo é exibida.
Em O Visual Studio installed templates, clicar Site da Web do ASP.NET.
Na caixa Location, selecione File System e digite o nome da pasta onde você deseja manter as páginas do seu site Web.
Por exemplo, digite o nome da pasta C:\WebSites\HierarchicalData.
Na lista Language, clique a linguagem de programação com a qual você prefere trabalhar.
Clique em OK.
Visual Web Developer cria a pasta e uma nova página chamada Default.aspx.
Criando um arquivo XML para dados
Crie um novo arquivo XML seguindo estas etapas.
Para criar o arquivo XML
No Solution Explorer, clique com o botão direito do mouse em site e clique em Add New Item.
Na caixa de diálogo Add New Item, em StandardTemplates, clique em XML File.
No Nome na caixa, digite Bookstore.XML e, em seguida, clicar Adicionar.
O Visual Web Developer cria o novo arquivo Bookstore.xml e abre o editor de códigos.
Copie os seguintes dados XML e cole-os no arquivo Bookstore.xml, substituindo o que já esteja no arquivo.
<?xml version="1.0" standalone="yes"?> <bookstore> <genre name="fiction"> <book ISBN="10-000000-001"> <title>The Iliad and The Odyssey</title> <price>12.95</price> <comments> <userComment rating="4"> Best translation I've read. </userComment> <userComment rating="2"> I like other versions better. </userComment> </comments> </book> <book ISBN="10-000000-999"> <title>Anthology of World Literature</title> <price>24.95</price> <comments> <userComment rating="3"> Needs more modern literature. </userComment> <userComment rating="4"> Excellent overview of world literature. </userComment> </comments> </book> </genre> <genre name="nonfiction"> <book ISBN="11-000000-002"> <title>Computer Dictionary</title> <price>24.95</price> <comments> <userComment rating="3">A valuable resource.</userComment> </comments> </book> <book ISBN="11-000000-003"> <title>Cooking on a Budget</title> <price>23.95</price> <comments> <userComment rating="4">Delicious!</userComment> </comments> </book> </genre> </bookstore>O arquivo XML contém informações sobre livros que podem estar disponíveis em uma livraria on-line.
Salvar o arquivo Bookstore.xml, e feche-o.
Exibindo dados XML no controle TreeView
Nesta seção, você usará o controle TreeView para exibir os dados XML.Para começar, você pode exibir as informações em XML sem qualquer configuração especial.
Para exibir os dados XML
Abra a página Default.aspx e, em seguida, alterne para modo de design.
Em Caixa de Ferramentas, a partir do grupo Navegação, arraste um controle TreeView para a página.
Clique com o botão direito do mouse no controle TreeView e clique em Show Smart Tag.
No menu TreeView Tasks, na lista suspensa Choose Data Source, selecione New Data Source.O Data Source Configuration Wizard aparece.
Na janela Where will the application get data from?, selecione XML File.Deixe a identificação padrão para a fonte de dados.Clique em OK.
No Configurar fonte de dados caixa de diálogo, no Arquivo de dados , digite ~ / Bookstore.XML e, em seguida, clicar OK.
Agora você pode testar a página.
Para testar a página
Pressione CTRL+F5 para executar a página.
Recolha e, em seguida, expanda os nós do controle.
Por padrão, os nós exibem apenas os nomes das marca dos elementos no arquivo Bookstore.xml.
Você pode personalizar as informações exibidas no controle TreeView criando ligações personalizadas, que permitem que você especifique quais informações do arquivo XML serão exibidas em cada nó.
Para criar ligações personalizadas
Na página Default.aspx, clique com o botão direito do mouse no controle TreeView e clique em Show Smart Tag.
No menu TreeView Tasks, clique em Edit TreeNode Databindings.
A caixa de diálogo TreeView DataBindings Editor aparece.
Desmarque a caixa de seleção Auto generate data bindings porque você definirá as ligações de dados.
clicar Adicionar para criar uma nova ligação e, em Propriedades de vinculação de dados, set DataMember como bookstore e conjunto Texto como Book Information.
Você está configurando a ligação para exibir um valor estático porque o nó Bookstore é o nó mais alto no arquivo.xml e aparece apenas uma vez no controle TreeView.
clicar Adicionar para criar uma segunda ligação e, em Propriedades de vinculação de dados, conjunto DataMember e de gêneroTextField ao nome.
Isso especifica que o nó lerá o elemento genre> no arquivo .xml e atribuirá seus atributos name para a propriedade TextField.
clicar Adicionar para criar uma terceira ligação para livros e, em DataBinding Properties, conjunto DataMember para book e TextField como ISBN.
Clique em OK.
Agora você pode testar a página.
Para testar a página
Pressione CTRL+F5 para executar a página.
Neste momento, o controle TreeView exibe os três níveis correspondentes às ligações que você definiu.Os três níveis são o nó raiz, rotulado Book Information, os grupos de gêneros, e os detalhes de ISBN.
Você pode criar dados ligados para qualquer elemento em um arquivo XML, mas você pode ligar apenas aos atributos do elemento, ao texto interno, ao nome do elemento ou ao valor do elemento.Você não pode ligar a nenhum dos elementos aninhados.Para exibir os valores dos elementos aninhados, crie ligações separadas para esses elementos.Um método alternativo é transformar o arquivo XML usando XSLT, para que os elementos internos sejam convertidos em atributos.Para obter mais informações e um exemplo, consulte a propriedade XmlDataSource.TransformFile.
Exibindo dados relacionais no controle TreeView
O controle TreeView pode exibir qualquer tipo de dados hierárquicos, mesmo que a hierarquia dos dados seja lógica, como em um banco de dados, e não física, como em um arquivo XML.Nesta seção, você usará o controle TreeView para exibir dados de tabelas relacionadas no banco de dados Northwind.
Para iniciar, você criará uma conexão com o computador que esteja executando o SQL Server no qual você possui o banco de dados Northwind.
Para criar uma conexão com o Servidor SQL
Em Server Explorer, clique com o botão direito do mouse em Data Connections e clique em Add Connection.Se você estiver usando o Visual Web Developer Express, use o Database Explorer.
Aparecerá a caixa de diálogo Add Connection.
Se a lista Fonte de Dados não exibir o Microsoft SQL Server (SqlClient), clique em Modificar e, na caixa de diálogo Modificar Fonte de Dados, selecione Microsof SQL Server.
Se a página Choose Data Source aparecer, na lista Data source, selecione o tipo de fonte de dados que você irá utilizar.Para este passo a passo, o tipo da fonte de dados será Microsoft SQL Server.Na lista Provedor de Dados, clique em .NET Framework Data Provider for SQL Server e, em seguida, clique em Continue
Observação:Se a guia Server Explorer não estiver visível no Visual Web Developer, no menu View, clique em Server Explorer.Se a guia Database Explorer não estiver visível, no menu View, clique em Database Explorer.
Na caixa Add Connection, digite seu nome de servidor na caixa Server Name.
Para a seção Log on to the server, selecione a opção que for apropriada para acessar o banco de dados do SQL Server em execução (segurança integrada ou identificação e senha específicos) e, se necessário, digite um nome de usuário e senha.
Selecione a caixa de seleção Save my Password.
Observação:Em aplicativos de produção, não use Save my Password porque isso incorpora o nome de usuário e a senha nos arquivos do aplicativo.
Em selecionar ou digite um nome de banco de dados, digite Northwind.
Clique em Test Connection, e quando você tiver certeza de que ele funciona, clique em OK.
A nova conexão foi criada em Data Connections no Server Explorer (ou Database Explorer).
Configurando um controle TreeView para exibir dados de bancos de dados
Nesta seção, você preencherá dinamicamente os nós com dados.Os nós de primeiro nível representarão dados mestre — neste caso, categorias.Quando os usuários clicam em um nó, os nós filhos da categoria serão criados fazendo uma consulta ao banco de dados que recupera os produtos dessa categoria.Para recuperar os dados, você pode usar um controle de fontes de dados.Entretanto, nesta explicação passo a passo, você irá criar e executar uma consulta programaticamente.
Para começar, crie uma nova página e um novo controle TreeView.
Para criar a nova página e o controle TreeView
Adicione um página da Web do ASP.NET (página Web Form) chamada de TreeViewDynamic.aspx ao seu site.
Abra a página TreeViewDynamic.aspx, alternar para modo Design e, em seguida, no Toolbox, da Padrão agrupar, arrastar um Label controle até a página e nomeie-o labelStatus.
O controle labelStatus é usado apenas para relatar erros.
Em Caixa de Ferramentas, a partir do grupo Navegação, arraste um controle TreeView para a página.
clicar com o botão direito do mouse o TreeView controle, clique em Propriedadese, em seguida, conjunto MaxDataBindDepth to 2.
Clique com o botão direito do mouse no controle TreeView, clique em Show Smart Tasks e, em seguida, no menu TreeView Tasks, clique em Edit Nodes.
No TreeView Node Editor diálogo, clicar no ícone rotulado Adicionar um nó raize, em Propriedades, conjunto Texto e de lista de produtosPopulateOnDemand to true.
Clique em OK.
Você está criando o nó mais alto da árvore, que contém somente texto estático.
Para configurar o arquivo Web.config
Em Caixa de Ferramentas, a partir do grupo Data, arraste um controle SqlDataSource para a página.
Selecione o controle SqlDataSource e, em seguida, clique em Show Smart Tag.
No menu SqlDataSource Tasks, clique em Configure Data Source.
O assistente Configure Data Source - SqlDataSource1 exibe uma página na qual você pode escolher uma conexão.
Na caixa Which data connection should your application use to connect to the database?, digite a conexão que você criou em "Para criar uma conexão para SQL Server", e em seguida, clique em Next.
O assistente exibe uma página em que você pode escolher armazenar a string de conexão em um arquivo de configuração.Armazenar a sequência de conexão no arquivo de configuração possui duas vantagens:
É mais seguro que armazená-la na página.
Você pode usar a mesma sequência de conexão em várias páginas
Marque a caixa de seleção Yes, save this connection as e clique em Next.
O assistente exibe uma página na qual você pode especificar quais os dados que você deseja recuperar do banco de dados.
Em Specify columns from a table or view, na caixa Name, clique em Categories.
Em Columns, selecione as caixas CategoryID e CategoryName.
Clique em Next.
Clique em Finish.
Você usará a sequência de caracteres de conexão criada no arquivo Web.config posteriormente, no método RunQuery definido mais adiante nesta explicação passo a passo.Você não usará o controle SqlDataSource.
Agora, você adicionará código para preencher os nós filhos do controle quando os usuários clicarem o nó.Para adicionar nós dinamicamente, crie um manipulador de eventos para o evento TreeNodePopulate.
Para criar o manipulador de eventos
Clique com o botão direito do mouse no controle TreeView e, em Properties, clique no ícone Events.
Clique duas vezes na caixa para o evento TreeNodePopulate.
O Visual Web Developer alterna para modo Fonte.
Adicione o seguinte código destacado para o manipulador.
Protected Sub TreeView1_TreeNodePopulate(ByVal sender As Object, _ ByVal e As System.Web.UI.WebControls.TreeNodeEventArgs) _ Handles TreeView1.TreeNodePopulate If e.Node.ChildNodes.Count = 0 Then Select Case e.Node.Depth Case 0 PopulateCategories(e.Node) Case 1 PopulateProducts(e.Node) End Select End If End Subprotected void TreeView1_TreeNodePopulate( object sender, TreeNodeEventArgs e) { if (e.Node.ChildNodes.Count == 0) { switch (e.Node.Depth) { case 0: PopulateCategories(e.Node); break; case 1: PopulateProducts(e.Node); break; } } }Esse código é chamado quando um usuário clica em um nó para abri-lo.Como você deseja exibir dados diferentes em diferentes níveis da árvore, você deve determinar qual profundidade de nó o usuário clicou e, em seguida, preencher os nós desse nível apropriadamente.Nesta explicação passo a passo, o método PopulateCategories é chamado se o usuário clica o nó raiz (profundidade 0).O método PopulateProducts é chamado se o usuário clica em um nome de categoria (profundidade 1).Os métodos são mostrados na próxima seção.
O objeto TreeNodeEventArgs fornece acesso programático para o nó atual.Para preencher o nó, você adiciona elementos ao mesmo.No código exemplo, o nó é passado para o método que irá adicionar os nós filhos.
Lendo dados de nós do banco de dados
As informações a serem exibidas em cada nó vêm do banco de dados.Você deve escrever o código que executa a consulta ao banco de dados, lê os registros e cria um nó para cada registro.Esta explicação passo a passo assume que você está trabalhando com o banco de dados exemplo Northwind do SQL Server, portanto, você deve usar objetos ADO.NET do namespace System.Data.SqlClient.
Para o primeiro nível de nós (nível 0), você irá exibir uma lista de todas as categorias disponíveis.O código que você cria chama um método RunQuery, que você irá criar nesta explicação passo a passo posteriormente.
Para adicionar nós para todas as categorias
Alterne para modo de origem.
Se você estiver trabalhando com uma página de arquivo único, adicione as seguintes diretivas à parte superior da página de código.
<%@ Import Namespace="System.Data" %> <%@ Import Namespace="System.Data.SqlClient" %>Importar os namespaces tornará mais fácil escrever o código que você precisa.
Se você estiver trabalhando com uma página code-behind, alterne para a página code-behind (TreeViewDynamic.aspx.vb ou TreeViewDynamic.aspx.cs) e adicione as linhas a seguir para a parte superior do arquivo de código, fora da declaração de classe.
Imports System.Data Imports System.Data.SqlClientusing System.Data; using System.Data.SqlClient;Certifique-se de que a página ainda esteja no modo Fonte.
Adicione o seguinte método à página de código.
Sub PopulateCategories(ByVal node As TreeNode) Dim sqlQuery As New SqlCommand( _ "Select CategoryName, CategoryID From Categories") Dim ResultSet As DataSet ResultSet = RunQuery(sqlQuery) If ResultSet.Tables.Count > 0 Then Dim row As DataRow For Each row In ResultSet.Tables(0).Rows Dim NewNode As TreeNode = New _ TreeNode(row("CategoryName").ToString(), _ row("CategoryID").ToString()) NewNode.PopulateOnDemand = True NewNode.SelectAction = TreeNodeSelectAction.Expand node.ChildNodes.Add(NewNode) Next End If End Subvoid PopulateCategories(TreeNode node) { SqlCommand sqlQuery = new SqlCommand( "Select CategoryName, CategoryID From Categories"); DataSet resultSet; resultSet = RunQuery(sqlQuery); if (resultSet.Tables.Count > 0) { foreach (DataRow row in resultSet.Tables[0].Rows) { TreeNode NewNode = new TreeNode(row["CategoryName"].ToString(), row["CategoryID"].ToString()); NewNode.PopulateOnDemand = true; NewNode.SelectAction = TreeNodeSelectAction.Expand; node.ChildNodes.Add(NewNode); } } }O código cria um objeto SqlCommand que encapsula o texto da consulta.Ele passa o objeto para um método (que você escreverá) que executa a consulta ao banco de dados e retorna um objeto DataSet.O código então percorre os registros no objeto DataSet e cria um novo nó para cada registro, definindo o texto e o valor do nó com informações do banco de dados.Em seguida, o código define a propriedade PopulateOnDemand de cada nó como true, para que o nó dispare o evento TreeNodePopulate quando clicado.A propriedade SelectAction é definida para que os nós sejam expandidos por padrão.
O segundo nível de nós exibirá os produtos de cada categoria.Por esse motivo, preencher os nós dos produtos requer uma consulta parametrizada para que você possa recuperar os produtos para a categoria atual e preencher os nós filhos apropriadamente.
Para adicionar nós aos produtos
Adicione o seguinte método à página de código.
Sub PopulateProducts(ByVal node As TreeNode) Dim sqlQuery As New SqlCommand sqlQuery.CommandText = "Select ProductName From Products " & _ " Where CategoryID = @categoryid" sqlQuery.Parameters.Add("@categoryid", SqlDbType.Int).Value = _ node.Value Dim ResultSet As DataSet = RunQuery(sqlQuery) If ResultSet.Tables.Count > 0 Then Dim row As DataRow For Each row In ResultSet.Tables(0).Rows Dim NewNode As TreeNode = New _ TreeNode(row("ProductName").ToString()) NewNode.PopulateOnDemand = False NewNode.SelectAction = TreeNodeSelectAction.None node.ChildNodes.Add(NewNode) Next End If End Subvoid PopulateProducts(TreeNode node) { SqlCommand sqlQuery = new SqlCommand(); sqlQuery.CommandText = "Select ProductName From Products " + " Where CategoryID = @categoryid"; sqlQuery.Parameters.Add("@categoryid", SqlDbType.Int).Value = node.Value; DataSet ResultSet = RunQuery(sqlQuery); if (ResultSet.Tables.Count > 0) { foreach (DataRow row in ResultSet.Tables[0].Rows) { TreeNode NewNode = new TreeNode(row["ProductName"].ToString()); NewNode.PopulateOnDemand = false; NewNode.SelectAction = TreeNodeSelectAction.None; node.ChildNodes.Add(NewNode); } } }Esse código é semelhante ao código usado para preencher o nó das categorias.Uma diferença é que o objeto SqlCommand está configurado com um parâmetro que é definido em tempo de execução com o valor do nó que o usuário clicou; isto é, da categoria selecionada.Outra diferença é que a propriedade PopulateOnDemand é definida como false.Isso faz os nós dos produtos serem exibidos sem um botão de expansão, o que é necessário porque há mais nenhum nó abaixo dos produtos.
A etapa final é criar o método que executa a consulta e retorna o dataset.
Para executar a consulta
Adicione a seguinte sub-rotina à página.
Function RunQuery(ByVal sqlQuery As SqlCommand) As DataSet Dim connectionString As String connectionString = _ ConfigurationManager.ConnectionStrings _ ("NorthwindConnectionString").ConnectionString Dim dbConnection As New SqlConnection dbConnection.ConnectionString = connectionString Dim dbAdapter As New SqlDataAdapter dbAdapter.SelectCommand = sqlQuery sqlQuery.Connection = dbConnection Dim resultsDataSet As DataSet = New DataSet Try dbAdapter.Fill(resultsDataSet) Catch ex As Exception labelStatus.Text = "Unable to connect to SQL Server." End Try Return resultsDataSet End Functionprivate DataSet RunQuery(SqlCommand sqlQuery) { string connectionString = ConfigurationManager.ConnectionStrings ["NorthwindConnectionString"].ConnectionString; SqlConnection DBConnection = new SqlConnection(connectionString); SqlDataAdapter dbAdapter = new SqlDataAdapter(); dbAdapter.SelectCommand = sqlQuery; sqlQuery.Connection = DBConnection; DataSet resultsDataSet = new DataSet(); try { dbAdapter.Fill(resultsDataSet); } catch { labelStatus.Text = "Unable to connect to SQL Server."; } return resultsDataSet; }Esse código cria um adaptador de dados baseado no objeto SqlCommand passado para o mesmo.Em seguida, ele cria e preenche um dataset com o adaptador.
Agora você pode testar a página.
Para testar a página
Pressione CTRL+F5 para executar a página.
O controle TreeView é exibido com uma lista de categorias e produtos.
Clique em uma categoria para confirmar se ele recolhe e expande para mostrar uma lista de produtos para cada categoria.
Próximas etapas
Esta explicação passo a passo usou tanto dados XML hierárquicos quanto um banco de dados relacional para preencher um controle TreeView.Você pode usar o controle TreeView para trabalhar com informações de navegação em sites e dados XML como dados tabulares (lista).
Para obter detalhes sobre a navegação do site, consulte Passo a passo: Adicionando navegação de site a um site.
Para obter detalhes sobre como trabalhar mais com dados XML, consulte Demonstra Passo a passo: Criando um página da Web para exibir dados XML.
Consulte também
Tarefas
Demonstra Passo a passo: Criando um página da Web para exibir dados XML
Outros recursos
Como: Seguro Cadeia de caracteres de conexão ao usar controles da fonte de dados