Bootstrap 4 导航栏下拉菜单在Blazor服务器上不工作_Bootstrap 4_Blazor_Blazor Server Side

Bootstrap 4 导航栏下拉菜单在Blazor服务器上不工作

bootstrap-4 blazor

Bootstrap 4 导航栏下拉菜单在Blazor服务器上不工作,bootstrap-4,blazor,blazor-server-side,Bootstrap 4,Blazor,Blazor Server Side,在其他人已经完成的基础上，在Blazor服务器应用程序（Net Core 5.0 VS2019）上，我实现了一个固定在顶部的引导NavBarHorizontal，它工作正常，除了一个无法打开的下拉菜单。我只更改了两页中的代码，如下所示。其他一切都保持不变，包括site.css。我在下面的代码中也包含了原始的_Host.cshtml // NavMenu <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-

在其他人已经完成的基础上，在Blazor服务器应用程序（Net Core 5.0 VS2019）上，我实现了一个固定在顶部的引导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">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();
}

//导航菜单







**!!!!! 这个节目还没开演**



@代码{
bool collapseNavMenu=真；
字符串NavMenucsClass=>collapseNavMenu？“折叠”：null；
void ToggleNavMenu（）
{
collapseNavMenu=！collapseNavMenu；
}
void CollapseNavMenu（）
{
collapseNavMenu=true；
}
}
//剃须刀
@身体
//_Host.cshtml
@第“/”页
@命名空间RPManager.Pages
@addTagHelper*，Microsoft.AspNetCore.Mvc.TagHelpers
@{
布局=空；
}
租金=加+
发生了一个错误。在重新加载之前，此应用程序可能不再响应。
发生了未处理的异常。有关详细信息，请参见浏览器开发工具。
对我来说，表达式体成员仍然是巫毒，但我猜需要更改变量NavMenucsClass才能让Blazor更新，但Blazor需要更新才能让NavMenucsClass设置其值
也许试试
void ToggleNavMenu()
{
    collapseNavMenu = !collapseNavMenu;
    NavMenuCssClass => collapseNavMenu ? "collapse" : null;
}

或
引导下拉列表需要js组件
在/wwwroot/index.html



这是我从MSDN得到的。它现在正在工作。（注意：在Blazor中，添加脚本的页面是_Host.cshtml）@BenJunior这将取决于WASM还是服务器端。我主要和WASM一起工作。。
<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>