ASP.NET button inside bootstrap modal not triggering click event

Question

I'm working in Bootstrap modal in my asp.net site, modal is working fine but the button btnSaveImage inside modal footer is not firing click event, I also have a masterpage and the form tag is in it.

Here is my code:

 <a href="#dvUpload" data-toggle="modal">
   <asp:Button runat="server" ID="lnkUploadPics" CssClass=" btn-large Greengradiant"
                                    Width="100%" Text="Upload pictures"></asp:Button>
   </a>
   <div id="dvUpload" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"  aria-hidden="true">
     <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
         ×</button>
        <h3 id="myModalLabel">
             Upload Image</h3>
           </div>
             <div class="modal-body">
            <div class="row-fluid" style="padding-left: 10px; padding-right: 10px; padding-bottom: 20px;"> 
<div id="Upload" class="span6">
        <asp:FileUpload ID="fuImage" runat="server" />
       <img id="imgUPload" runat="server" src="" />
              </div>
             </div>
            </div>
          <div class="modal-footer">
           <button data-dismiss="modal" class="btn  btn-large"> Close</button>
           <asp:Button runat="server" ID="btnSaveImage" Text="Save Image" CssClass="Greengradiant btn-large" OnClick="btnSaveImage_Click" />
            </div>
         </div>

yes actually when i click btnSaveImage a postback occured but i have set breakpoint in the click event which is not caught if i remove modal markup then button click works fine — skhurams, Jun 29 '13 at 14:49
can you remove the asp button and add new button and assign the OnClick event manually in it on the design mode event properties. And try to clean and rebuild your solution. — jomsk1e, Jun 29 '13 at 14:59
I have double click in designer to create the onclick code and i have cleaned and rebuild the solution but no difference — skhurams, Jun 30 '13 at 06:48
if i remove modal markup then button click works so nothing wrong with my code and second thing one of my colleague says that button click event of server side code will not run if you add bootstrap modal i think its a bug in bootstrap — skhurams, Jun 30 '13 at 07:13

score 38 · Accepted Answer · answered Sep 12 '13 at 18:06

You can use the ASP Button like in your example

<div class="modal-footer">
   <button data-dismiss="modal" class="btn  btn-large"> Close</button>
   <asp:Button runat="server" ID="btnSaveImage" Text="Save Image" CssClass="Greengradiant btn- large" OnClick="btnSaveImage_Click" />
</div>

just try the UseSubmitBehavior="false" like said skhurams and combine it with the data-dismiss="modal"

<div class="modal-footer">
   <button data-dismiss="modal" class="btn  btn-large"> Close</button>
   <asp:Button runat="server" ID="btnSaveImage" Text="Save Image" CssClass="Greengradiant btn- large" OnClick="btnSaveImage_Click" UseSubmitBehavior="false" data-dismiss="modal" />
</div>

this will close the modal and trigger the postback

In my case if I add UseSubmitBehavior="false" data-dismiss="modal" then require validation is not firing and modal pop is going to close. @bjvilory — Mr doubt, Aug 02 '17 at 05:22

score 1 · Answer 2 · answered Aug 21 '18 at 12:34

I'd like to add another point here. I faced this issue because my final rendered modal dialogs were placed outside the WebForms <form> tag, and using the UseSumbitBehavior="false" did not solve my problem. Moving the modal dialog divs inside the form solved the issue.

$("div.modalForm").appendTo($("form:first"));

ASP.NET button inside bootstrap modal not triggering click event

2 Answers2

Linked