ASP .NET MVC 5 - Criando um menu com opções usando Bootstrap Dropdown


 Neste artigo vamos criar um menu bem simples em uma aplicação ASP .NET MVC 5 usando os recursos do Bootstrap.

Você já precisou criar um simples menu em uma aplicação ASP .NET MVC 5 e saiu googando atrás de menus feitos via JavaScript, jQuery, etc. ?

Neste artigo veremos como criar, de forma bem simples, um menu com diversas opções em uma aplicação ASP .NET MVC 5 usando os recursos do Bootstrap Dropdowns.

Vamos realizar as seguintes tarefas:

  1. Criar um projeto MVC 5 usando o template padrão

  2. Ajustar o código da View Index.cshtml

  3. Definir o menu no arquivo _Layout.cshtml com recursos do Bootstrap dropdown.

Os principais componentes do bootstrap dropdown são:

Classe Descrição
.dropdown Indica um menu suspenso
.dropdown-menu Constrói o menu suspenso
.dropdown-menu-right Alinha à direita um menu suspenso
.dropdown-header Adiciona um cabeçalho no menu suspenso
.dropup Indica um menu dropup
.disabled Desativa um item no menu suspenso
.divider Separa itens dentro do menu suspenso com uma linha horizontal

Além disso podemos usar os recursos dos Collapsibles para ocultar ou exibir conteúdo.

Classe Descrição
.collapse Indica um conteúdo flexível que pode ser oculto ou exibido sob demanda.
.collapse .in Exibe o conteúdo flexível por padrão
.panel-collapse Painel dobrável (alterna entre ocultar e mostrar o(s) painel(s))

Recursos Usados:

Criando o projeto ASP .NET MVC 5

Abra o VS 2017 Community e crie um projeto usando o template Web-> ASP .NET Web Application(.NET Framework) e informe o nome Mvc_Menu;

A seguir marque o template MVC sem autenticação e clique em OK;

Será criado um projeto com toda a estrutura pronta para ser usada.

Ajustando o código da view Index

Vamos ajustar o código da view Index.cshtml que esta na pasta Views/Home removendo todo o código gerado e incluindo apenas o código abaixo

 <div class="jumbotron">
    <h1>Controle Financeiro</h1>
    <p class="lead">Macoratti .net</p>
    <p><a href="http://www.macoratti.net" class="btn btn-primary btn-lg">Aprenda mais</a></p>
</div>

Após isso executando a aplicação iremos obter o seguinte resultado:

Nosso objetivo será exibir na barra de navegação um menu de opções.

Para fazer isso vamos nos ater agora somente ao arquivo _Layout.cshtml que esta na pasta /Views/Shared.

Vamos definir o código do menu no local destacado na figura abaixo, substituindo os links do menu atual pelos do nosso menu:

Vamos iniciar incluindo os links para o menu:

 ...
