asp.net bootstrap 模式 - 关闭后重定向

Question

我的 Bootstrap 模式工作正常，但我无法在点击模式中的 "Close" 按钮后找到重定向到另一个页面的方法。
我的 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>

我的 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>

我背后的代码：

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

"Respose.Redirect" 将我带到正确的页面，但模式根本没有弹出。
搜索了很多，但找不到答案。

Answer 1

想想客户端代码和服务端代码的区别。服务器代码运行到完成，生成的标记被发送到客户端，然后客户端代码运行。因此，从服务器端代码弹出一个模式，然后进行重定向，是行不通的。它将重定向客户端，客户端永远不会执行任何标记，因为重定向是立即执行的。

相反，您需要使用客户端代码来处理 bootstrap modal closing event 并执行重定向。

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

改变

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

至

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

并删除执行重定向的服务器端代码。

因为你不能使用内联代码，试试这个：

<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;
    });

然后在 Page_Load 上添加这个。

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

Answer 2

在伟大而强大的@mason 的帮助下，我终于让它工作了。
我的主页：

<head runat="server">
    <meta charset="utf-8" />
    <title>Redirect - <%: Page.Title %></title>
    <script src="/Content/Scripts/myJavaScripts.js" type="text/javascript"></script>
    <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" />
</head>

请注意第一个 link 是 "myJavaScripts.js" 我放置 js 的地方是：

function ShowPopup() {
    $("#btnBS_Modal").click();
    $('#myBS_Modal').on('hidden.bs.modal', function (e) {
        var url = $("#RedirectUrlHf").val();
        window.location = url;
    });
}

在模态框所在页面的 HTML 中，我有：

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
    <div>
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
    </div>
    <div class="container">
        <asp:HiddenField ID="RedirectUrlHf" runat="server" ClientIDMode="Static" />
        <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 glyphicon glyphicon-ok" data-dismiss="modal"></button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</asp:Content>

（注意隐藏字段需要 ClientIDMode="Static"）。

在我后面的代码中：

    protected void Page_Load(object sender, EventArgs e)
    {
        RedirectUrlHf.Value = ResolveUrl("/Account/aaa.aspx");
    }

现在，当我页面上的模式关闭时，我将被重定向到正确的页面。
@mason 帮了我大忙，一路上我从他那里学到了很多东西。谢谢你，@mason。

asp.net bootstrap 模式 - 关闭后重定向

asp.net bootstrap modal - redirect after close

asp.net

redirect

twitter-bootstrap

bootstrap-modal