CODEWITHSUNDEEP
asp.netbootstrap-modalbootstrap-5
TC_Guy
TC_Guy

Reputation: 137

Can't open Bootstrap 5 Modal from ASP.NET Code-behind

I have reviewed many previous questions on this but haven't found anything that works. I have an ASP.NET web application project, and I would like to use a Bootstrap 5 modal to display messages when the user needs to correct something during account registration. Part of the reasoning for this is because some of the logic for creating an account must run server-side, so doing everything via JavaScript is not really an option.

My modal code is defined as follows:

<div class="modal fade" id="ErrModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
   <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="staticBackdropLabel">Please Correct...</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <asp:Label ID="lblMsg" CssClass="h5" runat="server"></asp:Label>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-btn-primary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

I have client-side script code added as follows:

function openModal() {
   $('#ErrModal').modal('show');
}

And finally, in my ASP.NET code-behind, I attempt to display the modal using this code:

lblMsg.Text = ex.StatusCode.ToString ( );
ClientScript.RegisterStartupScript ( this.GetType ( ), "Pop", "openModal();", true );

When I do something to deliberately cause the code for displaying the modal to execute, it doesn't pop up, and I get the error "Uncaught ReferenceError: openModal is not defined" in the Chrome console.

What am I doing wrong here?

Upvotes: 0

Views: 1116

Answers (2)

Katie P
Katie P

Reputation: 633

Sorry this answer is really late, but better than never. I was having same issue today & figured it out. Bootstrap 5 doesn't support jQuery. You can remove jquery script reference & change your client script to this:

function openModal() {
         var pageModal = new bootstrap.Modal(document.getElementById("ErrModal"), { keyboard: false });
         pageModal.show();
 }

Upvotes: 0

Gaurav Kumar
Gaurav Kumar

Reputation: 26

Most probably script runs even before page is loaded completely.

Reference

Upvotes: 1

Related Questions