Trouble getting Bootstrap modal window to open from server-side ASP.NET code

Question

I am having problems getting a modal Bootstrap window to open up from server-side ASP.NET code, despite having followed all of the examples I find here. The code executes, and I get no JavaScript errors, but the modal window never appears.

Here is the modal window HTML:

    <div id="StatusPopUp" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        &times;</button>
                    <h4 class="modal-title">Credentials Not Found</h4>
                </div>
                <div class="modal-body">
                    <p class="text-justify">
                        The email address and/or password entered do not match our records.  Please try your login again if you believe this is an
                        error.
                    </p>
                    <p class="text-justify">
                        If you are an associate and need credentials for use of the Portal then please contact your regional office
                        or Team Sales Lead to request them.
                    </p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">
                        Close</button>
                </div>
            </div>
        </div>
    </div>

Here is the Javascript code to open the modal:

    <script type="text/javascript">
        function Show() {
            $("#StatusPopUp").modal("show");
        }
    </script>

and finally, here's the code on the server-side meant to open the modal:

        protected void btnGo_Click(object sender, EventArgs e) {
            bool isValid=Membership.ValidateUser(UName.Value,Pwd.Value);
            if ( isValid )
                this.Response.Redirect ( "associates/home.aspx", true );
            else
                ClientScript.RegisterStartupScript ( this.GetType ( ), "alert", "Show();", true );

        }

The goal is that when the user tries to sign in on the login page and is unsuccessful, the modal should pop up with a message. As I said, all of the code executes as written, but it still doesn't let the modal window actually come up in the browser. Help?

Answer 1

If the display of the modal is only triggered from a server side response on a page reload, I'd refactor this a little, using an asp:panel and moving the javascript into your regular jquery $(document).ready() function.

This way the modal HTML is not even rendered until it is needed and you have finer control of when the script to show the modal is called. You don't have to juggle any external script loading etc.

aspx

<asp:panel id="pnlStatusPopUp" runat="server" visible="false">
  <div id="StatusPopUp" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    &times;</button>
                <h4 class="modal-title">Credentials Not Found</h4>
            </div>
            <div class="modal-body">
                <p class="text-justify">
                    The email address and/or password entered do not match our records.  Please try your login again if you believe this is an
                    error.
                </p>
                <p class="text-justify">
                    If you are an associate and need credentials for use of the Portal then please contact your regional office
                    or Team Sales Lead to request them.
                </p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">
                    Close</button>
            </div>
        </div>
    </div>
  </div>
</asp:panel>

.cs

protected void btnGo_Click(object sender, EventArgs e) {
    bool isValid=Membership.ValidateUser(UName.Value,Pwd.Value);
    if ( isValid )
         this.Response.Redirect ( "associates/home.aspx", true );
    else
         pnlStatusPopUp.visible = true;
}

js

$(document).ready(function(){
   $("#StatusPopUp").modal("show");
});