防止ASP.NET按钮关闭模态窗口

Question

防止ASP.NET按钮关闭模态窗口

3

我的ASP Webforms应用程序中，我使用了Bootstrap的Modal来进行设置。

<asp:Button CssClass="btn btn-default" data-toggle="modal" data-target="#myModal" OnClientClick="return false;" runat="server" Text="Einstellungen" />

正如您所见，我已经防止了按钮的回发。因为如果我点击按钮，模态框就会打开，回发开始，然后模态框关闭。

所以这个问题我已经解决了。

但是现在，如果我打开模态框并想要点击其中的按钮：

 <asp:Button runat="server" ID="dropbox" Text="Mit Dropbox anmelden" CausesValidation="false" OnClick="dropboxButton" CssClass="btn btn-info" />

模态框关闭后，我希望用户仍然能够看到他填写的账户信息。此外，我有一个字段用于在单击“+”按钮后添加条目。每次单击添加后，模态框将关闭...

我已经尝试过使用 data-backdrop="static" 和一些 JavaScript 以及 e.preventDefault(); 的方法。

有什么想法吗？

- Cobi

我发现的一个解决方法是使用LinkButton，因为我在提交按钮方面也遇到了类似的问题，尽管采取了所有预防措施。签名类似，只需将其更改为LinkButton并重试即可。 - user1372494

<a class="btn btn-info" href="javascript:__doPostBack('ctl09','')">使用Dropbox登录</a> 这是从ASP.NET转换为HTML的表单...因此需要再次进行postback以关闭模态框... - Cobi

经过澄清，我相信你遇到的问题与我之前尝试提出的完全不同。很抱歉，希望你已经解决了它。 - user1372494

2个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Syed Mhamudul Hasan · Answer 1

为什么不试试这个呢

<asp:Button ID="btnSpareRequisition" CssClass="btn  btn-primary" runat="server" Text="Request Spare" ClientIDMode="Static" data-toggle="modal" data-target="#requestSpareModalId" OnClientClick="return  false"/>

这是我的完整代码

 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


<div class="container">
  <h2>Modal Example</h2>
  <!-- Trigger the modal with a button -->
 <%-- <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>--%>
 <asp:Button ID="btnSpareRequisition" CssClass="btn  btn-primary" runat="server" Text="Request Spare" ClientIDMode="Static" data-toggle="modal" data-target="#myModal" OnClientClick="return  false" />
  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>

</div>

- Denys Wessels · Answer 2

点击服务器端ASP.NET按钮控件将导致PostBack并重新加载页面，因此模态将被关闭。您可以在单击事件中调用下面的代码来重新打开模态之后单击事件：

后台代码：

protected void btnClickMe_Click(object sender, EventArgs e)
{
    lblTest.Text = DateTime.Now.ToString("dd MMM yyyy - HH:mm:ss");
    ScriptManager.RegisterStartupScript(this, this.GetType(), "Pop", "showModal();", true);
}

.ASPX：

<head>
    <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 showModal() {
            $('#myModal').modal('show');
        }

        $(function () {
            $("#btnShowModal").click(function () {
                showModal();
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <input type="button" id="btnShowModal" value="Show Modal" />
        <div id="myModal" class="modal fade"">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title" id="myModalLabel">Modal popup</h4>
                    </div>
                    <div class="modal-body">
                        <asp:Label ID="lblTest" runat="server"></asp:Label>
                    </div>
                    <div class="modal-footer">
                        <asp:Button ID="btnClickMe" runat="server" Text="Click Me" OnClick="btnClickMe_Click" />
                    </div>
                </div>
            </div>
        </div>
    </form>
</body>