Modal not functioning in Blazor server side app

user_1690126 0
Viewed 2855

So I'm developing a Blazor App, Server side, and for the life of me, I cannot get a modal popup to function. I've followed several guides on how to do it, and from what I can tell I have everything right, but it will not trigger. I have a more complex solution, but even just for testing I did a bare bones project to just see if a cut and dry app would work, maybe something is wrong in my bigger project. But no, even just a simple app will not function. I'm pulling my hair out! Here is what I have, just for the simple bare bones app, this is my Index.razor file

@page "/"

<h1>Hello, world!</h1>

Welcome to your new app.<br />
<br />

<input type="button" class="btn btn-primary" data-target="#testModal" data-toggle="modal" value="Get Random" />

<div class="modal" id="testModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5>Generate Random Hash</h5>
                <button type="button" class="btn btn-primary" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                Random Number @((new Random().Next(0, 5000)))<br />
                <br />
                <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

@code{
    
}

My understanding is that the "data-target" and "data-toggle" should make things work, but nothing. Just for posterity too, here is my _Hosts.chtml file

@page "/"
@namespace ModalTest.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
    Layout = null;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ModalTest</title>
    <base href="~/" />
    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
    <link href="css/site.css" rel="stylesheet" />
</head>
<body>
    <app>
        <component type="typeof(App)" render-mode="ServerPrerendered" />
    </app>

    <div id="blazor-error-ui">
        <environment include="Staging,Production">
            An error has occurred. This application may no longer respond until reloaded.
        </environment>
        <environment include="Development">
            An unhandled exception has occurred. See browser dev tools for details.
        </environment>
        <a href="" class="reload">Reload</a>
        <a class="dismiss"></a>
    </div>

    <script src="_framework/blazor.server.js"></script>
</body>
</html>

Can anyone shed any light onto what I might be doing wrong here?? Many thanks!!

blazor core modal-dialog razor
2 Answers

This simply won't work with Bootstrap - Blazor cannot natively run JavaScript/JQuery out-of-the-box and that's what Bootstrap uses to trigger open/closing of modals (among other components of theirs).

If you want this to work, you have three options:

  1. Use JSInterop and an @onclick event on the button to call the Bootstrap function that is called inside your @code block for the modal. You'll need to cover closing it too using this same idea. I see you're missing (or you didn't include in your snippets) the necessary core Bootstrap jquery libraries which is required to go down this path.

  2. Make your own modal component, roll your own @onclick event function, and call OnStateChanged inside this function when they open & close it.

  3. Switch to something like Blazorise that already has most of the Bootstrap components ported over and usable for Blazor.

user_50007760

Option #2 above worked for me as follows:

  1. Make the modal a component by putting it in its own razor file.
  2. Add this to the component in a code block: 
    [Parameter] public EventCallback OnClose { get; set; }
  3. Add this to the button that closes the modal: 
    @onclick="OnClose"
  4. In the main page add 
    public bool showModal = false
  5. Add somewhere in the main page 
    @if (showModal)
{
    <MyModal OnClose="() => { showModal = false; }" />
}
  6. Finally, in the button that opens the modal, add 
    @onclick="() => { showModal = true; }"
user_136677480
Related