<div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("Controle Finaneiro", "Index", "Home", new { area = "" }, 
new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a href="#">Cadastros</a></li>
                    <li><a href="#">Movimento</a></li>
                    <li><a href="#">Relatórios</a></li>
                    <li><a href="#">Gráficos</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li>@Html.ActionLink("Sobre", "Sobre", "Home")</li>
                </ul>
            </div>
        </div>
    </div>
...

O código em azul mostra as linhas que foram incluídas. O resultado pode ser visto abaixo:

Vamos continuar inserindo o simbolo < v > em cada item de menu usando o código : <span class="caret"></span>

    <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
           <li><a href="#">Cadastros<span class="caret"></span></a></li>
           <li><a href="#">Movimento<span class="caret"></span></a></li>
           <li><a href="#">Relatórios<span class="caret"></span></a></li>
           <li><a href="#">Gráficos<span class="caret"></span></a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
                    <li>@Html.ActionLink("Sobre", "Sobre", "Home")</li>
        </ul>
    </div>
 

 

A seguir vamos usar a classe dropdown-toogle e dropdown para criar as opções no menu.

Vamos incluir o trecho de código :  class="dropdown-toggle" data-toggle="dropdown" para ativar o menu dropdown

A seguir vamos definir as opções do menu Cadastros incluindo o código :

                        <ul class="dropdown-menu">
                            <li>@Html.ActionLink("Clientes", "Cliente", "Cadastro")</li>
                            <li>@Html.ActionLink("Fornecedores", "Fornecedor", "Cadastro")</li>
                            <li>@Html.ActionLink("Países", "Pais", "Cadastro")</li>
                            <li>@Html.ActionLink("Estados", "Estado", "Cadastro")</li>
                            <li>@Html.ActionLink("Cidades", "Cidade", "Cadastro")</li>
                        </ul>

conforme abaixo:

  <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
            <li>
                 <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                   Cadastros <span class="caret"></span></a>
                  <ul class="dropdown-menu">
                            <li>@Html.ActionLink("Clientes", "Cliente", "Cadastro")</li>
                            <li>@Html.ActionLink("Fornecedores", "Fornecedor", "Cadastro")</li>
                            <li>@Html.ActionLink("Países", "Pais", "Cadastro")</li>
                            <li>@Html.ActionLink("Estados", "Estado", "Cadastro")</li>
                            <li>@Html.ActionLink("Cidades", "Cidade", "Cadastro")</li>
                        </ul>
            </li>
            <li><a href="#">Movimento<span class="caret"></span></a></li>
            <li><a href="#">Relatórios<span class="caret"></span></a></li>
            <li><a href="#">Gráficos<span class="caret"></span></a></li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
               <li>@Html.ActionLink("Sobre", "Sobre", "Home")</li>
          </ul>
   </div>
 

 

Vamos incluir mais opções no menu Cadastros e usar a classe nav-divider para criar uma linha de separação o menu:

  <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
            <li>
                 <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                   Cadastros <span class="caret"></span></a>
                  <ul class="dropdown-menu">
                          <li>@Html.ActionLink("Plano de Contas", "PlanoConta", "Cadastro")</li>
                          <li>@Html.ActionLink("Clientes", "Cliente", "Cadastro")</li>
                          <li>@Html.ActionLink("Fornecedores", "Produto", "Cadastro")</li>
                          <li>@Html.ActionLink("Entrada", "Entrada", "Cadastro")</li>
                          <li>@Html.ActionLink("Saída", "Saida", "Cadastro")</li>
                          <li>@Html.ActionLink("Centro de Custos", "Custos", "Cadastro")</li>
                          <li class="nav-divider"></li>
                          <li>@Html.ActionLink("Países", "Produto", "Cadastro")</li>
                          <li>@Html.ActionLink("Estados", "Produto", "Cadastro")</li>
                          <li>@Html.ActionLink("Cidades", "Produto", "Cadastro")</li>
                          <li class="nav-divider"></li>
                          <li>@Html.ActionLink("Perfis de Usuário", "Produto", "Cadastro")</li>
                          <li>@Html.ActionLink("Usuários", "Produto", "Cadastro")</li>
                   </ul>
            </li>
            <li><a href="#">Movimento<span class="caret"></span></a></li>
            <li><a href="#">Relatórios<span class="caret"></span></a></li>
            <li><a href="#">Gráficos<span class="caret"></span></a></li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
               <li>@Html.ActionLink("Sobre", "Sobre", "Home")</li>
          </ul>
   </div>
 

 

Agora basta repetir o código com as opções para os demais menus:

 <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>
                      <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                          Cadastros
                          <span class="caret"></span>
                      </a>
                      <ul class="dropdown-menu">
                          <li>@Html.ActionLink("Plano de Contas", "PlanoConta", "Cadastro")</li>
                          <li>@Html.ActionLink("Clientes", "Cliente", "Cadastro")</li>
                          <li>@Html.ActionLink("Fornecedores", "Produto", "Cadastro")</li>
                          <li>@Html.ActionLink("Entrada", "Entrada", "Cadastro")</li>
                          <li>@Html.ActionLink("Saída", "Saida", "Cadastro")</li>
                          <li>@Html.ActionLink("Centro de Custos", "Custos", "Cadastro")</li>
                          <li class="nav-divider"></li>
                          <li>@Html.ActionLink("Países", "Produto", "Cadastro")</li>
                          <li>@Html.ActionLink("Estados", "Produto", "Cadastro")</li>
                          <li>@Html.ActionLink("Cidades", "Produto", "Cadastro")</li>
                          <li class="nav-divider"></li>
                          <li>@Html.ActionLink("Perfis de Usuário", "Produto", "Cadastro")</li>
                          <li>@Html.ActionLink("Usuários", "Produto", "Cadastro")</li>
                      </ul>
                    </li>
                    <li>
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Movimento  <span class="caret">
</span> </a>
                        <ul class="dropdown-menu">
                            <li>@Html.ActionLink("Contas a Pagar", "Entrada", "Movimento")</li>
                            <li>@Html.ActionLink("Contas a Receber", "Entrada", "Movimento")</li>
                            <li>@Html.ActionLink("Controle de Saldo", "Entrada", "Movimento")</li>
                            <li>@Html.ActionLink("Inventário", "Entrada", "Movimento")</li>
                        </ul>
                    </li>
                    <li>
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Relatórios <span class="caret">
</span> </a>
                        <ul class="dropdown-menu">
                            <li>@Html.ActionLink("Fluxo de Caixa", "Sobre", "Grafico")</li>
                            <li>@Html.ActionLink("Relatório das Contas a Pagar", "Sobre", "Grafico")</li>
                            <li>@Html.ActionLink("Relatório das Contas a Receber", "Sobre", "Grafico")</li>
                        </ul>
                    </li>
                    <li>
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Gráficos   <span class="caret">
</span> </a>
                        <ul class="dropdown-menu">
                            <li>@Html.ActionLink("Gráfico de saída", "Sobre", "Grafico")</li>
                            <li>@Html.ActionLink("Gráfico de entradas", "Sobre", "Grafico")</li>
                            <li>@Html.ActionLink("Entrada vs Saídas", "Sobre", "Grafico")</li>
                            <li>@Html.ActionLink("Saldo Mensal por Conta", "Sobre", "Grafico")</li>
                        </ul>
                    </li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li>@Html.ActionLink("Sobre", "Sobre", "Home")</li>
                </ul>
            </div>

Agora temos um menu com 4 opções e cada menu possui suas opções definidas usando os recursos do Bootstrap:

Segue o código do arquivo _Layout.cshtml usado no projeto:  Layout.zip

(Disse Jesus) Não vos deixarei órfãos; voltarei para vós. João 14:18

Veja os Destaques e novidades do SUPER DVD Visual Basic (sempre atualizado) : clique e confira !

Quer migrar para o VB .NET ?

Quer aprender C# ??

Quer aprender os conceitos da Programação Orientada a objetos ?

Quer aprender o gerar relatórios com o ReportViewer no VS 2013 ?

Referências:


José Carlos Macoratti