ASP.NET Core 8 Blazor Web应用中jQuery引入位置及导航栏下拉问题

问题核心 #

你当前的误区是误以为Bootstrap 5需要jQuery支持——实际上Bootstrap 5已完全移除jQuery依赖，改用原生JavaScript实现组件交互。下拉菜单失效的原因是缺少Bootstrap官方的JS文件，而非jQuery。

修复步骤 #

1. 移除无用的jQuery引用：从App.razor中删除<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>这一行。
2. 引入Bootstrap 5 JavaScript文件：在blazor.web.js之后添加Bootstrap的JS脚本，确保加载顺序正确。

修改后的App.razor代码 #

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="/" />
    <link rel="stylesheet" href="bootstrap/bootstrap.min.css" />
    <link rel="stylesheet" href="app.css" />
    <link rel="stylesheet" href="AppBase.styles.css" />
    <link rel="icon" type="image/png" href="favicon.png" />

    <HeadOutlet @rendermode="RenderModeForPage" />
</head>

<body>
    <Routes @rendermode="RenderModeForPage" />
    <script src="_framework/blazor.web.js"></script>
    <!-- 引入Bootstrap 5官方JS文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>

@code {
 [CascadingParameter]
 private HttpContext HttpContext { get; set; } = default!;

 private IComponentRenderMode? RenderModeForPage => HttpContext.Request.Path.StartsWithSegments("/Account")
     ? null
     : InteractiveServer;
}

额外说明 #

• 若项目使用本地Bootstrap文件，可将CDN链接替换为本地路径，比如<script src="bootstrap/bootstrap.bundle.min.js"></script>（需确保wwwroot/bootstrap目录下存在该文件）。
• 你提供的NavMenu.razor中的下拉菜单HTML结构完全符合Bootstrap 5规范，无需修改。
• Blazor确实不推荐直接调用jQuery，但此处根本不需要jQuery，用Bootstrap原生JS即可完美支持下拉菜单功能。

内容的提问来源于stack exchange，提问作者Ben Junior