0

Gostaria de ajuda para uma situação. Realizei a integração do layout adminlte com o Framework C# Asp.net Core 3.1. Tudo ocorreu bem, menos a marcação automatica do item de menu que foi clicado, ou seja, ao abrir o sistema o item de menu de Home vem marcado automaticamente e até ai tudo bem, porém ao selecionar outro item, esse novo item clicado não é marcado e o de home desmarcado como se espera.

Ao clicar em pedidos o item de menu de pedidos não se torna o item selecionado

A integração com o adminlte foi feita de forma padrão adicionando os arquivos layout no wwwwrot e referenciando todas as dependencias no arquivo View > Shared > _Layout.cshtml. A inclusão do html do layout foi realizado através de partial view conforme código abaixo:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["title"] | Sistema</title>

    <!-- ***adminlte*** -->
    <!-- Google Font: Source Sans Pro -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="~/adminlte/plugins/fontawesome-free/css/all.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
    <!-- Tempusdominus Bootstrap 4 -->
    <link rel="stylesheet" href="~/adminlte/plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css">
    <!-- iCheck -->
    <link rel="stylesheet" href="~/adminlte/plugins/icheck-bootstrap/icheck-bootstrap.min.css">
    <!-- JQVMap -->
    <link rel="stylesheet" href="~/adminlte/plugins/jqvmap/jqvmap.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="~/adminlte/dist/css/adminlte.min.css">
    <!-- overlayScrollbars -->
    <link rel="stylesheet" href="~/adminlte/plugins/overlayScrollbars/css/OverlayScrollbars.min.css">
    <!-- Daterange picker -->
    <link rel="stylesheet" href="~/adminlte/plugins/daterangepicker/daterangepicker.css">
    <!-- summernote -->
    <link rel="stylesheet" href="~/adminlte/plugins/summernote/summernote-bs4.min.css">
</head>
<body class="hold-transition sidebar-mini layout-fixed">
    <div class="wrapper">

        <!-- Preloader -->
        <div class="preloader flex-column justify-content-center align-items-center">
            <img class="animation__shake" src="~/img/logo_resumida.png" alt="SoulSoft Delivery" height="60" width="60">
        </div>

        <!-- Menu Superior -->
        <partial name="_Navbar" />

        <!-- Menu Lateral -->
        <partial name="_Sidebar" />

        <!-- Container -->
        <div class="content-wrapper">

            <!-- Content Header (Page header) -->
            <div class="content-header">
                <div class="container-fluid">
                    <div class="row mb-2">
                        <div class="col-sm-6">
                            <h1 class="m-0">@ViewData["title"]</h1>
                        </div><!-- /.col -->
                        <div class="col-sm-6">
                            @*asp-controller="Home" asp-action="Index"*@
                            <ol class="breadcrumb float-sm-right">
                                <li class="breadcrumb-item">
                                    <a asp-controller="Home" asp-action="Index">
                                        Home
                                    </a>
                                </li>
                                <li class="breadcrumb-item active">@ViewData["title"]</li>
                            </ol>
                        </div><!-- /.col -->
                    </div><!-- /.row -->
                </div><!-- /.container-fluid -->
            </div>

            <main role="main" class="content">
                <div class="container-fluid">
                    @RenderBody()
                </div>
            </main>
        </div>

        <!-- _Footer -->
        <partial name="_Footer" />

        <!-- Control Sidebar -->
        <aside class="control-sidebar control-sidebar-dark">
            <!-- Control sidebar content goes here -->
        </aside>

    </div>

    <!-- ***adminlte*** -->
    <!-- jQuery -->
    <script src="~/adminlte/plugins/jquery/jquery.min.js"></script>
    <!-- jQuery UI 1.11.4 -->
    <script src="~/adminlte/plugins/jquery-ui/jquery-ui.min.js"></script>
    <!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
    <script>
        $.widget.bridge('uibutton', $.ui.button)
    </script>
    <!-- Bootstrap 4 -->
    <script src="~/adminlte/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
    <!-- ChartJS -->
    <script src="~/adminlte/plugins/chart.js/Chart.min.js"></script>
    <!-- Sparkline -->
    <script src="~/adminlte/plugins/sparklines/sparkline.js"></script>
    <!-- JQVMap -->
    <script src="~/adminlte/plugins/jqvmap/jquery.vmap.min.js"></script>
    <script src="~/adminlte/plugins/jqvmap/maps/jquery.vmap.usa.js"></script>
    <!-- jQuery Knob Chart -->
    <script src="~/adminlte/plugins/jquery-knob/jquery.knob.min.js"></script>
    <!-- daterangepicker -->
    <script src="~/adminlte/plugins/moment/moment.min.js"></script>
    <script src="~/adminlte/plugins/daterangepicker/daterangepicker.js"></script>
    <!-- Tempusdominus Bootstrap 4 -->
    <script src="~/adminlte/plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js"></script>
    <!-- Summernote -->
    <script src="~/adminlte/plugins/summernote/summernote-bs4.min.js"></script>
    <!-- overlayScrollbars -->
    <script src="~/adminlte/plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js"></script>
    <!-- AdminLTE App -->
    <script src="~/adminlte/dist/js/adminlte.js"></script>
    <!-- AdminLTE for demo purposes -->
    <script src="~/adminlte/dist/js/demo.js"></script>
    <!-- AdminLTE dashboard demo (This is only for demo purposes) -->
    <script src="~/adminlte/dist/js/pages/dashboard.js"></script>

    @RenderSection("Scripts", required: false)
