如何解决如何在默认的ASP .NET 3.1剃刀模板中添加一个下拉菜单
默认情况下,当您在asp .net core 3.1(当然是在Visual Studio中)中创建页面时,会在_layout.cshtml中获得基本菜单:
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom Box-shadow mb-3">
<div class="container">
<a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">Axinco.JuryTool.Interface.Gui</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
<partial name="_LoginPartial"/>
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
</li>
</ul>
</div>
</div>
</nav>
这将为您提供以下布局:
我添加了代码以根据角色下载其他菜单设置。基本上,它是一个菜单标题(例如“ Adminisrator”),然后是几个菜单项。
我最好怎么做?
解决方法
使用以下代码:您需要包括引导css和Js。
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="container">
<a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">Axinco.JuryTool.Interface.Gui</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
<partial name="_LoginPartial" />
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle text-info" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Test drodown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<form asp-area="" asp-controller="Login" asp-action="Logout" method="post">
<button type="submit" class="dropdown-item btn btn-info btn-sm">Logout</button>
</form>
</div>
</li>
</ul>
</div>
</div>
</nav>
,
我添加了代码以根据角色下载其他菜单设置。 基本上,它是一个菜单标题(例如“ Adminisrator”),然后是 几个菜单项。
基于用户角色,您可以创建如下菜单:
@using Microsoft.AspNetCore.Identity
@inject UserManager<IdentityUser> userManger
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="container">
<a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">WebApplication_core_identity2</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
<partial name="_LoginPartial" />
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle text-info" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Roles
</a>
@{if (User.Identity.IsAuthenticated)
{
var user = await userManger.GetUserAsync(User);
var rolesArray = userManger.GetRolesAsync(user).Result;
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
@foreach (var role in rolesArray)
{
<button type="button" class="dropdown-item btn btn-info btn-sm">@role</button>
}
</div>
}
}
</li>
</ul>
</div>
</div>
</nav>
这是测试结果:
,基于这里的答案之一,我设法使其启动并运行:
@{
if (User.Identity.IsAuthenticated)
{
@if (userMenus != null && userMenus.Count > 0)
{
@foreach (var userMenu in userMenus)
{
// Debug
var debugLine = $"userMenu = {JsonConvert.SerializeObject(userMenu)}";
Debug.WriteLine(debugLine);
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle text-info" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
@userMenu.Caption
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
@foreach (var menuItem in userMenu.MenuElements)
{
// Debug
debugLine = $"userMenu = {JsonConvert.SerializeObject(userMenu)}";
Debug.WriteLine(debugLine);
<a class="nav-link text-dark" asp-area=@menuItem.AspArea asp-controller=@menuItem.AspController asp-action=@menuItem.AspAction>@menuItem.ElementName</a>
}
</div>
</li>
}
}
}
}
这将产生以下结果:
我只剩下一个问题:如何摆脱“主页”左侧的这个“图标”?
任何想法。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。