Admin lte 下拉菜单在根页面上不起作用,但在内部页面上
Admin lte dropdown not working from root page but is on inner pages
我正在为我的仪表板使用 admin lte,但是下拉菜单的一个奇怪问题是它在内页而不是外页工作。
我正在使用我的个人资料菜单
例如这里它会起作用
http://localhost:57038/MISObjects/Search
但这里不会
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>
但由于某种原因,它无法在主页上运行。 Juqery 加载正常,当我调试时控制台上没有错误,如下面的屏幕截图所示
这是我的脚本部分
<!-- 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
控制台错误
没有错误
对于其他有同样问题的人,我有一个不支持的视图组件加载了部分脚本,因此这阻止了下拉列表的工作。
不要使用 parialasync 在另一个局部视图中加载组件。
我正在为我的仪表板使用 admin lte,但是下拉菜单的一个奇怪问题是它在内页而不是外页工作。
我正在使用我的个人资料菜单
例如这里它会起作用
http://localhost:57038/MISObjects/Search
但这里不会 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>
但由于某种原因,它无法在主页上运行。 Juqery 加载正常,当我调试时控制台上没有错误,如下面的屏幕截图所示
这是我的脚本部分
<!-- 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
控制台错误 没有错误
对于其他有同样问题的人,我有一个不支持的视图组件加载了部分脚本,因此这阻止了下拉列表的工作。
不要使用 parialasync 在另一个局部视图中加载组件。