</body>
</html>

Na partial view de _Sidebar.cshtml está localizado o menu lateral com o problema citado. O fomato de link, nos itens de menu, foram criados no padrão do framework Asp.net Core, conforme código a seguir:

                        <li class="nav-item">
                            <a asp-controller="Usuarios" asp-action="Index" class="nav-link">
                                <i class="far fa-circle nav-icon"></i>
                                <p>Usuários</p>
                            </a>
                        </li>

Também tentei da seguinte forma:

<li class="nav-item">
    <a href="Usuarios/Index" class="nav-link">
        <i class="far fa-circle nav-icon"></i>
        <p>Usuários</p>
    </a>
</li>

Porém não obtive sucesso. Suspeito que é o formato de link que está gerando esse problema, porém não sei como consertar para que a função do layout volte a funcionar. Desde já agradeço pessoal, tmj!

1 Resposta 1

1

Você pode fazer isto que vc quer via CSS... mas, como eu não manjo muito pra te ajudar, vou demonstrar uma maneira de fazer via javascript.

<script>
    
function setMenuEffect(){
    //Mapea o elemento do menu
    var el = $('nav-link');
    
    //Remove o elemento active
    $.each(el, function(idx, item){
        $(el).removeClass('active');
    }); 
    
    //Pega sua página (path)
    var page = getPathname();
    
    //Adiciona a classe ao elemento correto
    $.each(el, function(idx, item){
        if($(el).attr('data-menu') === page)
            $(el).parent().addClass('active');
    });     
}
    
    function getPathname(){
        return $(location).attr('pathname');
    }
    
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li class="nav-item">
    <a href="Usuarios/Index" class="nav-link" data-menu="Index">
        <i class="far fa-circle nav-icon"></i>
        <p>Usuários</p>
    </a>
</li>

Em suma, vc vai adicionar no seu "href" do menu, uma propriedade chamada 'data-menu' e adicionar o valor da sua action da controller, ou em outras palavras, sua página destino. E a ideia do script é varrer a classe 'nav-link' presente no seu menu, desmarcar qualquer item que esteja com a classe 'active' (que geralmente seta o efeito de selecionado) e em seguida, varrer novamente procurando pelo valor da propriedade que seja igual ao pathname ou página atual e setar a classe 'active'.

1
  • Muito obrigado Thiago! Vou tentar isso 🤜🏼🤛🏼 27/10/2021 às 12:39

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .