Share via

Passo a passo: Adicionando navegação de site a um site

  • Artigo

Em qualquer site que contenha várias páginas, pode ser difícil construir um sistema de navegação que permite aos usuários navegar livremente entre páginas, especialmente à medida que você altera o site.A navegação em sites do ASP.NET permite que você crie um mapa do site centralizado das páginas.

Este passo-a-passo mostra informações sobre como configurar um mapa do site e como usar controles que dependam do mapa do site para adicionar navegação às páginas no web site.

Durante esta explicação passo a passo, você aprenderá a fazer o seguinte:

  • Criar um web site que tenha páginas exemplo e um arquivo site-map que descreve o layout de páginas.

  • Use o TreeView Controlar como um menu de navegação que permite aos usuários ir para qualquer página do seu site.

  • Use o SiteMapPath Controle para adicionar um caminho de navegação, também conhecido como um breadcrumb, que permite que um usuário exibir e Mover de volta até a hierarquia do site da página atual.

  • Use o Menu Controle para adicionar um menu de navegação que permite aos usuários exibir um nível de nós ao mesmo tempo.Pausar o ponteiro do mouse sobre um nó que possui nós filhos gera um submenu de os nós filhos.

  • Usar navegação do site e controles em um página mestra tal que você defina a navegação do site somente uma vez.

Pré-requisitos

Para concluir esta explicação passo a passo, será necessário o seguinte:

  • Ferramenta de desenvolvimento Microsoft Visual Web Developer.

  • O .NET Framework.

Esta explicação passo-a-passo supõe que você sabe como usar o Visual Web Developer.

Criando um site que possui páginas de exemplo e um mapa do site

Se você já tiver Criado um site da Web em Visual Web Developer, completando Demonstra Passo a passo: Criando uma página da Web básica no Visual Web DeveloperVocê pode usar esse site e Ir para a Avançar seção.Caso contrário, crie um site e uma página novos, seguindo estas etapas.

Criando um web site do sistema de arquivos

Para criar um site do sistema de arquivos

  1. Abra o Visual Web Developer.

  2. Sobre o File Menu, clique em Novo Site da Web (ou na File Menu, clique em Novoe em seguida, clique em Site).

    O Novo Site da Web caixa de diálogo é exibida.

  3. Em Modelos Visual Studio instaladoClique em Web Site ASP.NET.

  4. Na mais à esquerda. Local caixa, clique em Sistema de arquivose em seguida, no mais Direito Local Digite o nome da pasta onde você deseja manter as páginas do site da Web.

    Por exemplo, digite o nome de pasta C:\WebSites\SiteNavigation.

  5. Na Linguagem caixa, clique na programação Idioma que você prefere trabalhar no.

    A linguagem de programação que você escolheu será o padrão para o site Web, mas você pode definir a linguagem de programação para cada página individualmente.

  6. Clique em OK.

    Visual Web Developer cria a pasta e uma nova página chamada Default.aspx.

Criando um Mapa do Site

Para usar navegação em sites, é necessária uma forma de descrever como as páginas são dispostas no seu site.O método padrão para isto consiste em criar um arquivo .xml que contém a hierarquia do site, incluindo os títulos das página e URLs.

A estrutura do arquivo .xml reflete a estrutura do seu site.Cada página é representada como um siteMapNode Elemento de Mapa de Site.O nó mais a cima representa a home page e os nós filhos representam as páginas que estão mais abaixo na hierarquia do site.

Para criar um mapa do site

  1. No Solução Explorer, clique com o botão direito do mouse no nome do site e em seguida, clique em Adicionar novo item.

  2. Na **Adicionar novo item <Path>**caixa de diálogo:

    1. Em Modelos Visual Studio instaladoClique em Site Map.

    2. Na Name (Nome) Caixa, certifique-se que o nome é Web.sitemap.

      Observação:

      O arquivo deve ser chamado W EB.sitemap e devem aparecer na raiz do site.

    3. Clique em Adicionar.

  3. Copie o seguinte conteúdo XML para o arquivo Web.sitemap, substituindo o conteúdo padrão.

    < SiteMap > < título siteMapNode = " Página Inicial " Descrição = "Início" URL="~/Home.aspx " &Gt; < título siteMapNode = "Produtos" Descrição = "nossos produtos" URL="~/Products.aspx" > < título siteMapNode = "Hardware" Descrição = "Hardware oferecemos" URL="~/Hardware.aspx " / &Gt; < título siteMapNode = "Software" Descrição = "Software para venda" URL="~/Software.aspx " / &Gt; < / siteMapNode > < título siteMapNode = "serviços" Descrição = "serviços que oferecemos URL="~/Serviços.aspx" > < título siteMapNode = "treinamento" Descrição = "treinamento" URL="~/Treinamento.aspx " / &Gt; < título siteMapNode = "consultor" Descrição = "consultor" URL="~/Consulting.aspx " / &Gt; < título siteMapNode = "suporte" Descrição = "suporte" URL="~/Support.aspx " / &Gt; < / siteMapNode > < / siteMapNode > < / SiteMap >

    O arquivo Web.sitemap contém um conjunto de siteMapNode Elementos que estão aninhados para três níveis.A estrutura de cada elemento é a mesma.A única diferença entre eles é a localidade dentro da hierarquia XML.

    O URL das páginas que são definidas no arquivo de exemplo .xml não é qualificado.Isso significa que todas as páginas são tratadas como tendo URLs que são relativos à raiz do aplicativo.Entretanto, você pode especificar qualquer URL para uma página específica — a estrutura lógica que você define no mapa do site não tem que corresponder ao layout físico das páginas nas pastas.

  4. Salve o arquivo, e feche-o.

Criando páginas para navegar

Nesta seção, você irá criar apenas algumas das páginas que são descritas no mapa do site que você definiu na a seção anterior.(O mapa do site é mais completo tal que você possa exibir uma hierarquia completa ao testar as páginas no passo-a-passo.)

Para criar páginas para navegar

  1. No Solução Explorer, clique com o botão direito do mouse no nome do site e em seguida, clique em Adicionar novo item.

  2. Na Adicionar novo item <Path> caixa de diálogo:

    1. Em Modelos Visual Studio instaladoClique em Web Form.

    2. Na Name (Nome) Caixa, tipo Home.aspx , e em seguida, clique em Adicionar.

  3. Alternar para modo Design.

  4. Na página Home.aspx, digite Home e, em seguida, Formatará-lo como um Título 1.

    Repetir esse procedimento e criar quatro páginas adicionais chamadas Products.aspx, Hardware.aspx, Software.aspx e Training.aspx.Use o nome da página (por exemplo, Produtos) como o título para que você irá possam reconhecer cada página quando a página é exibida no navegador.

    Não é importante quais páginas você, especificamente, cria.As páginas que estão listadas neste procedimento são sugestões que permitem que você veja a hierarquia do site aninhada em três níveis.

Criando um menu de navegação usando o Controle TreeView

Agora que você possui um mapa do site e algumas páginas, você pode adicionar navegação ao seu site.Você usará o TreeView Controle para atuar como um menu recolhível de navegação.

Para adicionar um menu de navegação Tree-Style

  1. Abra a página Home.aspx.

  2. A partir de Dados Agrupar na caixa de ferramentas, arraste um SiteMapDataSource controlar até a página.

    Em sua configuração padrão, o SiteMapDataSource o controle recupera suas informações do arquivo Web.sitemap que você criou no " Criar um mapa de sites ", Anteriormente essa explicação passo a passo, para que você não seja necessário que especificar quaisquer informações adicionais para o controle.

  3. A partir de Navegação Agrupar na caixa de ferramentas, arraste um TreeView controlar até a página.

  4. Sobre o Tarefas de TreeView Menu, in a Escolher fonte de dados caixa, clique em SiteMapDataSource1.

  5. Salve a página.

Testando o menu de navegação Tree Style

Agora você pode executar um teste provisório do seu sistema de navegação.

Para testar o menu de navegação

  1. Pressione CTRL+F5 para executar a página Home.aspx.

    A árvore mostra dois níveis de nós.

  2. Clique em Produtos Para exibir a página Produtos.

    • Se você não criou uma página Products.aspx, clique no link de uma página que você criou.

No estado atual do site, o menu de navegação aparece somente na página Home.Você pode adicionar o mesmo SiteMapDataSource e TreeView controles a cada página no aplicativo para exibir um menu de navegação em cada página.Entretanto, posteriormente, neste passo-a-passo, você verá como colocar o menu de navegação em um página mestra tal que o menu de navegação apareça automaticamente em cada página.

Exibindo o Histórico de Navegação usando o Controle SiteMapPath

Além criando um menu de navegação usando o TreeView controle, você pode adicionar navegação em cada página que exibe w aqui a página está na hierarquia do atual.Esse tipo de controle de navegação é também conhecido como um breadcrumb.O ASP.NET fornece o SiteMapPath o controle que pode implementar automaticamente de navegação de página.

Para exibir o histórico da navegação

  1. Abra a página Products.aspx e alterne para modo Design.

  2. A partir de Navegação Agrupar na caixa de ferramentas, arraste um SiteMapPath controlar até a página, posicione o cursor na frente dasSiteMapPath Controlar, e então pressione ENTER para criar um Novo de linha.

    O SiteMapPath o controle exibe a posição da página atual na hierarquia da página.Por padrão, o SiteMapPath controle representa a hierarquia que é criada no arquivo Web.sitemap.Por exemplo, quando você exibir a página Products.aspx, o SiteMapPath o controle exibe o seguinte caminho:

    Home > produtos

  3. Repita este procedimento para as outras páginas que você tenha criado neste passo-a-passo, exceto a página Home.

    Mesmo se você não colocar um SiteMapPath Controlar em cada página, para testes que precisa de um controle em uma página em cada nível da hierarquia do site (por exemplo, em Páginas Products.aspx e Hardware.aspx).

Testando o histórico da navegação

Você pode testar a navegação da página, exibindo páginas que estão no segundo e terceiro níveis da hierarquia.

Para testar a navegação da página

  1. Abra a página Home.aspx e pressione CTRL+F5 para executar a página.

  2. Use o TreeView controle para mover para a página Produtos.

    No local na página onde você colocar o SiteMapPath o controle, você verá um caminho que é semelhante à seguinte:

    Home > produtos

  3. Clique em Home Para retornar à home page.

  4. Use o TreeView controle para mover para a página de hardware.

    Neste momento você verá um caminho que é semelhante ao seguinte:

    Home > Produtos > Hardware

Tudo nomes que são exibidos por página a SiteMapPath Controle são links, exceto a Último um, que representa a página atual.Você pode transformar o nó atual em um link por Configuração o RenderCurrentNodeAsLink Propriedade das SiteMapPath Controlar a verdadeiro.

O SiteMapPath Controle permite que os usuários movem novamente até a hierarquia do site, mas ele não permite-los para ir para uma página que não é no caminho atual de hierarquia.

Criando um menu de navegação usando o menu Control

Além criando um menu de navegação usando o TreeView o controle, você pode usar o Menu Controle para exibir um menu de navegação expansível que permite aos usuários exibir um nível de nós ao mesmo tempo.Pausar o ponteiro do mouse sobre um nó que possui nós filhos gera um submenu de os nós filhos.

Para adicionar um menu de navegação menu-style

  1. Abra a página Products.aspx e alterne para modo Design.

  2. A partir de Navegação Agrupar na caixa de ferramentas, arraste um Menu controlar até a página.

  3. Sobre o Menu Tarefas Menu, in a Escolher fonte de dados caixa, clique em NewDataSource.

  4. Na Configurar Origem de dados — <DataSourceName&Gt; Assistente, clique em Site Mape em seguida, clique em OK.

  5. Salve a página.

Testando o menu de navegação menu-style

Agora você pode executar um teste provisório do seu sistema de navegação.

Para testar o menu de navegação

  1. Fechar Menu Tarefas.

  2. Abra o Home.aspx.

  3. Pressione CTRL+F5 para executar a página Home.aspx.

    A árvore mostra dois níveis de nós.

  4. Clique em Produtos Para exibir a página Produtos.

    • Se você não criou uma página Products.aspx, clique no link de uma página que você criou.

  5. No menu de navegação, pouse o ponteiro do mouse sobre o Home Link para expandir o menu.

