How do you manually show a Bootstrap 5 Modal using Javascript as explained in their documentation using this format on Blazor Interactive Server?
const myModal = new bootstrap.Modal(document.getElementById('myModal'), options)
// or
const myModalAlternative = new bootstrap.Modal('#myModal', options)
I tried using JSInterop.InvokeAsync while having my JS code in another file located in wwwroot/ that I loaded through the App.razor and I tried loading the module itself through the code block but the new bootstrap
boostrap variable was not found for both formats.
Instead I used the BlazorBootstrap library which has the Modal component to show my modal rather than Bootstrap 5. Is there a way to use JSInterop to show/hide the boostrap 5 modal?
@page "/modal"
@rendermode InteractiveServer
@inject IJSRuntime JS
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Blazor code block
@code {
private async Task Confirm()
{
// Call method and pass modal ID param to call
await JS.InvokeVoidAsync("<<METHOD>>", "exampleModal");
}
}
JS File
var myModal = new bootstrap.Modal(document.getElementById("exampleModal"), {});
myModal.show();
Would Blazor ElementReference be a better approach for this?
Other related question: Bootstrap modal on Blazor stopped working on .NET 8 RC2 (using JSInterop to open/close)
I expected JSInvoke to call the Javascript code and show my modal but it the errored out saying that bootstrap was not found. I attempted to set it to the window object and I tried exporting a function but both returned the same error.