Utilizando o controle TreeView com SiteMap com Asp.Net

Neste artigo nós veremos 5 dicas,pra utilizar o controle TreeView do ASP.NET com um “bound” de um sitemap.É bem comum se utilizar do treeView para mostrar o sitemap.

Esse artigo mostra alguns desafios freqüentes que nós encontramos quando utilizamos estes controles.Eu parto do pressuposto de que você sabe o que é o sitemap,e já utilizou o controle TreeView alguma vez.

1. Como dar um bind de um sitemap ao Treeview

Um sitemap é geralmente mostrado na UI usando um controle TreeView.Segue um exemplo de sitemap abaixo:

<?xml version=”1.0″ encoding=”utf-8″ ?>

<siteMap xmlns=”http://schemas.microsoft.com/AspNet/SiteMap-File-1.0&#8243; >

<siteMapNode title=”My Favorites”>

<siteMapNode title=”Favorite Sites”>

<siteMapNode title=”ASP.NET Home” url=”http://www.asp.net&#8221; />

<siteMapNode title=”ASP.NET Articles” url=”http://www.dotnetcurry.com&#8221; />

<siteMapNode title=”Windows Client” url=”http://www.windowsclient.net&#8221; />

<siteMapNode title=”Silverlight” url=”http://silverlight.net&#8221; />

</siteMapNode>

<siteMapNode title=”Favorite Blogs”>

<siteMapNode title=”ScottGu Blog”url=”http://weblogs.asp.net/scottgu&#8221; />

<siteMapNode title=”Technology Blog” url=”http://www.devcurry.com&#8221; />

<siteMapNode title=”SQL Blog” url=”http://www.sqlservercurry.com&#8221; />

<siteMapNode title=”Food Lovers” url=”http://foodatarian.com&#8221; />

</siteMapNode>

</siteMapNode>

</siteMap>

Agora adicione um controle SiteMapDataSource da toolbox (aba data) para sua página e mude a propriedade DataSource do treeView para esse sitemapdatasource como mostrado abaixo:

<div>

<asp:TreeView ID=”TreeView1″ runat=”server” DataSourceID=”SiteMapDataSource1″>

</asp:TreeView>

<asp:SiteMapDataSource ID=”SiteMapDataSource1″ runat=”server” />

</div>

É isso.

2. Remover um nó de um treeview dinamicamente

Pra remover um nó dinamicamente do treeView,use o evento ontreenodedatabound como mostrado abaixo.Nesse exemplo, eu estou removendo o nó “Food Lovers”:

<asp:TreeView ID=”TreeView1″ runat=”server” DataSourceID=”SiteMapDataSource1″

ontreenodedatabound=”TreeView1_TreeNodeDataBound”>

</asp:TreeView>

C#

protected void TreeView1_TreeNodeDataBound(object sender, TreeNodeEventArgs e)

{

if (e.Node.Text == “Food Lovers”)

{

e.Node.Parent.ChildNodes.Remove(e.Node);

}

}

Como você pode ver abaixo o nó “Food Lovers” não é mostrado:

view1

3.Como expandir somente um nó no TreeView

Você já se deparou com a necessidade de só um único nó principal ser expandido em algum momento?Por exemplo,se o nó ’Favorite blogs’ está expandido e o usuário clica no nó ‘Favorite Sites’’ pra expandi-lo,o nó ‘Favorite Blogs’ deve se retrair.Use o seguinte código no evento TreeNodeExpanded:

protected void TreeView1_TreeNodeExpanded(object sender,

TreeNodeEventArgs e)

{

string currValue = e.Node.Value.Trim();

if (e.Node.Parent == null)

{

foreach (TreeNode node in TreeView1.Nodes)

{

if (node.Value != currValue)

{

node.Collapse();

}

}

return;

}

else

{

TreeNode tnode = e.Node.Parent;

foreach (TreeNode node in tnode.ChildNodes)

{

if (node.Value != e.Node.Value)

{

node.Collapse();

}

}

}

}

O resultado é mostrado abaixo:

view2

Como você pode ver ,o nó ‘Favorite Blogs’ retraiu-se quando o usuário clicou no nó ‘Favorite Sites’.

4. Múltiplos sitemaps para múltiplos treeViews

Por padrão,quando você adiciona um novo sitemap ao seu projeto,o arquivo default criado é Web.SiteMap.O SiteMapDatasource por padrão faz referencia a este arquivo.Entretanto,se você quiser criar múltiplo sitemaps, e dar um “bind” neles em diferentes treeViews no seu projeto,aqui você aprenderá como fazer:

Adiciona um conjunto de providers no arquivo web.config como mostrado abaixo:

<system.web>

<siteMap defaultProvider=”SiteMap1″ enabled=”true”>

<providers>

<add siteMapFile=”Web.sitemap” name=”SiteMap1″ type=”System.Web.XmlSiteMapProvider”/>

<add siteMapFile=”web2.sitemap” name=”SiteMap2″ type=”System.Web.XmlSiteMapProvider”/>

</providers>

</siteMap>

Nota:O DefaultProvider é o nome do provider,no nosso caso SiteMap1.

Agora no SiteMapDataSource, especifique o provedor que você quer utilizar.Observe  o atributo ‘SiteMapProvider’.

<asp:SiteMapDataSource ID=”SiteMapDataSource1″ runat=”server”

SiteMapProvider=”SiteMap1″ />

<asp:SiteMapDataSource ID=”SiteMapDataSource2″ runat=”server”

SiteMapProvider=”SiteMap2″ />

Finalmente de um “bind” no dataSource do TreeView para o sitemapDatasource desejado:

<asp:TreeView ID=”TreeView1″ runat=”server”

DataSourceID=”SiteMapDataSource1″>

<asp:TreeView ID=”TreeView2″ runat=”server”

DataSourceID=”SiteMapDataSource2″>

Essa é a maneira de fazer quando você tiver diversos sitemaps no seu projeto.

5. Adicionando URLs alternativas no SiteMapNode

Vamos dizer que você queira especificar uma URL diferente no sitemap e queira dar um “bind” no treeView para essa URL diferenciada em tempo de execução,veja como declarar um atributo personalizado chamado ‘secondUrl’ (ou qualquer outro nome que você deseje) no SiteMapNode no arquivo SiteMap como mostrado abaixo:

<siteMapNode title=”ASP.NET Home” url=”http://www.asp.net&#8221; secondUrl=”http://www.asp.net/ajax&#8221; />

Agora no evento TreeNodeDataBound, recupere o SiteMapNode e pra aqueles nós que contenham esse atributo personalizado.Uma vez que você tenha recuperado o SiteMapNode extraia esse atributo personalizado e mude sua propriedade NavigateUrl como mostrado abaixo:

<asp:TreeView ID=”TreeView1″ runat=”server”

DataSourceID=”SiteMapDataSource1″

OnTreeNodeDataBound=”TreeView1_TreeNodeDataBound”>

</asp:TreeView>

C#

protected void TreeView1_TreeNodeDataBound(object sender, TreeNodeEventArgs e)

{

SiteMapNode node = e.Node.DataItem as SiteMapNode;

if(!string.IsNullOrEmpty(node[“secondUrl”]))

e.Node.NavigateUrl = node[“secondUrl”];

}

Essas foram algumas dicas sobre o treeview e o arquivo sitemap.

Espero que tenha sido útil e até a próxima.

Anúncios