asp.net bootstrap modal - redirect after close

Question

my Bootstrap modal works fine but I can't find a way to redirect to another page after clicking the "Close" button in the modal.
My javascript :

<script src="/Content/Scripts/jquery.min.js" type="text/javascript"></script>
<script src="/Content/Scripts/bootstrap.min.js" type="text/javascript"></script>
<link href="~/Content/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="~/Content/css/bootstrap-theme.min.css" rel="stylesheet" type="text/css" />
<link href="~/Content/css/myStyleSheet.css" rel="stylesheet" type="text/css" />
<link href="~/Content/Images/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<asp:ContentPlaceHolder runat="server" ID="Head" />
<script type="text/javascript">
    function ShowPopup() { 
        $("#btnBS_Modal").click();
    }
</script>

My HTML :

    <div class="container">
    <div class="row">
        <button type="button" style="display: none;" id="btnBS_Modal" class="btn btn-primary btn-lg"
            data-toggle="modal" data-target="#myBS_Modal" data-backdrop="static" data-keyboard="false">
            Launch demo modal</button>
        <div class="modal fade in" id="myBS_Modal">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-body">
                        <asp:Label ID="lblBS_Modal" runat="server"/>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-success " data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

My code behind :

ClientScript.RegisterStartupScript(this.GetType(), "alert", "ShowPopup();", true);
this.lblBS_Modal.Text = "This is some message";
Response.Redirect("~/aaa.aspx");

The "Respose.Redirect" takes me to the proper page, but the modal is not popping up at all.
Searched a lot but couldn't get an answer for this.

Answer 1

Think about the difference between client code and server code. Server code runs through to completion, the resulting markup is sent to the client, then the client side code runs. So popping up a modal from server side code, followed by a redirect, isn't going to work. It's going to redirect the client, and the client will never execute any markup because the redirect is performed immediately.

Instead, you need to use client side code to handle the bootstrap modal closing event and perform the redirect.

$('#myBS_Modal').on('hidden.bs.modal', function (e) {
  window.location = '<%= ResolveUrl("~/aaa.aspx")>';
});

---

Change

<script type="text/javascript">
    function ShowPopup() { 
        $("#btnBS_Modal").click();
    }        
</script>

to

<script type="text/javascript">
    function ShowPopup() { 
        $("#btnBS_Modal").click();
    }
    $('#myBS_Modal').on('hidden.bs.modal', function (e) {
      window.location = '<%= ResolveUrl("~/aaa.aspx") %>';
    });
</script>

and get rid of your server side code that performs the redirect.

---

Since you can't use inline code, try this:

<asp:HiddenField runat="server" id="RedirectUrlHf" ClientIdMode="static" />

  /* Inside your script tag */
 $('#myBS_Modal').on('hidden.bs.modal', function (e) {
      var url =  $("#RedirectUrlHf").val();
      window.location = url;
    });

And on Page_Load, add this.

RedirectUrlHf.Value = ResolveUrl("~/aaa.aspx");