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
– skhurams, Commented Jun 29, 2013 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
– jomsk1e, Commented Jun 29, 2013 at 14:59

bjvilory · Accepted Answer · 2013-09-12 18:06:21Z

38

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

answered Sep 12, 2013 at 18:06

bjvilory

5866 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mr doubt Over a year ago

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

Fahad · Accepted Answer · 2018-08-21 12:34:40Z

1

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"));

answered Aug 21, 2018 at 12:34

Fahad

1,4543 gold badges21 silver badges41 bronze badges

Collectives™ on Stack Overflow

ASP.NET button inside bootstrap modal not triggering click event

2 Answers 2

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Linked

Related