CODEWITHSUNDEEP
bootstrap-4blazorblazor-server-side
Ben Junior
Ben Junior

Reputation: 2589

Nav Bar Dropdown menu not working on Blazor server

Following on what others have also already done, on a Blazor Server App (Net Core 5.0 VS2019), I implemented a Bootstrap NavBarHorizontal fixed on top and it works fine, except for a drop down menu that doesn't open. I only changed the code in the two pages as show below. Everything else remains the same, including site.css. I included the original _Host.cshtml as well in the code below.

// NavMenu
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-dark bg-primary fixed-top">
    <div class="d-none d-sm-block" style="padding:0 20px 0 0;">
        <img class="img-fluid" src="/Client/Images/CompanyLogo.png" alt="Company logo" style="width:auto; height:40px; padding:0 0 0 5px; margin:0" />
    </div>

    <button class="navbar-toggler" @onclick="ToggleNavMenu" 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="@NavMenuCssClass navbar-collapse d-sm-inline-flex flex-sm-row-reverse" @onclick="CollapseNavMenu">
        <ul class="navbar-nav flex-grow-1">
            <li class="nav-item">
                <a class="nav-link text-light" href="" Match="NavLinkMatch.All">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link text-light" href="#">About</a>
            </li>
            <li class="nav-item">
                <a class="nav-link text-light" href="#">Contact</a>
            </li>

            **!!!!! THIS SHOW BUT DOESNT OPEN !!!!!**
            <li class="nav-item  dropdown">
                <a class="nav-link text-light dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Dropdown
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Anothe Action</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="#">Something else here</a>
                </div>
            </li>
        </ul>
    </div>

    <div>
        <LoginDisplay />
    </div>
</nav>

@code {
    bool collapseNavMenu = true;

    string NavMenuCssClass => collapseNavMenu ? "collapse" : null;

    void ToggleNavMenu()
    {
        collapseNavMenu = !collapseNavMenu;
    }

    void CollapseNavMenu()
    {
        collapseNavMenu = true;
    }
}


    
    
 // MainLayout.razor  
 <div class="page">
     <header>
         <NavMenu />
     </header>
        
     <div class="content">
         @Body
     </div>
 </div>

 
// _Host.cshtml
@page "/"
@namespace RPManager.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

@{
    Layout = null;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Rental=Plus+</title>
    <base href="~/" />
    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
    <link href="css/site.css" rel="stylesheet" />
    <link href="RPManager.styles.css" rel="stylesheet" />
</head>
<body>
    <component type="typeof(App)" render-mode="ServerPrerendered" />

    <div id="blazor-error-ui">
        <environment include="Staging,Production">
            An error has occurred. This application may no longer respond until reloaded.
        </environment>
        <environment include="Development">
            An unhandled exception has occurred. See browser dev tools for details.
        </environment>
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>

    <script src="_framework/blazor.server.js"></script>
</body>
</html>

Upvotes: 6

Views: 5856

Answers (2)

Brian Parker
Brian Parker

Reputation: 14533

The bootstrap dropdown requires the js components.

Add the following code just before the closing </body> tag in /wwwroot/index.html

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
    integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
    crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
    integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
    crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
    integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
    crossorigin="anonymous"></script>

I got this from a MSDN MSGRAPH tutorial.

Upvotes: 7

Bennyboy1973
Bennyboy1973

Reputation: 4208

Expression-bodied members are still voodoo to me, but my guess is that changing the variable NavMenuCssClass will be required to get Blazor to update, but Blazor needs to be updating in order for NavMenuCssClass to set its value.

Maybe try

void ToggleNavMenu()
{
    collapseNavMenu = !collapseNavMenu;
    StateHasChanged();
}

or

void ToggleNavMenu()
{
    collapseNavMenu = !collapseNavMenu;
    NavMenuCssClass => collapseNavMenu ? "collapse" : null;
}

Upvotes: 0

Related Questions