javascript - Prevent closing Modal from ASP NET Button - Stack Overflow

For my ASP Webforms Application I use a Modal from Bootstrap for the settings.<asp:Button CssClass=&

For my ASP Webforms Application I use a Modal from Bootstrap for the settings.

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

As you can see, I already have to prevent the Button for postback. Because if I click the button the Modal opens, postback starts and the Modal close.

So this problem I fixed.

But now if I open the modal and wanna click a Button in this Modal:

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

The Modal close... But I want that the user sees that the Accountinformation from him filled in. Also I have a field for adding entries after clicking the "+" Button. After every click for adding, the modal will be closed...

I already tried data-backdrop="static" and something with Javascript and e.preventDefault();

Any ideas?

For my ASP Webforms Application I use a Modal from Bootstrap for the settings.

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

As you can see, I already have to prevent the Button for postback. Because if I click the button the Modal opens, postback starts and the Modal close.

So this problem I fixed.

But now if I open the modal and wanna click a Button in this Modal:

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

The Modal close... But I want that the user sees that the Accountinformation from him filled in. Also I have a field for adding entries after clicking the "+" Button. After every click for adding, the modal will be closed...

I already tried data-backdrop="static" and something with Javascript and e.preventDefault();

Any ideas?

Share Improve this question edited Jul 14, 2016 at 10:55 Bill Tür stands with Ukraine 3,52730 gold badges40 silver badges51 bronze badges asked Jul 14, 2016 at 9:13 CobiCobi 1301 gold badge2 silver badges12 bronze badges 3
  • One work-around I have found, cause I have had similar problems with submit buttons, despite all precautions not to submit, is to use LinkButton. The signature is similar so just change it to LinkButton and try again. – user1372494 Commented Jul 14, 2016 at 9:18
  • <a class="btn btn-info" href="javascript:__doPostBack('ctl09','')">Mit Dropbox anmelden</a> this is the convert from asp net in html... so again a postback so that the modal closed... – Cobi Commented Jul 14, 2016 at 9:34
  • After the clarifications, I believe you have entirely different problem from what I was trying to suggest. Sorry, hope you have worked it out. – user1372494 Commented Jul 19, 2016 at 5:12
Add a ment  | 

2 Answers 2

Reset to default 0

Clicking a server side ASP.NET Button control will cause a PostBack and your page will be re-loaded, therefore the modal will be closed.What you can do is call the code below in the click event to re-open the modal after the click event:

Code behind:

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./ajax/libs/jquery/1.12.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn./bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn./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>

Why not trying this

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

Here is my plete code

 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn./bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis./ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn./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>

发布者:admin,转转请注明出处:http://www.yc00.com/questions/1745522588a4631326.html

相关推荐

  • javascript - Prevent closing Modal from ASP NET Button - Stack Overflow

    For my ASP Webforms Application I use a Modal from Bootstrap for the settings.<asp:Button CssClass=&

    12小时前
    20

发表回复

评论列表(0条)

  • 暂无评论

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信