防止从 ASP NET 按钮关闭 Modal答案

【问题标题】：Prevent closing Modal from ASP NET Button防止从 ASP NET 按钮关闭 Modal
【发布时间】：2016-11-17 03:09:58
【问题描述】：

对于我的 ASP Webforms 应用程序，我使用 Bootstrap 中的模式 进行设置。

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

如您所见，我已经必须阻止 Button 进行回发。因为如果我单击模态打开的按钮，回发开始并且模态关闭。

所以我解决了这个问题。

但是现在如果我打开模态并想在这个模态中单击一个按钮：

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

模态关闭...但我希望用户看到他填写的帐户信息。单击“+”按钮后，我还有一个用于添加条目的字段。每次点击添加后，modal会关闭...

我已经尝试过 data-backdrop="static" 以及 Javascript 和 e.preventDefault();

有什么想法吗？

【问题讨论】：

我发现的一种解决方法是使用 LinkButton，因为我在提交按钮方面遇到了类似的问题，尽管采取了所有不提交的预防措施。签名类似，只需将其更改为 LinkButton 并重试。
Mit Dropbox anmelden 这是从 html 中的 asp net 转换而来的...所以再次回发，以便模态关闭...
在澄清之后，我相信你的问题与我试图建议的完全不同。对不起，希望你解决了。

标签： javascript c# asp.net twitter-bootstrap

【解决方案1】：

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

背后的代码：

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>

【讨论】：

就是这样！好的，模态很快就会关闭并打开一秒钟，但没关系。谢谢！
如果您不希望模态在 PostBack 之后关闭和打开，您可以在 jQuery 中编写一个 $ajax 函数来调用后面代码中的 [WebMethod]。这样模态将完全保持打开
或者最简单的方法：只删除ASPX文件中的淡入淡出过渡

【解决方案2】：

为什么不试试这个

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

【讨论】：

对我不起作用...单击按钮后它会打开和关闭...导致回发（重新加载内容）
OnClientClick="return false" 添加。现在试试@PeterH
是的，它有效，但我已经解决了这个问题：我的主要问题是如果模态打开模态内的按钮关闭模态导致回发我认为......我想知道如何防止在我点击按钮inside模态框后关闭模态框。