Bootstrap Modal refreshes page in web forms

Question

I am struggling to make this to work. All I want is to open a bootstrap modal to open on the click of a button without refreshing the page.

Following is the modal

.pipe(gulp.dest('js/')) -> .pipe(gulp.dest('./js/'))

The button is

 <div class="modal fade" id="myModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <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"><asp:Label ID="lblModalTitle" runat="server" Text="Send Confirmation"></asp:Label></h4>
                </div>
                <div class="modal-body">
                    <asp:Label ID="lblModalBody" runat="server" Text="Are you sure?"></asp:Label>
                </div>
                <div class="modal-footer">
                    <asp:Button ID="SendToBillingBtn" runat="server" CssClass="btn btn-primary" Text="Yes" OnClick="SendToBillingBtn_Click" /> &nbsp;&nbsp;&nbsp;
                    <button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">No</button>
                </div>
            </div>
</div>

and in codebehind I have

 <asp:Button ID="TransferFileBtn" runat="server" CssClass="btn btn-primary" Text="Transfer file" OnClick="TransferFileBtn_Click" />

I have used the following link as a reference Display Bootstrap Modal from Asp.Net Webforms

On the button click, I do see the modal popup but the page reloads. How can I avoid page to reload?

Thank you

Answer 1

As I'm not an expert on ASP. so im not sure about this but try removing ResponseAvailableHeader from your button.

Answer 2

If you do not need to postback to server, you can simply use standard input or button tag.

(defun minimum (l)
  (cond
    ((null l) 99999)
    ((atom (car l)) (min (minimum (cdr l)) 99999))
    ((numberp (car l)) (min (car l) (minimum (cdr l))))
    (T (min (minimum (cdr l)) (minimum (Car l))))))

Or just return false in client click event.

<button type="button" class="btn btn-primary" 
   data-toggle="modal" data-target="#myModal"> Launch demo modal </button>

How I tested

 <asp:Button ID="TransferFileBtn" runat="server" 
      CssClass="btn btn-primary" Text="Transfer file" 
      OnClientClick="$('#myModal').modal(); return false;" />

Answer 3

请找到代码，希望这对您有帮助。

    **//Button**
   <asp:Button ID="TransferFileBtn" runat="server" CssClass="btn btn-primary" Text="Transfer file" OnClientClick="onTest();return false;" />

    **//Popup code:** 

   <div class="modal fade" id="modalTest" tabindex="-1" role="dialog"
            aria-labelledby="exampleModalLabel" aria-hidden="true" style="width: 100%; height: 100%;">
            <div class="modal-dialog">
                <div class="modal-content" style="height: 700px">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="H2">
                            <asp:Label runat="server" ID="lblRSF" Text=""></asp:Label></h4>
                    </div>
                    <div class="modal-body">
                     **//Used Iframe**
                        <iframe runat="server" frameborder="0" id="frmExample" runat="server" style="width: 100%; height: 600px; overflow: hidden;"></iframe>
                    </div>
                </div>
            </div>
        </div>


   **//Js function
       function onTest() {
                   $("#<%=lblRSF.ClientID%>").text("Demo");
                 //Admin/Example.aspx (write whatever you want to show in the popup)
                   $("#<%=frmMapExample.ClientID%>").attr("src", "../Admin/Example.aspx);
                   $('#modalTest').modal('show');
                   }