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:

http://www.experts-exchange.com/Programming/Programming_Languages/Dot_Net/ASP_DOT_NET/Q_21125076.html?query=postback+ImageButton&topics=865

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?



 


gbmcneilAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

CJ_SCommented:
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;" />



0
nitrogenxCommented:
<a href="#" onclick="javascript"><img src="url" alt="Tooltip Text" /></a>
0
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.
0
Cloud Class® Course: Amazon Web Services - Basic

Are you thinking about creating an Amazon Web Services account for your business? Not sure where to start? In this course you’ll get an overview of the history of AWS and take a tour of their user interface.

CJ_SCommented:
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)
    MyBase.OnInit(e)
    EnsureChildControls()
    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.

CJ.

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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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.
0
Justice777Commented:
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.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ASP.NET

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.