Best way to catch Button postback

Question

I saw other solutions, such as this one , which is pretty simple, but what if the javascript function does more than just confirm('sure?'); ? I never know when he will return the bool.

So, I decided to implement all my ASP.NET buttons as follows:

 <button id="btnDelete" name="btnDelete" class="btn">Delete</button> <asp:Button ID="_btnDelete" runat="server" OnClick="_btnDelete_Click" style="display:none;" /> $('#btnDelete').click(function (e) { $.blockUI({ message: $('#divConfirmDeleteModal'), overlayCSS: { cursor: 'default' }, css: { cursor: 'default' }, baseZ: 5555 }); return false; }); $('#btnDeleteYes').click(function () { $('#<%=_btnDelete.ClientID%>').trigger('click'); }); $('#<%=_btnDelete.ClientID%>').click(function (e) { // the delay happens here. if i put an alert here, it fires, // but then the page just loads until eventually the method gets called <%= ClientScript.GetPostBackEventReference(_btnDelete, string.Empty) %>; }); 

.. and so far it has worked well. I am experiencing problems in IE (even version 10). _btnDelete_Click will take up to 2 minutes to trigger a call after clicking the button that ultimately calls it.

This is too bad, and I was wondering if there is a better approach.

edit: here is another “right” way to do this, but I want to be able to use a more convenient modal dialog and that return true when clicking “yes”, instead of using the browser confirmation dialog confirmation.

edit2: I assume I am asking if there is a way to return a bool for the OnClientClick function, which does more than one thing

Answer 1

If you manually fire the click event in the client script, your application will not be able to function normally using the Go mobile browser button.

Here's how you can capture a server side click event without manually triggering it yourself on the client side.

 <script type="text/javascript"> function clientClick() { if (confirm("Are you sure you want to delete?")) { // Do something at client side before posting back to server return true; } return false; } </script> <asp:Button runat="server" ID="DeleteButton" Text="Delete" OnClick="DeleteButton_Click" OnClientClick="return clientClick();" /> 

You can make a lot of fancy stuff with ASP.Net MVC. However, they pose many problems in traditional ASP.Net.

Answer 2

If you want to show the fancier modal dialog, you can use the jQuery dialog widget. To fit your example, check out the following code for the body element of a sample web form:

 <form id="form1" runat="server"> <input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" /> <input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" /> <div id="deleteConfirmationDialog" title="Warning!">Are you sure you want to delete?</div> <asp:Button ID="_btnDelete" runat="server" Text="Delete" OnClick="_btnDelete_ServerClick" OnClientClick="return _btnDelete_ClientClick();" /> </form> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> <script type="text/javascript"> function doPostBack(theForm, eventTarget, eventArgument) { if (!theForm.onsubmit || (theForm.onsubmit() != false)) { theForm.__EVENTTARGET.value = eventTarget; theForm.__EVENTARGUMENT.value = eventArgument; theForm.submit(); } } function showConfirmationDialog(dialogSelector, callback, form, target) { $(dialogSelector).dialog({ resizable: false, height: 200, modal: true, buttons: [{ text: "Yes", click: function () { $(this).dialog("close"); callback(form, target, null); } }, { text: "No", click: function () { $(this).dialog("close"); } }] }); }; function _btnDelete_ClientClick() { showConfirmationDialog("#deleteConfirmationDialog", doPostBack, $("#form1").get(0), "_btnDelete"); return false; } $(document).ready(function () { $("#deleteConfirmationDialog").hide(); }); </script> 

The code associated with the _btnDelete control (the _btnDelete_ServerClick method) will only be executed if you click the Yes button in the modal dialog box after clicking the Delete button. Remember to add the jQuery UI CSS file to the chapter section:

 <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery.ui.all.css"/> 

Answer 3

The recovered memories have awakened - I fought the same battle with asp.net Webforms 3.5 years ago. We had to implement ajax calls in the grid by pressing enter and showing a modal dialog to confirm the order if the product had some comments (for example, restored, etc.).

Looking through some old code snippets, I found all kinds of javascript to prevent defaults and bubbles

 // prevent the browser event bubbling for example posting the webform function stopDefault(e) { if (e.preventDefault) { e.preventDefault(); e.stopPropagation(); } else { event.returnValue = false; event.cancelBubble = true; e.returnValue = false; e.cancelBubble = true; } } 

and html / asp like this

 <button type="button" onclick="SearchProducts(event,this);">Search Products</button> <asp:Button ID="btnSearch" ClientIDMode="Static" runat="server" onclick="btnSearch_Click" OnClientClick="SearchProducts(event,this)" UseSubmitBehavior="false" Text="Does nothing" /> 

In the end, I used only standard html buttons and avoided the asp: Button, because there was less hassle to deal with all the built-in functions and behind the scenes of asp.net web form magic.

If you avoid the asp: button, you can recommend it.