Can I create an ASP.NET ImageButton that doesn't postback?

Question

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.

Watford

Any reason not to just use the onclick event of a img tag? – Canoness

@BigJason: I'd like to avoid it if possible. This button is deeply complex, and is built on the server-side. – Watford

Answer 1

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.

Coadjutant

The "my" trick worked for me, but so did "return false" at the end which made me feel less icky – Swish

I am having the same problem... #25980347. I am about to test your solution now. – Expatriate

Answer 2

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.

Hak

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. – Plectognath

If I have multiple buttons in a GridView, mine only works the first time and any time after, the function doesn't fire. #25980347 – Expatriate

@Plectognath 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. – Westmoreland

Answer 3

Another solution would be to define a PostBackUrl that does nothing

<asp:imagebutton runat="server" PostBackUrl="javascript:void(0);" .../>

Stirpiculture

Answer 4

<image src="..." onclick="DoYourThing();" />

Renatarenate

That'd be perfect, except that this button is built dynamically on the server-side and needs to be a .NET object. – Watford

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 = "<img src=\"asdf\" onclick=\"DoYourThing();\" />"; – Cording

Answer 5

Use a server side Image control

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

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

Golden

Answer 6

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>

Bimbo

Answer 7

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

Taps

Answer 8

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

Perfusion