Introduction
I built this control to make my life easier. It seamed like I was always creating roll-over images and buttons with confirm pop-up. I finally got sick of dealing with all the JavaScript snippets. This control is a solution to all my problems. (and hopefully yours;).)
Special note: Thanks to the following two articles on CodeProject. They helped me a lot. (plus I sampled parts of my JavaScript from them.)
Using the code
The following is an example of the code needed to use the control. First reference the CustomControls.dll, then add it to your Toolbox. Next drag a new instance of the ExtendedImageButton control onto the page and then set the properties/events you might need.
protected CustomControls.ExtendedImageButton eibPostBack;
private void Page_Load(object sender, System.EventArgs e) {
this.eibPostBack.ButtonClick +=
new System.EventHandler(this.eibPostBack_ButtonClick);
}
private void eibPostBack_ButtonClick(object sender, System.EventArgs e){
Response.Write("Button Was Clicked");
}
ExtendedImageButtonControl
This is the main code of the control. The Render method is overridden. The code creates an [<A>] tag that is wrapped around an [<img>]tag. The JavaScript necessary for this is added in another method that we'll review in a minute:
protected override void Render(HtmlTextWriter output) {
if (this.Enabled){
output.WriteBeginTag("A");
if (_redirectURL != String.Empty)
output.WriteAttribute("href", _redirectURL);
else
output.WriteAttribute("href", "javascript:" +
this.Page.GetPostBackEventReference(this, "ButtonClick"));
if (_confirmClick)
output.WriteAttribute("onclick",
"javascript:return __doConfirm(this);");
output.Write(">");
}
output.WriteBeginTag("img");
if ((!this.Enabled) && (_imageDisabled != String.Empty)){
output.WriteAttribute("src", _imageDisabled);
}else{
output.WriteAttribute("src", _imageNormal);
}
output.WriteAttribute("name", this.UniqueID);
if (! this.BorderWidth.IsEmpty)
output.WriteAttribute("border", this.BorderWidth.ToString());
else
output.WriteAttribute("border", "0");
if (! this.BorderColor.IsEmpty)
output.WriteAttribute("bordercolor",
this.BorderColor.ToArgb().ToString());
if (this.Style.Count > 0) {
IEnumerator keys = this.Style.Keys.GetEnumerator();
string sStyles="";
while (keys.MoveNext()) {
sStyles += (string)keys.Current + ":" +
this.Style[(string)keys.Current ].ToString() + ";";
}
output.WriteAttribute("style", sStyles);
}
if (this.CssClass != String.Empty)
output.WriteAttribute("class", this.CssClass);
if (! this.Height.IsEmpty)
output.WriteAttribute("Height", this.Height.ToString());
if (! this.Width.IsEmpty)
output.WriteAttribute("Width", this.Width.ToString());
if (this._allText != String.Empty)
output.WriteAttribute("alt", _allText);
if (this.Enabled){
if (this._imageOnMouseOver != String.Empty)
output.WriteAttribute("OnMouseOver", "javascript:newRollOver('" +
this.UniqueID + "', '" + ImageOnMouseOver + "')");
if (this._imageNormal != String.Empty)
output.WriteAttribute("OnMouseOut", "javascript:newRollOver('" +
this.UniqueID + "', '" + ImageNormal + "')");
if (this._imageOnMouseClick != String.Empty)
output.WriteAttribute("OnMouseDown", "javascript:newRollOver('" +
this.UniqueID + "', '" + ImageOnMouseClick + "')");
}
output.Write("/>");
if (this.Enabled){
output.WriteEndTag("A");
}
}
The OnInit method is overridden. This method adds the necessary JavaScript methods to the page:
protected override void OnInit(EventArgs e){
const string RegistrationNameImageSwap =
"ExtendedImageButton_JSwap";
const string RegistrationNameConfirmMessage =
"ExtendedImageButton_JConfirm";
if (!this.Page.IsClientScriptBlockRegistered(RegistrationNameImageSwap)){
const string sJSwapCode =
"<script language="'javascript'" type='text/javascript'>" +
"<!-- \n" +
"function newRollOver(targetDOMUrlName, URL) { \n" +
"//alert(targetDOMUrlName + ' ' + URL); \n " +
"var img=document.images; \n " +
"var i=0; \n " +
"for (i=0; i<img.length; i++) \n " +
"if (img[i].name == targetDOMUrlName) img[i].src = URL; \n " +
"} \n " +
"//-->\n " +
"</script>\n ";
this.Page.RegisterClientScriptBlock(RegistrationNameImageSwap,
sJSwapCode);
}
if (_confirmClick) {
if (! this.Page.IsClientScriptBlockRegistered(
RegistrationNameConfirmMessage))
{
string sJSConfirmCode =
"<script language="'javascript'" type='text/javascript'>" +
"<!-- \n" +
"function __doConfirm(btnWaiter) { \n" +
"if (confirm('" + _confirmMessage + "')) { \n" +
"document.body.style.cursor=\"wait\"; \n" +
"return true; \n" +
"} return false; } \n" +
"//--> \n" +
"</script> \n";
this.Page.RegisterClientScriptBlock(RegistrationNameConfirmMessage,
sJSConfirmCode);
}
}
}
Future plans
More robustness.
History
