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.
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!