Explicação passo a passo: Exibindo um menu em páginas da Web

  • Artigo

Este exame Através ilustra como inserir e configurar um ASP.NET Menu Controle em um página da Web.

Um aspecto comum de sites de qualquer complexidade é um menu de navegação.Você pode usar o Menu Controlar no ASP.NET para configurar um menu de navegação complexo facilmente sem escrever código.

O Menu Controle permite várias opções de exibição, incluindo uma Exibição Estática w aqui menu é totalmente exposto e uma exibição dinâmica w aqui partes do menu aparecem como o ponteiro do mouse se move sobre o item de menu pai.O controle também fornece uma combinação de modos de exibição estático e dinâmico que permitem termos uma série de itens-raiz que são estáticos, mas com itens de menu-filho que aparecem dinamicamente.

Você pode configurar o ASP.NET Menu Controle o designer com estático links para as páginas ou podem Ligar-lo automaticamente para um hierárquico fonte de dados such as um XmlDataSource ou um SiteMapDataSource o controle.

Tarefas ilustradas nesta explicação passo a passo incluem:

  • Criar um menu básico e configurando-o estaticamente para vincular às suas páginas.

  • Criar um menu mais complexas que é vinculado a um arquivo XML Web.sitemap.

  • Ajustar a orientação de um menu.

  • Configurar vários níveis de exibição estática versus exibição dinâmica.

Pré-requisitos

A fim de concluir este explicação passo a passo, será necessário:

  • Visual Web Developer Microsoft (Visual Studio).

  • O .NET Framework.

Criando o Site Web

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

Para criar um site do sistema de arquivos

  1. Abra o Visual Web Developer.

  2. Sobre o File Menu, clique em NovoSite.

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

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

  4. Na Local Digite o nome da pasta onde você deseja manter as páginas do seu site da Web.

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

  5. Na Linguagem lista, clique na programação Idioma você preferir trabalhar no.

  6. Clique em OK.

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

Criando um Menu Básico

O Primeiro etapa na criação um menu para a página é o posicionamento de um Menu o controle.

Para adicionar um controle de menu à página

  1. Alterne para ou abra Default.aspx, e alterne para modo Design.

  2. A partir de Navegação Agrupar de controle na ToolboxArraste um Menu controlar até a página.

Para esse exemplo, você orientará o menu horizontalmente ao invés de verticalmente.

Para posicionar o controle do menu horizontalmente

  • Clique com o botão direito do mouse o Menu Controle, clique em Propriedadese em seguida, defina Orientação Para horizontal.

Configurando um Menu Básico

Nesta seção, você irá definir os itens de menu usando o Menu Item Editor.

Para editar itens do controle Menu

  1. Clique com o botão direito do mouse o Menu Controlar e em seguida, clique em Editar Menu Itens.

    O Editor do item de menu será exibida.

  2. Em ItensClique na Adicionar um item de raiz Ícone.

  3. Em Propriedades para o novo item, defina Texto para a Página Inicial page e NavigateURL Para Padrão.aspx.

  4. Em ItensClique na Adicionar um item de raiz Ícone.

  5. Em PropriedadesDefinido Texto Para produtos e NavigateURL Para Products.aspx.

  6. Em ItensClique na Adicionar um item de raiz Ícone.

  7. Em PropriedadesDefinido Texto Para serviços e NavigateURL Para Serviços.aspx.

  8. Clique em OK.

Se você analisar o código-fonte de Default.aspx, verá que os itens de menu e links estão estabelecidos declarativamente no controle.

Para criar as páginas de destino

  1. Em Gerenciador de Soluções, clique com o botão direito do mouse na raiz do seu site da Web e em seguida, clique em Adicionar novo item.

  2. Clique em Web FormNomeie o arquivo Products.aspx e em seguida, clique em Adicionar.

  3. Repita as etapas anterior e criar um arquivo chamado Services.aspx.

Testando o Menu

Com páginas e menu estabelecidos, você pode experimentá-lo.

Para testar o controle Menu

  1. Clique em Default.aspx no Solution Explorer e pressione CTRL+F5 para executar a página Default.aspx.

  2. Mova o ponteiro sobre os itens; as barra de status do navegador, na parte inferior da a página (se visível), mostrará para qual página é o link.

  3. Clique em um link para ir para a página.

Criando um Menu Vinculado a um Mapa de Site

Na última seção, você criou um menu estático simples configurado declarativamente dentro da página.Contidas nesta seção, ignore a edição de Menu Controle itens diretamente e, em vez disso, vincular o controle a um arquivo Web.sitemap como uma fonte de dados XML.Isso permite que o Menu Estrutura do controle a ser mantido em um separado Arquivo XML que podem ser facilmente atualizados sem modificar a página ou usando o Criador.

Para esse exemplo você usará um segundo Menu o controle.

Para criar um segundo controle Menu

  • A partir de Navegação Grupo da ToolboxArraste um segundo Menu controlar até a página default.aspx.

Em seguida, será necessário um arquivo Web.sitemap ao qual ele se vinculará.

Para criar um arquivo de mapa do site

  1. Em Gerenciador de Soluções, clique com o botão direito do mouse na raiz do seu site da Web e em seguida, clique em Adicionar novo item.

  2. Na Adicionar novo item < WebsiteNome > caixa de diálogo, clique em Site Map.

  3. Clique em Adicionar.

  4. Coloque o código XML a seguir no arquivo Web.sitemap.

    O XML representa a estrutura de menu.Nós aninhadas se tornam itens de menu filhos dos itens de menu de nó pai.

    < SiteMap > < título siteMapNode = " Página Inicial " Descrição = "Início" URL="default.aspx " &Gt; < título siteMapNode = "Produtos" Descrição = "nossos produtos" URL="Products.aspx" > < título siteMapNode = "Hardware" Descrição = "opções de hardware" URL="Hardware.aspx " / &Gt; < título siteMapNode = "Software" Descrição = "Opções de software" URL="Software.aspx " / &Gt; < / siteMapNode > < título siteMapNode = "serviços" Descrição = "serviços que oferecemos URL="Services.aspx" > < título siteMapNode = "treinamento" Descrição = "treinamento Classes" URL="Treinamento.aspx " / &Gt; < título siteMapNode = "consultor" Descrição = "Serviços consultor" URL="Consulting.aspx " / &Gt; < título siteMapNode = "suporte" Descrição = "suporte planos" URL="Support.aspx " / &Gt; < / siteMapNode > < / siteMapNode > < / SiteMap >

  5. Salve o arquivo.

Ligando a um Mapa de Site

Agora você pode criar uma navegação fonte de dados que pontos para o Web.sitemap arquivo e vincular seu Menu Controlar a ele.

Para vincular a um controle Menu para um mapa do site

  1. Abra o arquivo Default.aspx, e alterne para modo Design.

  2. Clique no marca inteligente para exibir o Menu Tarefas caixa de diálogo.

  3. Na Menu Tarefas caixa de diálogo, in a Escolher fonte de dados Soltar-Para Baixo Lista, clique em Nova fonte de dados.

    O Assistente para Configuração da Fonte de Dados caixa de diálogo é exibida.

  4. Clique em Site Map.

    Em Especificar uma identificação para o fonte de dadoso nome padrão SiteMapDataSource1é exibida.

  5. Clique em OK.

Testando a Vinculação ao Mapa do Site

Com páginas e menu estabelecidos, você pode experimentá-lo.

Para testar a vinculação ao mapa do site

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

  2. Mover o ponteiro sobre o Home item de menu do menu em segundo lugar, vertical.

    Produtos e Serviços são exibidos.

  3. Mova o ponteiro sobre Produtos.

    Hardware e O software são exibidos.

    Se você eis OK no código-fonte para default.aspx, você irá notar que ao contrário a primeira item de menu, os itens não estão especificados declarativamente; Em vez disso, o fonte de dados é citado pelo Menu o controle.

Ajustando os Níveis Estático e Dinâmico

O menu vertical que você criou na seção anterior usa uma exibição totalmente dinâmica, com apenas a parte superior permanecendo estática.Com o Menu o controle, você têm a capacidade para especificar o comportamento com base em pausa a ponteiro do mouse e estarem ou não o menu deve ser dinâmico ou estático.Nesta seção, você irá ajustar as qualidades dinâmicos e estáticos da Menu o controle.

Para tornar o controle Menu estático para dois níveis

  1. Na página default.aspx no modo de design, clique com o botão direito do mouse o segundo Menu Controlar e em seguida, clique em Propriedades.

  2. Set StaticDisplayLevels a 2.

Testando o Menu Dinâmico

Com páginas e menu estabelecidos, você pode experimentá-lo.

Para testar o menu dinâmico

  • Pressione CTRL+F5 para executar a página Default.aspx.

    Os primeiros dois níveis de menu são exibidos, enquanto o terceiro nível é dinâmico.

Próximas etapas

O Menu Controle permite que você criar menus de navegação com facilidade.Você pode configurar o controle para exibição dinâmica ou estática e vinculá-lo a um arquivo XML de mapa de site.Você também pode querer experimentar as seguintes opções adicionais:

Consulte também

Tarefas

Demonstra Passo a passo: Controlando menus do ASP.NET por programação

Conceitos

Visão Geral do Controle de Menu