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

Esse passo a passo ilustra como trabalher com o controle ASP.NET Menu por programação coordenando dois menus na mesma página utilizando código.

Você pode criar menus de navegação para sua página Web utilizando o controle ASP.NET Menu.Nesse passo a passo, você explora os aspectos de programação do controle ASP.NET Menu e cria dois menus vinculados ao mesmo arquivo Web.sitemap que trabalham juntos.O primeiro menu é um menu de categorias exibido estaticamente, como produtos, serviços, e suporte.Ele irá aparecer horizontamente através do alto da página.O segundo menu é exibido horizontalmente abaixo do primeiro menu.O conteúdo do segundo menu é determinado por qual item do menu está selecionado no primeiro.Baseado na seleção atual do primeiro menu, você ajusta por programação a fonte de dados do mapa do site do segundo menu para exibir apenas a porção do arquivo Web.sitemap, que seja relevante para a categoria selecionada.l

Pré-requisitos

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

• Visual Web Developer Microsoft (Visual Studio).

• O .NET Framework.

Criando o Site Web

Se você já criou um site Web no Visual Web Developer (por exemplo, seguindo os passos em Demonstra Passo a passo: Criando um Basic página da Web no Visual Web Developer), você poderá usar o Web site e saltar para "Fazendo o Arquivo do Mapa do Site" mais à frente nesse passo a passo.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. No menu File, clique em NewWeb Site.

   The Novo site caixa de diálogo é exibida.

3. Em O Visual Studio installed templates, clicar Site da Web do ASP.NET.

4. Na caixa Location, insira o nome da pasta onde você deseja manter as páginas do seu site.

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

5. Na lista Language, clique a linguagem de programação com a qual você prefere trabalhar.

6. Clique em OK.

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

Construindo o Arquivo do Mapa do Site

Ambos os menus derivam seu conteúdo do arquivo Web.sitemap do site.Os objetos SiteMapDataSource que você criou são usados por ambos os menus para assegurar que cada um exibe a porção apropriada do mapa do site.

Para criar o arquivo Web.sitemap

1. Em Solution Explorer, clique com o botão direito no nome do seu Web site, e então clique Adicionar Novo Item.

2. Na Caixa de Diálogo Add New Item, escolha Site Map e clique em Add.

3. Adicione o seguinte código XML ao novo arquivo.O XML representa uma hierarquia de opções de menu.Os elementos <siteMapNode> estão aninhandos.Cada nó é um item do menu que contém subitens, e alguns subitens tem subitens próprios.Existem três nós de segundo nível abaixo a Home nó: Hardware, Software, e Support. Abaixo deles encontram-se várias subcategorias.

   <?xml version="1.0" encoding="utf-8" ?>
   <siteMap>
     <siteMapNode title="Home">
       <siteMapNode title="Products">
         <siteMapNode title="Hardware" url="Default.aspx?node=hardware">
           <siteMapNode title="Mouse"/>
           <siteMapNode title="Keyboard"/>
           <siteMapNode title="NetCard"/>
           <siteMapNode title="Monitor"/>
           <siteMapNode title="PC"/>
         </siteMapNode>
         <siteMapNode title="Software" url="Default.aspx?node=software">
           <siteMapNode title="Spreadsheet"/>
           <siteMapNode title="Word Processor"/>
           <siteMapNode title="Presentation"/>
           <siteMapNode title="Mail"/>
           <siteMapNode title="Games"/>
         </siteMapNode>
         <siteMapNode title="Books" url="Default.aspx?node=books">
           <siteMapNode title="Programming"/>
           <siteMapNode title="Debugging"/>
           <siteMapNode title="Testing"/>
           <siteMapNode title="Web Apps"/>
           <siteMapNode title="WinForm Apps"/>
         </siteMapNode>
       </siteMapNode>
       <siteMapNode title="Services">
         <siteMapNode title="Consulting" url="Default.aspx?node=consulting">
           <siteMapNode title="Processes"/>
           <siteMapNode title="Management"/>
           <siteMapNode title="Recruiting"/>
         </siteMapNode>
         <siteMapNode title="Development" url="Default.aspx?node=development">
           <siteMapNode title="Web Apps"/>
           <siteMapNode title="Enterprise Apps"/>
           <siteMapNode title="Database"/>
         </siteMapNode>
       </siteMapNode>
       <siteMapNode title="Support">
         <siteMapNode title="Drivers" url="Default.aspx?node=drivers">
           <siteMapNode title="Audio"/>
           <siteMapNode title="Network"/>
           <siteMapNode title="Printer"/>
           <siteMapNode title="Modem"/>
         </siteMapNode>
         <siteMapNode title="Manuals" url="Default.aspx?node=manuals">
           <siteMapNode title="Applications"/>
           <siteMapNode title="Troubleshooting"/>
           <siteMapNode title="Installation"/>
           <siteMapNode title="Internet"/>
         </siteMapNode>
         <siteMapNode title="Updates" url="Default.aspx?node=updates">
           <siteMapNode title="Release 1"/>
           <siteMapNode title="Game Package"/>
         </siteMapNode>
       </siteMapNode>
     </siteMapNode>
   </siteMap>
   

