[Last Call] Learn how to a build a cloud-first strategyRegister Now

  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2777
  • Last Modified:

Cancel Postback Using ImageButton: The Sequel

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?


1 Solution
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;" />

<a href="#" onclick="javascript"><img src="url" alt="Tooltip Text" /></a>
gbmcneilAuthor Commented:
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.
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

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)
gbmcneilAuthor Commented:
Gosh. I would never have figured this one out without your help.

Thanks very much. Give me a little time to try this out.
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

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now