Cancel Postback Using ImageButton: The Sequel

Posted on 2004-11-13
Last Modified: 2009-10-21
I am trying to build a toolbar. To do so, I am exploring using multiple asp:ImageButtons to build the bar.

I have been able to get around the problem of being able to execute code that I want to use on the client side (although I admit that the ImageButton is really intended to execute code on the server).

I have also reviewed comments about this identical issue that previously appeared in this forum. See:

The conclusion at that time was to use the standard html image control.

However, the basic image control does not have tooltips or even a click event.

The issue I have with the ImageButton is that after I have executed my code locally, it wants to do a postback. I suppose if I could set an attribute like AutoPostBack="false", everything would be fine.. But the ImageButton doesn't have the AutoPostBack option.

Preventing a postback is important to me because if I were to change a button from an "enabled" to a "disabled" image, pressing any other button on the bar refreshes the bar back to its original default images - as the postback reloads the entire page.

I'd like to minimize the work required to preserve the current status of the buttons, and eliminate unnecessary postbacks whenever possible.

Any thoughts?


Question by:gbmcneil
    LVL 22

    Expert Comment

    Programmatically you can do so by:
    instance.Attributes.Add("onclick", "return false;")

    The key is that the onclick returns false. So it needs to render like:
    <input type="image" onclick="yourclientfunctions();return false;" />

    LVL 3

    Expert Comment

    <a href="#" onclick="javascript"><img src="url" alt="Tooltip Text" /></a>

    Author Comment

    I guess my question is: "Is it possible to use an asp control like asp:ImageButton and execute a function on the client-side without triggering a postback?"

    You are telling me to use <input type="image"  blah blah blah...  because it gives me access to local, client-side code with the onclick attribute. This is an improvement because I must admit that I mistakenly assumed that the standard image control (the <img tag) was being referred to in the original postback question.

    But, I've still got to build my own tooltips. I can do it. No big deal. But, can I simply cancel the postback? Then I can have my tooltips (or whatever functionality might be built into a particular "asp" control) without refreshing the whole page.
    LVL 22

    Accepted Solution

    What you can do to keep the functionality is by adding some additional code automatically. You can create a new component, reference it from the .aspx and use it like you normally would

    Imports System
    Imports System.Web

    Namespace YourNamespace
     Public Class ExtendedImageButton
       Inherits System.Web.UI.WebControls.ImageButton

      Protected Overrides Sub OnInit(ByVal e as System.EventArgs)
        Attributes.Add("onclick", "return false;")
      End Sub
     End Class

    Save the page in the root of your website with the filename ExtendedImageButton.vb, and compile with
    vbc /t:library /out:bin\yournamespace.dll /r:system.dll /r:system.web.dll extendedimagebutton.vb

    Now add a register statement to the top of the page AFTER the @ Page directive:
    <%@ Register TagPrefix="yourcontrols" Namespace="YourNamespace" Assembly="YourNamespace" %>

    Now whenever you need to have access to your ImageButton you use the ExtendedImageButton  instead. Add it to your page with:
    <yourcontrols:ExtendedImageButton id="yourid" ... allyourotherproperties ... runat="server" />

    Use the object the way you would normally.


    (code not tested, I assume it will work though)

    Author Comment

    Gosh. I would never have figured this one out without your help.

    Thanks very much. Give me a little time to try this out.

    Expert Comment

    Or, if you dont want to have 2 separate controls, just add "return false" in the OnClientClick property of the control, or to the end of that property ";return false" if you already have something in it.

    Featured Post

    What Is Threat Intelligence?

    Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

    Join & Write a Comment

    I have developed many web applications with asp & and to add and use a dropdownlist was always a very simple task, but with the new, setting the value is a bit tricky and its not similar to the old traditional method. So in this a…
    Introduction This article shows how to use the open source plupload control to upload multiple images. The images are resized on the client side before uploading and the upload is done in chunks. Background I had to provide a way for user…
    It is a freely distributed piece of software for such tasks as photo retouching, image composition and image authoring. It works on many operating systems, in many languages.
    Here's a very brief overview of the methods PRTG Network Monitor ( offers for monitoring bandwidth, to help you decide which methods you´d like to investigate in more detail.  The methods are covered in more detail in o…

    734 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    19 Experts available now in Live!

    Get 1:1 Help Now