Compartilhar via

Como: Adicionar navegação simples

  • Artigo

Você pode usar os controles SiteMapPath, TreeView, ou Menu para fornecer uma maneira consistente para os usuários a navegarem seu site da Web.

O controle SiteMapPath exibe um caminho de navegação, que é também conhecido como um breadcrumb ou eyebrow, que mostra a localização da página atual e links como um caminho para voltar à página inicial do site da Web.

Observação:

Se uma página .aspx contiver um controle SiteMapPath, a página .aspx deve ser listada no arquivo Web.sitemap para o controle para processa-la.

Em um página da Web, o controle SiteMapPath exibe algo parecido com o seguinte se o usuário estiver navegando na página Treinamento:

Página Inicial > Serviços > Treinamento

O controle TreeView exibe um estrutura de árvore que os usuários podem atravessar para links para páginas diferentes no seu site.Um nó que contém nós filho pode ser expandido ou recolhido clicando nele.Quando ela é processado pela primeira vez, o controle TreeView é totalmente expandido.Em um página da Web, o controle TreeView exibe algo parecido com o seguinte:

- Home

   - Serviços

      + Treinamento

O controle Menu exibe um menu expansível que os usuários podem atravessar para links para páginas diferentes no seu site.Um nó que contém nós filho será expandido quando o cursor focaliza a item de menu.Para um exemplo de código que exibe um mapa do site em um controle Menu, consulte Como: Exibir dados de um MAP de site em controles de servidor Web não hierárquicos.

Para usar esses controles de navegação de site, você deve descrever a estrutura do seu site da Web em um arquivo Web.sitemap.

Para criar um arquivo Web.sitemap

  1. Crie um arquivo na diretório raiz, de seu Web Site, chamado WEB.sitemap.

  2. Abra o arquivo Web.sitemap e adicione o código a seguir.

    <?xml version="1.0" encoding="utf-8" ?>
<siteMap>
  <siteMapNode title="Home" >
    <siteMapNode title="Services" >
      <siteMapNode title="Training" url="~/Training.aspx"/>
    </siteMapNode>
  </siteMapNode>
</siteMap>
    Observação:

    O seu aplicativo da Web falhará se você listar um URL que não existe, ou se você listar um URL duplicado.O atributo url pode iniciar com o atalho "~/", que indica a raiz do aplicativo.Para obter mais informações, consulte Caminhos de Site Web do ASP.NET.

    Mais tarde nesse tópico, você irá criar o página Training.aspx.

  3. Salve o arquivo, e feche-o.

Para adicionar navegação de site a uma página da Web

  1. Crie um arquivo no diretório raiz de seu site Web chamado Training.aspx.

  2. Abra o Training.aspx e adicione o seguinte.

    <%@ Page Language="VB" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script >

</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" >
  <title>Simple Navigation Controls</title>
</head>
<body>
  <form id="form1" >
  <div>

  <h2>Using SiteMapPath</h2>
  <asp:SiteMapPath ID="SiteMapPath1" Runat="server">
  </asp:SiteMapPath>


  <asp:SiteMapDataSource ID="SiteMapDataSource1" Runat="server" />

  <h2>Using TreeView</h2>
  <asp:TreeView ID="TreeView1" Runat="Server" DataSourceID="SiteMapDataSource1">
  </asp:TreeView>

  <h2>Using Menu</h2>
  <asp:Menu ID="Menu2" Runat="server" DataSourceID="SiteMapDataSource1">
  </asp:Menu>

  <h2>Using a Horizontal Menu</h2>
  <asp:Menu ID="Menu1" Runat="server" DataSourceID="SiteMapDataSource1"
    Orientation="Horizontal" 
    StaticDisplayLevels="2" >
  </asp:Menu>

  </div>
  </form>
</body>
</html>

    <%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script >
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
  <title>Simple Navigation Controls</title>
</head>
<body>
  <form id="form1" >
  <div>

  <h2>Using SiteMapPath</h2>
  <asp:SiteMapPath ID="SiteMapPath1" Runat="server">
  </asp:SiteMapPath>


  <asp:SiteMapDataSource ID="SiteMapDataSource1" Runat="server" />

  <h2>Using TreeView</h2>
  <asp:TreeView ID="TreeView1" Runat="Server" DataSourceID="SiteMapDataSource1">
  </asp:TreeView>

  <h2>Using Menu</h2>
  <asp:Menu ID="Menu2" Runat="server" DataSourceID="SiteMapDataSource1">
  </asp:Menu>

  <h2>Using a Horizontal Menu</h2>
  <asp:Menu ID="Menu1" Runat="server" DataSourceID="SiteMapDataSource1"
    Orientation="Horizontal" 
    StaticDisplayLevels="2" >
  </asp:Menu>

  </div>
  </form>
</body>
</html>

  3. Salve e feche o arquivo e, em seguida, você pode exibir o arquivo em um navegador para ver como os controles exibem a estrutura de navegação do seu site.

Segurança

Você pode ocultar os links na sua estrutura de navegação de membros de funções específicas de segurança.Para obter mais informações, consulte Cortes de segurança em mapas de site no ASP.NET.

Consulte também

Tarefas

Como: Personalizar a aparência de controles de servidor Web SiteMapPath

Conceitos

Personalizando a Aparência (Look and Feel) do Controle do Servidor Web TreeView

Cortes de segurança em mapas de site no ASP.NET

Tornando navegação em sites do ASP.NET seguro

Proteção de acesso a dados

Referência

SiteMapPath

TreeView

Menu

Outros recursos

Segurança de aplicativos ASP.NET em ambientes hospedados