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)// orconst 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.