I am using admin lte for my dashboard however a strange issue with the drop down is its working in the inner pages but not the outter pages.
For My profile menu I am using
For example here it will work
http://localhost:57038/MISObjects/Search
But here it wont http://localhost:57038/MISObjects
<!-- Navbar -->
<nav class="main-header navbar navbar-expand navbar-white navbar-light">
<!-- Left navbar links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
</li>
<!-- SEARCH FORM -->
<form asp-action="Search" asp-controller="MISObjects" method="post">
<div class="input-group input-group-lg">
<select id="searchType">
<option value="1">All Cases</option>
<option value="2">My Cases</option>
</select>
<input class="form-control form-control-navbar" type="search" id="search" name="search" placeholder="Case Number" aria-label="Search">
<div class="input-group-append">
<button class="btn btn-navbar" type="submit">
<i class="fas fa-search"></i>
</button>
</div>
</div>
</form>
</ul>
<!-- Right navbar links -->
<ul class="navbar-nav ml-auto">
<a class="nav-link text-dark" asp-area="Identity" asp-page="/Account/Manage/Index" title="Manage">Hello @User.Identity.Name!</a>
<li class="nav-item dropdown">
<a class="nav-link" data-toggle="dropdown" href="#">
<i class="far fa-bell"></i>
<span class="badge badge-warning navbar-badge">15</span>
</a>
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
<span class="dropdown-item dropdown-header">15 Notifications</span>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="fas fa-envelope mr-2"></i> 4 new messages
<span class="float-right text-muted text-sm">3 mins</span>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="fas fa-users mr-2"></i> 8 friend requests
<span class="float-right text-muted text-sm">12 hours</span>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="fas fa-file mr-2"></i> 3 new reports
<span class="float-right text-muted text-sm">2 days</span>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item dropdown-footer">See All Notifications</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" data-widget="control-sidebar" data-slide="true" href="#" role="button">
<i class="fas fa-th-large"></i>
</a>
</li>
<!-- Notifications Dropdown Menu -->
<li class="nav-item dropdown">
<a class="nav-link" data-toggle="dropdown" href="#">
<i class="fa fa-user-cog" style="font-size:24px;"></i>
</a>
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
<a asp-action="Setup" asp-controller="Admin" asp-route-id="1" class="dropdown-item">
<i class="fa fa-users-cog mr-2"></i> Settings
</a>
<div class="dropdown-divider"></div>
@if (User.Identity.IsAuthenticated) {
<a asp-action="Logout" asp-controller="MISObjects" class="dropdown-item">
<i class="fa fa-sign-out-alt mr-2"></i> Logout
</a>
} else {
<a asp-area="Identity" asp-page="/Account/Login" class="dropdown-item dropdown-footer fa fa-sign-in-alt">Login</a>
<a asp-area="Identity" asp-page="/Account/Register" class="dropdown-item dropdown-footer">Register</a>
}
</div>
</li>
</ul>
But for some reason its not working on the main page. Juqery is loaded fine and there is no errors on the console when i debug as proven by the screen shot below
Here is my scripts section
<!-- jQuery -->
<script type="text/javascript" src="~/lib/jquery/dist/jquery.js"></script>
<!-- Bootstrap 4 -->
<script src="~/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- AdminLTE App -->
<script src="~/dist/js/adminlte.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap4.min.js "></script>
<script src="~/plugins/jquery-validation/jquery.validate.js" type="text/javascript"></script>
<script src="~/plugins/jquery-validation/additional-methods.min.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js" type="text/javascript"></script>
<!-- bootstrap color picker -->
<!-- Bootstrap Switch -->
<script src="~/plugins/bootstrap-switch/js/bootstrap-switch.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/js/bootstrap4-toggle.min.js"></script>
<script src="~/font-awesome/js/all.js"></script>
<script src="~/font-awesome/js/brands.js"></script>
<script src="~/font-awesome/js/fontawesome.js"></script>
<script src="~/plugins/select2/js/select2.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
@RenderSection("Scripts", required: false)
<environment include="Development">
<script src="~/js/site.js" asp-append-version="true" defer></script>
</environment>
<environment exclude="Development">
<script src="~/js/site.min.js" asp-append-version="true" defer></script>
</environment
Console Errors There are no errors
For anyone else with the same issues I had a partial script being loading inside a view component which is not supported thus this was blocking the dropdown from working.
Do not use parialasync to load a component inside a another partial view.