4. Salve o arquivo.

Construindo o Primeiro Menu

O primeiro menu exibe um único nível de itens de menu estático.Ele é exibido horizontalmente no topo da página.

Para criar o primeiro menu

1. Em Solution Explorer, clique com o botão direito na página Default.aspox para abri-la.

2. Alternar para modo Design.

3. A partir do grupo de controle Navigation na Toolbox, arraste um controle Menu para a página.

4. Na janela Propriedades, configure a propriedade Orientação para Horizontal.

5. Defina MaximumDynamicDisplayLevels como 0.

   Isso garante que nenhuma parte do menu será exibida de forma dinâmica.

6. Assegure-se que ExibirNíveisEstaticamente está configurada para 1.

   Isso permite que somente um nível apareça no menu.

7. Clique na marca inteligente sobre o controle Menu.

   Aparecerá a caixa de diálogo Menu Tasks.

8. Escolha New Data Source na lista suspensa Choose Data Source.

9. Em Data Source Configuration Wizard, escolha Site Map.

10. Aceite o nome padrão de SiteMapDataSource1 e clique em OK.

Configurando a Primeira Fonte de Dados

Pelo fato do primeiro menu exibir um único nível dos items estáticos do menu, você precisa configurar sua fonte de dados para exibir a porção apropriada do arquivo Web.sitemap.Nesse caso, ele é os elementos de segundo nível são: Products, Services, e Support.

Os anexos padrões do controle Menu para um controle SiteMapDataSource fazem cada item do menu um link de navegação.Porque você deseja controlar, por programação, o comportamento de outro menu, você deve usar ligações personalizadas para que esses itens de menu, ao invés de atuarem como links de navegação, causem um postback para que segundo menu possa ser atualizado.

Para configurar a primeira fonte de dados

1. Visualize a página Default.aspx em modo Design e clique na marca inteligente do controle Menu.

   Aparecerá a caixa de diálogo Menu Tasks.

2. Clique em Edit MenuItem Databindings.

3. Em Menu DataBindings Editor, na lista suspensa Available data bindings, selecione SiteMapNode e clique em Add.

4. Selecione TextField na lista suspensa Data binding properties e selecione Title no menu suspenso.Clique em OK.

5. Selecione o controle SiteMapDataSource.

6. Em Propriedades, configure ExibirNóInicial para Falso.

Criando o Segundo Menu

O segundo menu é dinâmico, e sua fonte de dados utiliza apenas uma porção do arquivo do mapa do site que é determinado por programação pelo que foi selecionado pelo primeiro menu.Assim como antes, você quer que o menu exiba seu primeiro nível estaticamente; contudo, você quer agora que o resto do arquivo Web.sitemap apareça dinamicamente.

Para criar o segundo menu

1. Visualize a Página Default.aspx em modo Design e arraste um segundo controle Menu para a página, abaixo do primeiro controle Menu.

2. Em Propriedades, configure Orientação para Horizontal.

3. Clique na marca inteligente no segundo controle Menu.

   Aparecerá a caixa de diálogo Menu Tasks.

4. Escolha New Data Source na lista suspensa Choose Data Source.

5. Em Data Source Configuration Wizard, escolha Site Map.

