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>
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.
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.
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.
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.
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
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"));
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With