ASP.NET Navigation: Conhecendo os controles de navegação

Olá pessoal, neste artigo veremos os conceitos e exemplos práticos dos controles existentes na aba Navigation, do ASP.NET 3.5. Acompanhem:

Temos nesta aba três controles, que são os seguintes:

SiteMapPath

Este controle, como o próprio nome diz, é o mapa do site. Ele fornece uma excelente visualização de que local exato do site você está, auxiliando o usuário em sua navegação. Confira abaixo sua imagem e sintaxe no aspx:

<asp:SiteMapPathID="SiteMapPath1"runat="server">

</asp:SiteMapPath>

Menu

Este controle permite que exibamos um menu em nossa página web. Podemos ainda definir este controle como estático ou dinâmico, dependendo de nossa necessidade. Veja como ele é, definido como estático, e sua sintaxe padrão no aspx:

<asp:MenuID="Menu1"runat="server">

</asp:Menu>

TreeView

O TreeView fornece uma hierarquia representada por nós e demonstra grande utilidade quando desejamos reproduzir uma estrutura de dados aninhados. Os nós, neste caso, podem ser expandidos, permitindo assim, que os usuários naveguem através de uma estrutura hierárquica e articulada. Confira sua imagem e sintaxe:

<asp:TreeViewID="TreeView1"runat="server">

</asp:TreeView>

Conceitos explicados, vamos aos exemplos práticos.

Crie uma aplicação Web qualquer e adicione duas páginas nela, com os nomes Clientes e Cadastro. Agora, temos 3 páginas, contando a Default.aspx que é criada automaticamente.Arraste um SiteMapPath em cada uma das páginas. Agora vá emAdd> New Item no Solution Explorer. Escolha a categoria Web, o templateSiteMap, dê um nome e clique em OK. Na página que abre, devemos configurar a estrutura hierárquica de nossas páginas, faça como abaixo:

<siteMapNodeurl="~\Default.aspx"title="Home"description="Página Inicial">
	<siteMapNodeurl="~\Clientes.aspx"title="Gerenciamento de Clientes">
		<siteMapNodeurl="~\Cadastro.aspx"title="Cadastro de Clientes" />
	</siteMapNode>
</siteMapNode>

Note que a tagdescription é opcional. Agora vá a Default.aspx e adicione o controle SiteMapProvider, que é responsável por definir o Data Source de nosso SiteMap. Como o provider padrão é o XML, ele usará o arquivo que acabamos de criar. Veja:

<asp:SiteMapDataSourceID="SiteMapDataSource1"runat="server"/>

Rode a aplicação e navegue pelas páginas:

Aproveitando o exemplo, adicione um controle Menu na Default.aspx, e na opção Choose Data Source escolha o SiteMapDataSource. Veja o resultado:

Finalizando os exemplos, adicione um TreeView na Default.aspx, altere também seu Data Source e veja o resultado:

Lembrando que podemos definir manualmente os nós do TreeView, mas para este exemplo defini o XML do Sitemap como DataSource padrão para os 3 controles.

Assim podemos usar estes controles para facilitar a navegação web dos usuários de nossa aplicação.