时间戳

首页 > 解决方案 > Bootstrap Navbar Dropdown 在我的 Blazor 应用程序中未按预期工作

blazor - Bootstrap Navbar Dropdown 在我的 Blazor 应用程序中未按预期工作

问题描述

当我第一次加载我的 Blazor 项目时，它出现在https://localhost:5003/.

我有六页用@page. 在一个页面上Reader.razor，我使用了带有下拉菜单的 Bootstrap NavBar。

@page "/reader"
<div class="container" id="myContainer" aria-labelledby="fullMessageBodyLabel">
    <div class="bg-dark text-light">
        <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
            <div class="container-fluid">
                <h6 class="card-title" id="myLabel"> Some Label Text Here ...</h6>
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                        <li class="nav-item dropdown">
                            <a class="nav-link" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" width="2em" height="2em" style="-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path d="M16.59 5.59L18 7l-6 6l-6-6l1.41-1.41L12 10.17l4.59-4.58m0 6L18 13l-6 6l-6-6l1.41-1.41L12 16.17l4.59-4.58z" fill="currentColor" /></svg>
                            </a>
                            <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDropdown">
                                <li><a class="dropdown-item" href="#">Menu Item #1</a></li>
                                <li><a class="dropdown-item" href="#">Menu Item #2</a></li>
                                <li><a class="dropdown-item" href="#">Menu Item #3</a></li>
                                <li><a class="dropdown-item" href="#">Menu Item #4</a></li>
                                <li><a class="dropdown-item" href="#">Menu Item #5</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </div>
</div>
@code {
    // Code here ...
}

我的引导导航栏下拉菜单

这是我遇到的问题。如果我像这样导航到我的页面：

https://localhost:5003/reader?id=1234&value=somevalue

然后单击下拉链接（下 chevron .SVG），Blazor 将我发送回此处：

https://localhost:5003/

然后，当我单击浏览器后退按钮再次转到此处时：

https://localhost:5003/reader?id=1234&value=somevalue

然后再次单击下拉链接，下拉菜单将按预期运行......直到我刷新/重新加载页面。

我需要做什么才能让 Blazor 将我发送回导航栏下拉菜单上的根页面？

标签： blazorblazor-server-sidebootstrap-5

解决方案

好的，我弄清楚了我的项目发生了什么。

在此任务之前，我阅读并遵循了此处的布局示例。

甚至在那之前，我的 JavaScript 出现了一些问题，根本无法工作，然后我发现我错误地加载了我的 3rd 方库。所以，在我的MainLayout.razor我有这段代码：

[Inject]
IJSRuntime JSRuntime { get; set; }
protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        await JSRuntime.InvokeAsync<IJSObjectReference>("import", "/js/jquery/jquery-3.6.0.min.js");
        await JSRuntime.InvokeAsync<IJSObjectReference>("import", "/js/popper/popper.min.js");
        await JSRuntime.InvokeAsync<IJSObjectReference>("import", "/js/bootstrap/bootstrap.min.js");
        await JSRuntime.InvokeAsync<IJSObjectReference>("import", "/js/JavaScript.js");
    }
}

在阅读了“ASP.NET Core Blazor 布局”文档并在我的代码中实现它之后，JavaScript 没有加载到我的Reader.razor页面中。这是因为我已经移动OnAfterRenderAsync到要包含的布局页面本身，它只包含在两个“主要”页面中，而不是我的Reader.razor页面。

我试着把它放回，MainLayout.razor但由于某种原因，JavaScript 现在只在我的Reader.razor页面中工作，而不是在包含@layout注释的其他两个页面中工作。

所以，我不得不找个地方把代码片段放在上面，这样我的所有页面都加载了 JavaScript。

最后，我决定将它放在 中App.razor，现在我所有的 JavaScript 都可以在所有页面上运行。

推荐阅读