导航栏下拉菜单在 Blazor 服务器上不起作用

Question

根据其他人已经完成的工作，在 Blazor Server 应用程序（Net Core 5.0 VS2019）上，我实现了一个固定在顶部的 Bootstrap NavBarHorizontal，它工作正常，除了下拉菜单不打开。我只更改了两个页面中的代码，如下所示。其他一切都保持不变，包括 site.css。我在下面的代码中也包含了原始 _Host.cshtml。

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

Answer 1

表达式主体成员对我来说仍然是巫术，但我的猜测是需要更改变量 NavMenuCssClass 才能让 Blazor 更新，但 Blazor 需要更新才能让 NavMenuCssClass 设置其值。

也许试试

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

或

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

Answer 2

bootstrap 下拉菜单需要 js 组件。

在 /wwwroot/index.html

中的结束 </body> 标记之前添加以下代码

<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/popper.js@1.16.1/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>

我从 MSDN MSGRAPH tutorial.

得到了这个

导航栏下拉菜单在 Blazor 服务器上不起作用

Nav Bar Dropdown menu not working on Blazor server

bootstrap-4

blazor

blazor-server-side