Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ASP.NET button inside bootstrap modal not triggering click event

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>
like image 952
skhurams Avatar asked Jun 29 '13 12:06

skhurams


People also ask

Why button click is not working in asp net?

Try to go into Design mode in Visual Studio, locate the button and double click the button that should setup the event. Otherwise once the button is selected in Design more, go to the properties and try setting it from there.

How do you trigger a modal with a button?

To trigger the modal window, you need to use a button or a link. Then include the two data-* attributes: data-toggle="modal" opens the modal window. data-target="#myModal" points to the id of the modal.

How show modal pop on button click in ASP NET MVC?

Step 1 : Start a new ASP.NET MVC Web application. Add a new controller called Home and in the Home controller, the Index method is available to you but there is not a view with it so add a view by right-clicking in Index action. Step 2 : In index. aspx add one HTML button to open our modal popup window like below.

What is onclick event in asp net?

The Click event is raised when the Button control is clicked. This event is commonly used when no command name is associated with the Button control (for instance, with a Submit button). Raising an event invokes the event handler through a delegate.


2 Answers

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

like image 77
bjvilory Avatar answered Sep 17 '22 14:09

bjvilory


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"));
like image 41
Fahad Avatar answered Sep 20 '22 14:09

Fahad