I've been studying the bootstrap 4.3.1 docs in preparation for putting together layout and styling for a blazor wasm application idea. The bootstrap docs recommend using a "starter template." So I did that and everything works fine as plain html/bootstrap in Live Server without asp .net core. I can create and experiment with examples from the docs. No surprises.
The Bootstrap Starter Template, of course, includes javascript libraries for jquery, popper, as well as bootstrap itself in addition to bootstrap css. My understanding is that the javascript library of bootstrap implements things like toggling the collapse of elements when the hamburger button is pushed (for example). I think I would very much like to keep using "javascript parts" of bootstrap for low-level UI stuff. It makes sense, right?
The problem comes when I try implement blazor wasm pages and also continue to use the bootstrap javascript functionality. The first thing I notice is that the blazor wasm template DOES NOT include jquery, popper, and bootstrap.js. And, of course, the template example uses a @Code block to implement the navbar collapsing functionality of the hamburger button. Here's what's in the NavMenu.razor file...
<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;
}
}
In the bootstrap docs, collapse functionality is implemented with something more cogent that uses the attributes data-toggle and data-target, a collapse class, and a specific 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>
My preference is to use the bootstrap javascript functionality for such things but I can't seem to make it work. Yes, I do include the jquery, popper, bootstrap.js stuff in the wwwroot/index.html (in the correct order, just like in the bootstrap starter template). I was hoping it would "just work".
What I tried
Using the technique described in the boostrap docs, I tried modifying the Template's NavMenu.razor like this...
<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>
With the above, the Navbar items hide when the width of the screen gets narrow-enough, and a hamburger button appears. But pressing the hamburger button does nothing. I don't know how to debug if it's even trying to expand the nav-items vertically.
Questions:
I am not supposed to use the "javascript parts" of bootstrap? Is that why the blazor wasm template implements the collapse functionality with a C#
@Codeblock and does not include bootstrap.js, etc? Could the collapse functionality in the Blazor wasm template have been implemented the same way as the bootstrap docs?I read that we have to use "JS interop" in order to call javascript functions from .NET methods. That's a huge chunk of complex documentation, BUT, when I use the bootstrap javascript functionality I am not calling javascipt funcs from inside a .NET method. If I understand correctly, using JS interop would only be required if I am calling a javascript func from within a
@Codeblock. I am calling javascript functions indirectly through bootstrap after the DOM has been rendered and completely outside of .NET methods, right?