ASP .NET MVC 5 - Exibindo um menu usando Bootstrap

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:

Criar um projeto MVC 5 usando o template padrão
Ajustar o código da View Index.cshtml
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:

VS 2017 Community (update 15.4.2)

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 ?

Veja mais sistemas completos para a plataforma .NET no Super DVD .NET , confira...
Curso Básico VB .NET - Vídeo Aulas

Quer aprender C# ??

Chegou o Super DVD C# com exclusivo material de suporte e vídeo aulas com curso básico sobre C#.
Curso C# Basico - Video Aulas

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

Curso Fundamentos da Programação Orientada a Objetos com VB .NET

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

Curso - Gerando Relatórios com o ReportViewer no VS 2013 - Vídeo Aulas

Referências:

José Carlos Macoratti