No estado atual do site, o menu de navegação aparece somente na página Home.Você pode adicionar o mesmo SiteMapDataSource e Menu controles a cada página no aplicativo para exibir um menu de navegação em cada página.No entanto, na próxima seção deste passo-a-passo, você verá como colocar o menu de navegação em um página mestra para que ele apareça automaticamente em cada página.

Combinando Navegação do Site com Páginas Mestras

Nas páginas que você criou, até este ponto neste passo-a-passo, você adicionou controles de navegação do site individualmente para cada página.Fazer isso não é especialmente complexo, porque você não precisa configurar os controles de forma diferente para cada página.Entretanto, isto pode adicionar custos de manutenção ao seu site.Por exemplo, para alterar o local das SiteMapPath Controle de páginas no seu site, você teria alterar cada página individualmente.

Usando controles de navegação do site em combinação com páginas mestras, você pode criar um layout que contém os controles de navegação em uma localidade.Você pode exibir páginas como conteúdo dentro da página mestra.

Para criar controles de navegação para a página mestra

  1. No Solução Explorer, clique com o botão direito do mouse no nome do site e em seguida, clique em Adicionar novo item.

  2. Na Adicionar novo item <Path> caixa de diálogo:

    1. Em Modelos Visual Studio instaladoClique em Master Page.

    2. Na Name (Nome) caixa, digite Navegação.Mestre e em seguida, clique em Adicionar.

  3. Alternar para modo Design.

    O página mestra é exibida com um padrão ContentPlaceHolder o controle.

No procedimento a seguir, você criará um página mestra com um layout simples para controles de navegação.Em um aplicativo real, você usaria, provavelmente, formatações mais sofisticadas, mas as técnicas para usar controles de navegação em um página mestra serão semelhantes.

Para adicionar controles de navegação à página mestra

  1. Selecione o ContentPlaceHolder Controle, pressione SETA para a esquerda e pressione ENTER.

    Isso insere um linha em branco in front of de ContentPlaceHolder o controle.

  2. A partir de DadosAgrupar na caixa de ferramentas, arraste um SiteMapDataSource o controle até a página mestra e Posição-la acima a ContentPlaceHolder o controle.

    Observação:

    Não posicionar o SiteMapDataSource Controle sobre o ContentPlaceHolder o controle.

    Por padrão, o SiteMapDataSource controle usará a P EB.sitemap Arquivo que você criou no " Criar um mapa de sites ", anteriormente nessa explicação passo a passo.

  3. Clique na SiteMapDataSource Controle, pressione SETA para a Direita e pressione ENTER.

    Isso insere um linha em branco na SiteMapDataSource o controle.

  4. Sobre o Tabela Menu, clique em Inserir tabela e, em seguida, Inserir uma tabela que possui uma linha, duas colunas e uma largura de 100 por cento.

  5. A partir de Navegação Agrupar na caixa de ferramentas, arraste um TreeViewcontrolar até a célula à esquerda da tabela.

  6. Sobre o Tarefas de TreeView Menu, in a Escolher fonte de dados caixa, clique em SiteMapDataSource1.

  7. A partir de Navegação Agrupar na caixa de ferramentas, arraste um SiteMapPathcontrolar até a célula à direita da tabela.

  8. Na célula direita, clique na área em branco e pressione SHIFT+ENTER para criar uma nova linha.

  9. Arraste o ContentPlaceholder controlar até a célula à direita da tabela e posicioná-la sob a SiteMapPatho controle.

Quando você estiver usando um página mestra, você cria as páginas no seu site como páginas de conteúdo.As páginas de conteúdo usam Conteúdo Controles para definir o texto e controles que são exibidos na ContentPlaceholder Controle da página mestra.Portanto, você terá de recriar as páginas Home, Products, e Hardware como páginas de conteúdo.

