Início » ASP.NET » Menus em ASP.NET

Menus em ASP.NET

Para entendermos como trabalhar com menus em ASP.NET, vamos continuar a partir do post Usando master page.

Havíamos criado em layout.Master três ContentPlaceHolder e criado default.aspx para ser nossa página principal, lembrando que o mesmo herda o estilo de layout.Master. Vamos criar o menu dentro de cphLeftNavigation, dentro de nosso default.aspx.

Temos três modos de visualização do nosso trabalho: Design, Split e Source. Clique no modo Design. Agora, na Toolbox, localize a aba Navigation e a opção Menu. Arraste o mesmo para dentro de cphLeftNavigation, que é o ContentPlaceHolder criado para inserção dos menus.

Selecione o seu menu e abra o Menu Tasks:

Em Auto Format definimos o formato automático que nosso menu deverá ter. Escolha um do seu agrado. Agora clique em Edit Menu Items e o Menu Item Editor aparecerá, que é onde devemos editar os itens de nosso menu. No botão Add a root item, insira três itens. Eles virão com o nome de New Item. Ao lado, em Properties, temos a opção Text e Value. Renomeie seus itens de menu e seus valores, de acordo com as figuras, e aperte enter ao finalizar:

Clique em OK. Veja como deve ficar:

Vamos criar mais uma página .aspx que será para o cadastro de clientes, usando a Master Page criada no nosso projeto. Na Solution Explorer, clique com o botão direito e Add / New Item. Escolha Web Form Using Master Page, renomeie para cadCliente.aspx e clique no botão Add. Aparecerá uma tela para selecionar a Master Page que deverá ser usada. Clique em layout.Master e então, Ok. Por enquanto, não iremos trabalhar com cadCliente.aspx. Ficará para o próximo post.

Agora, vamos linkar cada item de menu as suas páginas referentes. Selecione o menu e abra o Menu Tasks. Clique em Edit Menu Items e observe, em propriedades, a opção NavigateURL.

Para o item HOME vamos selecionar a página default.aspx; para o item CLIENTES a página cadCliente.aspx e, para o item MAIORES INFORMACOES coloque um site qualquer. Clique em OK.

Veja como o código do seu menu deverá ficar:

<asp:Menu ID="Menu1" runat="server" BackColor="#F7F6F3" DynamicHorizontalOffset="2" Font-Names="Verdana" Font-Size="0.8em" 
                        ForeColor="#7C6F57" StaticSubMenuIndent="10px">
            <DynamicHoverStyle BackColor="#7C6F57" ForeColor="White" />
            <DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
            <DynamicMenuStyle BackColor="#F7F6F3" />
            <DynamicSelectedStyle BackColor="#5D7B9D" />
                <Items>
                    <asp:MenuItem Text="Home" Value="0" NavigateUrl="~/Default.aspx"></asp:MenuItem>
                    <asp:MenuItem Text="Clientes" Value="1" NavigateUrl="~/cadCliente.aspx"></asp:MenuItem>
                    <asp:MenuItem Text="Maiores informações" Value="2" 
                        NavigateUrl="http://www.msdn.com.br"></asp:MenuItem>
                </Items>
            <StaticHoverStyle BackColor="#7C6F57" ForeColor="White" />
            <StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
            <StaticSelectedStyle BackColor="#5D7B9D" />
     </asp:Menu>

Copie o código referente ao menu e cole dentro do cphLeftNavigation da página cadCliente.aspx. Execute o projeto e teste seu menu.

Bons estudos!

Andrielle Azevedo de Paula
MTAC – Microsoft Technical Audience Contributor


Deixe uma resposta

Faça o login usando um destes métodos para comentar:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: