带有引导启动模板的 blazor wasm 应用程序

Question

我一直在研究 bootstrap 4.3.1 文档，准备为 blazor wasm 应用程序想法整合布局和样式。引导文档建议使用“入门模板”。所以我这样做了，一切都在没有asp .net core的Live Server中像普通 html/bootstrap 一样正常工作。 我可以创建并尝试文档中的示例。没有什么惊喜。

当然， Bootstrap Starter Template还包括 jquery、popper 的 javascript 库，以及 bootstrap 本身以及 bootstrap css。我的理解是，bootstrap 的 javascript 库实现了诸如按下汉堡包按钮时切换元素折叠之类的功能（例如）。我想我非常想继续使用 bootstrap 的“javascript 部分”来处理低级 UI 内容。这是有道理的，对吧？

当我尝试实现 blazor wasm 页面并继续使用引导 javascript 功能时，问题就出现了。我注意到的第一件事是 blazor wasm 模板不包含 jquery、popper 和 bootstrap.js。当然，模板示例使用@Code块来实现汉堡包按钮的导航栏折叠功能。这是 NavMenu.razor 文件中的内容...

<div class="top-row pl-4 navbar navbar-dark">
    <a class="navbar-brand" href="">bwasm1</a>
    <button class="navbar-toggler" @onclick="ToggleNavMenu">
        <span class="navbar-toggler-icon"></span>
    </button>
</div>

<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
// ...navbar items removed for brevity...
</div>

@code {
    private bool collapseNavMenu = true;
    private string NavMenuCssClass => collapseNavMenu ? "collapse" : null;
    private void ToggleNavMenu()
    {
        collapseNavMenu = !collapseNavMenu;
    }
}

在 bootstrap 文档中，折叠功能是通过使用属性 data-toggle 和 data-target、折叠类和特定 id 的更有效的方法来实现的：

<p>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" >
    Button with data-target
  </button>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </div>
</div>

我的偏好是使用引导 javascript 功能来完成此类事情，但我似乎无法使其工作。是的，我确实在其中包含了 jquery、popper、bootstrap.js 内容wwwroot/index.html（以正确的顺序，就像在 bootstrap 启动器模板中一样）。我希望它能“正常工作”。

我尝试过的

使用 boostrap 文档中描述的技术，我尝试像这样修改模板的 NavMenu.razor ...

<div class="top-row pl-4 navbar navbar-dark">
    <a class="navbar-brand" href="">bwasm3</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#ToggleNavMenu">
        <span class="navbar-toggler-icon"></span>
    </button>
</div>
<div class="collapse navbar-collapse" id="ToggleNavMenu">
         // ...navbar items removed for brevity...
</div>

通过上述内容，当屏幕宽度变得足够窄时，导航栏项目会隐藏，并会出现一个汉堡包按钮。但按下汉堡按钮没有任何作用。如果它甚至尝试垂直扩展导航项，我不知道如何调试。

问题：

• 我不应该使用引导程序的“javascript 部分”？这就是为什么 blazor wasm 模板使用 C# 块实现折叠功能@Code并且不包含 bootstrap.js 等吗？Blazor wasm 模板中的折叠功能是否可以按照与引导文档相同的方式实现？

• 我读到我们必须使用“JS interop”才能从 .NET 方法调用 javascript 函数。这是一大堆复杂的文档，但是，当我使用引导 javascript 功能时，我不会从.NET 方法内部调用 javascipt funcs。如果我理解正确的话，只有当我从块内调用 javascript func 时才需要使用 JS 互操作@Code。在 DOM 渲染之后，我通过 bootstrap 间接调用 javascript 函数，并且完全在 .NET 方法之外，对吧？