Para criar páginas de conteúdo para o site

  1. No Gerenciador de Soluções, clique com o botão direito do mouse o Página Inicial.aspx Página, clique em Excluir e, em seguida, clique em OK.

  2. Repita a etapa 1 para páginas Products.aspx, Software.aspx, Training.aspx, Hardware.aspx e quaisquer outras páginas você tiver criado.

    Você recriará as páginas como páginas de conteúdo que usam um página mestra.

  3. No Solução Explorer, clique com o botão direito do mouse no nome do site e em seguida, clique em Adicionar novo item.

  4. Na Adicionar novo item caixa de diálogo:

    1. Em Modelos Visual Studio instaladoClique em Web Form.

    2. Na Name (Nome) caixa, digite Home.aspx.

    3. Selecione o Selecione Mestre de página Verificar Caixa.

    4. Clique em Adicionar.

    O Selecione uma página mestra caixa de diálogo é exibida.

  5. Em Conteúdo da pastaClique em Navigation.master, e em seguida, clique em OK.

    Você criou um página de conteúdo que está vinculada à página mestra que você criou na seção anterior.

  6. Alternar para modo Design.

    No design Exibir, você vê o layout que você criou para o página mestra, com uma região editável correspondente a ContentPlaceHolder1 Controle sobre o página mestra.

  7. Clique dentro de Conteúdo a janela.

    Isso é onde você pode adicionar conteúdo para essa página específica.

  8. Digite Home e em seguida, formatar o texto como Título 1.

    Você criou o texto estático (especificamente, o título) para a página Home.

  9. Repita as etapas 3 a 8 para criar um página de conteúdo Products.aspx e um página de conteúdo Hardware.aspx.Na etapa 8, digite Products e hardware, respectivamente, em vez de base.

Testando controles de navegação na página mestra

Fazer testes com páginas mestra e páginas de conteúdo é o mesmo que fazer testes com páginas individuais.

Para testar o controle de navegação na página mestra

  1. Abrir a página Products.aspx, e pressione CTRL+F5 para executar a página.

    O página de conteúdo Products será mesclada com a página mestra.No navegador, você verá uma página que contém o título Products e os controles de navegação que você adicionou à página mestra.

  2. Na TreeView Controle, clique em Hardware.

    A página de hardware é exibida com o mesmo layout de página Produtos, exceto pelo fato de que o SiteMapPath o controle exibe um caminho diferente.

Próximas etapas

Este passo-a-passo ilustra a funcionalidade básica de navegação do site do ASP.NET e controles de navegação.Você pode desejar testar recursos adicionais de navegação.Por exemplo, você pode querer fazer o seguinte:

  • Formato de SiteMapPath Controle para personalizar sua aparência.O controle suporta várias opções que gerenciar como os links são exibidos.Para obter mais informações, consulte SiteMapPath.

  • Personalizar a Exibir das páginas na TreeView o controle.Por exemplo, você pode realçar a página atual no nó de modo de exibição de árvore.

  • Trabalhe programaticamente com as informações da navegação do site.A SiteMapPath Controle está disponível na página atual, que pode ser usada para exibir informações de navegação por meio de programação.

  • Use um armazenamento de dados diferente para as informações do mapa do site.Em vez de usar o arquivo XML padrão do mapa do site, você pode usar um mapa do site existente ou informações do mapa do site armazenadas em um banco de dados.A Navegação do site do ASP.NET usa um modelo de provedor.Você pode criar componentes que gerenciam informações do mapa do site, e depois configurar seu aplicativo para usar esse componente em vez do provedor do mapa do site padrão.Para obter mais informações, consulte Provedores de Navegação em Sites ASP.NET.

Consulte também

Tarefas

Demonstra Passo a passo: Criando uma página da Web básica no Visual Web Developer

Passo-a-passo: Criando e Usando Páginas Mestras do ASP.NET no Visual Web Developer

Conceitos

Visão geral sobre navegação em sites do ASP.NET

Mapas do Site do ASP.NET

Visão Geral de Páginas Mestras ASP.NET

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

Proteção de acesso a dados

Práticas Básicas de Segurança para Aplicativos Web ASP.NET

Outros recursos

Segurança de aplicativos ASP.NET em ambientes hospedados