Quantcast
Channel: Active questions tagged blazor - Stack Overflow
Viewing all articles
Browse latest Browse all 4839

How can I manually show/hide a Modal in Blazor?

$
0
0

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.


Viewing all articles
Browse latest Browse all 4839

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>