Hey there,
I don't know if you've noticed, but style sheets tend to handle an <input type=image/> a lot differently than an <img/> tag. And that becomes a problem in .NET if you've built a webform that depends on a link to be an image.
The LinkButton control doesn't support an ImageUrl. It renders like you'd expect, with an <a/> tag surrounding some text, and the Href on that <a/> tag pointed at a __doPostBack function of some type. But there's no way to tell it to use an image as the text, without setting the text manually through the designer or maybe with some code.
On the other hand, the ImageButton control only supports images. It renders differently as well, using an <input type=image/> tag as opposed to an <a/> tag. If you've styled expecting that <input/> to be an <a/>, you could be in for some time-wasting CSS fun.
In addition, you can't just easily switch between the two on the page if you want to go from an ImageButton to a LinkButton, because the attributes aren't consistent regarding the use of images.
My solution to this was to create my own extended LinKButton that supports an ImageUrl. Here's how I did it.
First, I added an ImageUrl property to my derived LinkButton:
public class MyImageButton : LinkButton
{
private string _imageUrl;
[Editor("System.Web.UI.Design.ImageUrlEditor, System.Design, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a", typeof(UITypeEditor))]
[DefaultValue("")]
[UrlProperty]
[Bindable(true)]
public string ImageUrl
{
get { return _imageUrl; }
set { _imageUrl = value; }
}
}
Notice a couple of things: I set the editor and the designer attributes such that my ImageUrl will behave in the Studio the same way that the ImageUrl on an ImageButton would work. This helps to make switching back and forth easier (although with this in place I'd never use an ImageButton again; for me there's simply no need).
Once I have that, I am going to override OnPreRender:
public class MyImageButton : LinkButton
{
private string _imageUrl;
[Editor("System.Web.UI.Design.ImageUrlEditor, System.Design, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a", typeof(UITypeEditor))]
[DefaultValue("")]
[UrlProperty]
[Bindable(true)]
public string ImageUrl
{
get { return _imageUrl; }
set { _imageUrl = value; }
}
protected override void OnPreRender(EventArgs e)
{
if (!string.IsNullOrEmpty(this.ImageUrl))
{
if (this.ImageUrl.Trim().Length > 0)
{
string cssClass = string.Empty;
if (!string.IsNullOrEmpty(CssClass))
{
cssClass = " class=\"" + CssClass + "\""
}
this.Text = "<img src=\"" + this.ImageUrl + "\" " + cssClass + "/>"
this.ImageUrl = string.Empty;
}
}
base.OnPreRender(e);
}
In this step, if I have an ImageUrl, I am using code to set the Text property of my LinkButton, and then erasing the ImageUrl so that it will render with an <img/> tag in the text of the <a/>. I'm also taking care to apply the CssClass appropriately to the <img/> tag so that styles will work as expected, the way they would on an ImageButton (assuming the ImageButton was able to output an <img/> instead of an <input/>). With a little more care I could even bring over things like AlternateText if I chose.
With this in place, now I can style consistently between my Text-based and my Image-based buttons without having to worry about inconsistencies in the rendering of the control.
Have fun,
Rob