6. Aceite o nome padrão de SiteMapDataSource2 e clique em OK.

Configurando a Segunda Fonte de Dados

Nesta seção, você configura a fonte de dados para selecionar apenas uma seção particular do arquivo Web.sitemap.Para fazer isto, você inicia com primeira categoria padrão no primeiro menu, que é a seção Products do arquivo Web.sitemap.Você entao usa a propriedade NóInicialURL para indicar um atributo específco URL com este arquivo.

Para configurar o ponto inicial da segunda fonte de dados

1. Selecione SiteMapDataSource2 e defina sua propriedade StartingNodeURL para "Default.aspx?node=hardware".

2. Defina StartingNodeOffset como -1.

3. Defina ShowStartingNode como False.

Adicionando Código para Coordenar os Menus

Para controlar o segundo menu baseado no estado do primeiro menu, pegue o evento MenuItemClick do primeiro menu, e indique a vista do segundo menu do arquivo do mapa do site em código.

Para coordenar os menus no código

1. Visualize a página Default.aspx em modo Design e selecione Menu1.

2. Em Propriedades, configure o evento CliqueItemMenu para Menu1_CliqueItemMenu.

   Um método chamado Menu1_MenuItemClick será criado para o seu arquivo com código mascarado para a página Default.aspx, ou dentro das tags <script> da página .aspx se você estiver usando um modelo de página de arquivo único.

3. Adicione o seguinte código realçado ao método.

   Protected Sub Menu1_MenuItemClick(ByVal sender As Object, _
     ByVal e As System.Web.UI.WebControls.MenuEventArgs) _
     Handles Menu1.MenuItemClick
     Select Case e.Item.Value
       Case "Products"
         SiteMapDataSource2.StartingNodeUrl = "Default.aspx?node=hardware"
       Case "Services"
         SiteMapDataSource2.StartingNodeUrl = "Default.aspx?node=consulting"
       Case "Support"
         SiteMapDataSource2.StartingNodeUrl = "Default.aspx?node=drivers"
     End Select
   End Sub
   

   protected void Menu1_MenuItemClick(Object sender,    
         System.Web.UI.WebControls.MenuEventArgs e)
   {
     switch(e.Item.Value)
     {
       case "Products":
         SiteMapDataSource2.StartingNodeUrl = "Default.aspx?node=hardware";
         return;
       case "Services":
         SiteMapDataSource2.StartingNodeUrl = "Default.aspx?node=consulting";
         return;
       case "Support":
         SiteMapDataSource2.StartingNodeUrl = "Default.aspx?node=drivers";
         return;
     }
   }
   

   O código anterior captura o evento Click de Menu1.Ao invés de navegar para qualquer localidade, você utiliza o valor para determinar o que o segundo controle Menu exibe.Você realiza ajustando a propriedade StartingNodeUrl do segundo controle SiteMapDataSource do controle Menu.

4. Salve o arquivo.

Testando os Menus

Para testar a interação entre os dois menus, clique em um item do primeiro menu e veja se o segundo menu foi alterado adequadamente.O segundo menu é dinâmico e retrata o terceiro nível do arquivo Web.sitemap.

Para testar o menu

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

   O primeiro menu é exibido com o menu secundário contendo os itens abaixo de Products no arquivo Web.sitemap.

2. Clique em Services no primeiro menu.

   O segundo menu irá exibir os itens Consulting e Development.

3. Clique em Support.

   O segundo menu irá exibir os itens Drivers, Manuals e Updates.

Próximas etapas

O controle Menu permite que você cria menus de navegação facilmente, e oferece supor a programação para cenários mais complexos.Você pode também querer experimentar as opções a seguir:

• Apply a theme or skin to the Menu control.Para mais informações, consulte: Passo a passo: Personalizando um site usando temas no Visual Studio.

• Aprender mais sobre navegação em sites.Para mais informações, consulte: Visão geral sobre navegação em sites do ASP.NET.

• Utilize um controle Menu em uma página mestre para prover navegação side-wide definida em uma página única.Para obter mais informações, consulte Passo-a-passo: Criando e Usando Páginas Mestras do ASP.NET no Visual Web Developer.

Consulte também

Tarefas

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

Conceitos

Visão Geral do Controle de Menu