Question

我在模态弹出窗口中有5个复选框，其中autopostback = true。当我点击其中一个复选框时，我的模态弹出窗口会自动关闭。我也用过更新面板 ScriptManager.RegisterStartupScript（this，this.GetType（），＆＃34; Pop＆＃34;，＆＃34; openModal（）;＆＃34;，true）;在这段代码背后的代码重新打开我的模态弹出窗口。但我不想重新打开弹出窗口。
我该怎样做到这一点？

Answer 1

重新打开弹出窗口始终是必要的。 Autopostback导致整个页面被重新加载，因此jquery / javascript变量和模态等的状态将丢失。如果您不希望这样，您将不得不使用Ajax来通知单击复选框以及它们应触发的操作。

Answer 2

只需将您的复选框打包在<asp:UpdatePanel>控件中：

 <asp:UpdatePanel runat="server" ID="updatePanel">
        <ContentTemplate>
            <asp:CheckBox ID="CheckBox1" runat="server" Text="Checkbox 1" OnCheckedChanged="CheckBox1_CheckedChanged" AutoPostBack="true" />
            <asp:CheckBox ID="CheckBox2" runat="server" Text="Checkbox 2" OnCheckedChanged="CheckBox1_CheckedChanged" AutoPostBack="true" />
        </ContentTemplate>
    </asp:UpdatePanel>

代码背后：

protected void CheckBox1_CheckedChanged(object sender, EventArgs e)
{
    lblResults.Text = String.Empty;

    if (CheckBox1.Checked)
        lblResults.Text = "Checkbox 1.";
    if (CheckBox2.Checked)
        lblResults.Text += "Checkbox 2.";
}

<强> .ASPX：

<head runat="server">
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
    <script type="text/javascript">
        $(function () {
            $('#messageBox').modal('show');
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div class="modal fade" id="messageBox" 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">Modal</h4>
                    </div>
                    <div class="modal-body">
                        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
                        <asp:UpdatePanel runat="server" ID="updatePanel">
                            <ContentTemplate>
                                <asp:CheckBox ID="CheckBox1" runat="server" Text="Checkbox 1" OnCheckedChanged="CheckBox1_CheckedChanged" AutoPostBack="true" />
                                <asp:CheckBox ID="CheckBox2" runat="server" Text="Checkbox 2" OnCheckedChanged="CheckBox1_CheckedChanged" AutoPostBack="true" />
                                <asp:Label runat="server" ID="lblResults" />
                            </ContentTemplate>
                        </asp:UpdatePanel>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
    </form>
</body>

Answer 3

在页面加载之前粘贴以下代码

protected void Page_PreInit(object sender, EventArgs e) {
  UpdatePanel updatePanel = Master.FindControl("your main Contetnt id") as UpdatePanel;
  updatePanel.UpdateMode = UpdatePanelUpdateMode.Conditional;
  updatePanel.ChildrenAsTriggers = false;
}

当我点击复选框时，我的bootstrap模态弹出正在关闭

3 个答案: