ASP.NET 2.0 - Navegação (Navigation)

O ASP.NET 2.0 possui controles de navegação integrados.

Navegação no site

Manter menus de navegação em sites grandes é difícil e também demorado.

No ASP.NET 2.0, os menus podem ser armazenados em arquivos, tornando a manutenção mais fácil. Este arquivo geralmente é chamado de web.sitemape são armazenados na raiz do site.

Além disso, o ASP.NET 2.0 possui três novos controles de navegação novos:

  • Menus Dinâmicos
  • TreeViews
  • Caminho do Mapa do Site

Arquivo Sitemap

Este tutorial usa o arquivo sitemap abaixo (mapa do site):

<?xml version="1.0" encoding="ISO-8859-1" ?>
<siteMap>
  <siteMapNode title="Início" url="/aspnet/w3home.aspx">
  <siteMapNode title="Serviços" url="/aspnet/w3services.aspx">
    <siteMapNode title="Treinamento" url="/aspnet/w3training.aspx"/>
    <siteMapNode title="Suporte" url="/aspnet/w3support.aspx"/>
  </siteMapNode>
  </siteMapNode>
</siteMap>

Regras para criar o arquivo sitemap:

  • O arquivo XML deve conter a tag <siteMap> ao redor do conteúdo
  • A tag <siteMap> pode ter apenas um nó filho <siteMapNode> (página "home")
  • Cada <siteMapNode> pode ter múltiplos nós filhos (páginas da web)
  • Cada <siteMapNode> possui atributos para definir o título da página e a URL

Nota:O arquivo sitemap deve ser armazenado na raiz do site, a propriedade URL deve ser relativa a essa raiz.

Menu Dinâmico

O controle <asp:Menu> pode exibir um menu de navegação padrão do site.

Exemplo de Código:

<asp:SiteMapDataSource id="nav1" runat="server" />
<form runat="server">
<asp:Menu runat="server" DataSourceId="nav1" />
</form>

No exemplo acima <asp:Menu> ControleÉ um marcador de posição para que o servidor crie um menu de navegação.

A fonte de dados do controle é Propriedade DataSourceIdpara definição.id="nav1" Conecte-o a Controle <asp:SiteMapDataSource>.

Controle <asp:SiteMapDataSource>conectará automaticamente ao arquivo sitemap padrão (web.sitemap)

Clique aqui para ver o DEMO de Menu.

TreeView

O controle <asp:TreeView> pode exibir um menu de navegação hierárquico.

Este menu parece uma árvore com ramos, que pode ser aberto ou fechado usando os símbolos + ou -.

Exemplo de Código:

<asp:SiteMapDataSource id="nav1" runat="server" />
<form runat="server">
<asp:TreeView runat="server" DataSourceId="nav1" />
</form>

No exemplo acima, Controle <asp:TreeView>É um marcador de posição para que o servidor crie um menu de navegação.

A fonte de dados do controle é Propriedade DataSourceIdpara definição.id="nav1" Conecte-o a Controle <asp:SiteMapDataSource>.

Controle <asp:SiteMapDataSource>conectará automaticamente ao arquivo sitemap padrão (web.sitemap)

Clique aqui para ver o DEMO de TreeView.

SiteMapPath

O controle SiteMapPath pode mostrar um ponteiro para a página atual (caminho de navegação). Este caminho é exibido como um link clicável para a página superior.

Diferente do controle TreeView e Menu, o controle SiteMapPathNão usar SiteMapDataSource. O controle SiteMapPath usa o arquivo web.sitemap por padrão.

Dica:Se o SiteMapPath não estiver mostrando corretamente, é provável que haja um erro de URL no arquivo web.sitemap.

Exemplo de Código:

<form runat="server">
<asp:SiteMapPath runat="server" />
</form>

No exemplo acima, Controle <asp:SiteMapPath>É um marcador de posição para que o servidor crie um menu de navegação.

Clique aqui para ver o DEMO de SiteMapPath.