7

I'm trying to use the ImageButton control for client-side script execution only. I can specify the client-side script to execute using the OnClientClick property, but how do I stop it from trying to post every time the user clicks it? There is no reason to post when this button is clicked. I've set CausesValidation to False, but this doesn't stop it from posting.

Giffyguy
  • 20,378
  • 34
  • 97
  • 168

8 Answers8

20

I know this problem has already been answered but a simple solution is to return false from the HTML onclick method (i.e. the ASPX OnClientClick method) e.g.

<asp:ImageButton ID="ImageNewLink" runat="server" 
 ImageUrl="~/images/Link.gif" OnClientClick="DoYourStuff(); return false;"  />

Returning false stops the browser from making the request back to the server i.s. stops the .NET postback.

CodeClimber
  • 4,584
  • 8
  • 46
  • 55
  • I'd like to suggest an additional option of OnClientClick="return DoYourStuff();". Then return false inside of DoYourStuff(). This way DoYourStuff can return true or false depending on other factors and potentially still allow the postback for certain conditions. – TTT Apr 17 '14 at 19:44
  • If I have multiple buttons in a GridView, mine only works the first time and any time after, the function doesn't fire. http://stackoverflow.com/questions/25979847/how-to-prevent-postback-on-asp-button-while-displaying-a-popup-using-jquery – SearchForKnowledge Sep 23 '14 at 15:28
  • @TTT That's what I tried first, but for some reason it does not work. Although, if I put the `return false;` in the `OnClientClick` as CodeClimber suggested, it works. – actaram Jun 12 '15 at 19:11
4

Here's one way you could do it without conflicting with the postback functioning of other controls:

Define your button something like this:

<asp:Button runat="server" Text="Button" UseSubmitBehavior="false" OnClientClick="alert('my client script here');my" />

The "my" ending in the handler for OnClientClick is a way to alias asp.net's __doPostBack client event that forces the postback; we simply override the behavior by doing nothing similar to this script:

<script type="text/javascript">

function my__doPostBack(eventTarget, eventArgument) {
    //Just swallow the click without postback of the form
}
</script>

Edit: Yeesh, I feel like I need to take a shower after some of the dirty tricks that I need to pull in order to get asp.net to do what I want.

Pierreten
  • 9,917
  • 6
  • 37
  • 45
  • 1
    The "my" trick worked for me, but so did "return false" at the end which made me feel less icky – Carl Jul 17 '12 at 18:28
  • I am having the same problem... http://stackoverflow.com/questions/25979847/how-to-prevent-postback-on-asp-button-while-displaying-a-popup-using-jquery. I am about to test your solution now. – SearchForKnowledge Sep 23 '14 at 13:40
2

Another solution would be to define a PostBackUrl that does nothing

<asp:imagebutton runat="server" PostBackUrl="javascript:void(0);" .../>
sarghir
  • 134
  • 1
  • 4
1

This works Great for me:

Use OnClientClick to write your script and PostBackUrl="javascript:void(0);" to avoid postback.

<div class="close_but">
    <asp:ImageButton ID="imgbtnEChartZoomClose" runat="server" ImageUrl="images/close.png" OnClientClick="javascript:zoomclosepopup();" PostBackUrl="javascript:void(0);" />
    </div>
Somnath Kharat
  • 3,570
  • 2
  • 27
  • 51
1

Solution 1

<asp:ImageButton ID="btn" runat="server" ImageUrl="~/images/yourimage.jpg"
OnClientClick="return false;"  />

OR Solution 2

<asp:ImageButton ID="btn" runat="server" ImageUrl="~/images/yourimage.jpg" 
OnClientClick="yourmethod(); return false;"  />

In addition (solution 2), your javascript method may be in this form

<script type="text/javascript">
    function yourmethod() {
    __doPostBack (__EVENTTARGET,__EVENTARGUMENT); //for example __doPostBack ('idValue',3);
    }
</script>

in code behind

protected void Page_Load(object sender, System.EventArgs e)
{
    if (this.IsPostBack) {
        string eventTarget = this.Request("__EVENTTARGET") == null ? string.Empty : this.Request("__EVENTTARGET");
        string eventArgument = this.Request("__EVENTARGUMENT") == null ? string.Empty : this.Request("__EVENTARGUMENT");
    }
}
Vincenzo Costa
  • 930
  • 11
  • 17
1
<image src="..." onclick="DoYourThing();" />
John Gietzen
  • 48,783
  • 32
  • 145
  • 190
  • That'd be perfect, except that this button is built dynamically on the server-side and needs to be a .NET object. – Giffyguy Apr 24 '10 at 04:58
  • You can always have an `asp:Literal` control on your page, and in your code behind dynamically set text to that, i.e.: `myLiteral.Text = "";` – Joseph Yaduvanshi Apr 24 '10 at 05:27
1

Use a server side Image control

<asp:Image runat="server" .../>

Pretty sure you can add the client onclick event to that.

mxmissile
  • 11,464
  • 3
  • 53
  • 79
0

Use OnClientClick to write your script and PostBackUrl="javascript:void(0);" to avoid postback

PRADEEP SINGH Chundawat
  • 41
  • 3