如何在默认的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>

这将为您提供以下布局:

Default webpage

我添加了代码以根据角色下载其他菜单设置。基本上,它是一个菜单标题(例如“ 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>

这是测试结果:

enter image description here

,

基于这里的答案之一,我设法使其启动并运行:

    @{
        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>
                }
            }
        }
    }

这将产生以下结果:

web result

我只剩下一个问题:如何摆脱“主页”左侧的这个“图标”?

任何想法。

相关问答

Selenium Web驱动程序和Java。元素在(x,y)点处不可单击。其...
Python-如何使用点“。” 访问字典成员?
Java 字符串是不可变的。到底是什么意思?
Java中的“ final”关键字如何工作?(我仍然可以修改对象。...
“loop:”在Java代码中。这是什么,为什么要编译?
java.lang.ClassNotFoundException:sun.jdbc.odbc.JdbcOdbc...