How do I add a a dropdown menu in the default asp .net 3.1 razor template

By default, when you create a page in asp .net core 3.1 (in Visual Studio of course) you get a base menus in _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>

This gives you the following layout:

How do I add a a dropdown menu in the default asp .net 3.1 razor template

I added code to download extra menu settings based on the role. Basically, it’s a menuheader (for example ‘Adminisrator’) and then a couple of menu items.

So I want to add a down menu next to “Privacy”.

How would I best do this?

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

Use following code : You’ll need to include bootstrap css and 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>

Method 2

I added code to download extra menu settings based on the role.
Basically, it’s a menuheader (for example ‘Adminisrator’) and then a
couple of menu items.

Based on user’s roles, you can create a down menu as follow:

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

Here is the test result:

How do I add a a dropdown menu in the default asp .net 3.1 razor template

Method 3

Based on one of the answers here I managed to get it up & running:

    @{
        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" <a href="https://getridbug.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="177664673a766572762a577a7279625e63727a3956646756657276">[email protected]</a> <a href="https://getridbug.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="eb8a989bc68884859f998487878e99d6ab868e859ea29f8e86c5aa989ba884859f998487878e99">[email protected]</a> <a href="https://getridbug.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bddccecd90dcdec9d4d2d380fdd0d8d3c8f4c9d8d093fccecdfcdec9d4d2d3">[email protected]</a>>@menuItem.ElementName</a>
                            }
                        </div>
                    </li>
                }
            }
        }
    }

This gives the following result:

How do I add a a dropdown menu in the default asp .net 3.1 razor template

I only have one remaining question: how do I get rid of this one “icon” on the left of ” Home”?

Anyone any ideas.


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x