asp.net2.0:扩展ImageButton控件定制自己需要的功能

原创 2007年10月09日 12:20:00
  虽然现在网上可以找到n多第三方控件,可我总是看那些单独的dll不爽,在微软提供的标准控件无法满足实际需求时,大多采取扩展标准控件定制个性功能的方法解决,本文描述了给ImageButton控件增加鼠标悬浮变换图像功能的实现步骤。——cncxz(虫虫) 2006-3-22

  安装上vs.net2005之后,就发现asp.net2.0中的主题和外观功能用起来比较方便,例如ImageButton控件,只要在不同主题下的外观文件(*.Skin)中设置好相应的imageurl属性,在更换主题时做好SkinID关联的ImageButton控件就会指向不同的图片了。后来看到QuickStart中“运行”、“查看源代码”两个按钮效果后,就想,加上一个鼠标悬浮变换图像的功能是不是更好一点?

  首先查看了一下QuickStart中的实现代码,发现它是直接在Html中作的构造:

<target="<%=_target%>" href="<%=RunSample%>">
      
<img alt="Run Sample" border="0" src="<%=HttpRuntime.AppDomainAppVirtualPath%>/images/button_run.gif"
          onmouseout
="this.src='<%=HttpRuntime.AppDomainAppVirtualPath%>/images/button_run.gif'" 
          onmouseover
="this.src='<%=HttpRuntime.AppDomainAppVirtualPath%>/images/button_run-over.gif'" 
          onmousedown
="this.src='<%=HttpRuntime.AppDomainAppVirtualPath%>/images/button_run-down.gif'" 
          onmouseup
="this.src='<%=HttpRuntime.AppDomainAppVirtualPath%>/images/button_run.gif'" /></a>

  于是使用Reflector反编译System.Web.dll,找到ImageButton的源码,原来ImageButton就是一个实现了IPostBackDataHandler、IPostBackEventHandler、IButtonControl三个接口的Image,打开Image的源码,看到了如下的ImageUrl属性定义代码:

[WebCategory("Appearance"), Editor("System.Web.UI.Design.ImageUrlEditor, System.Design, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a"typeof(UITypeEditor)), DefaultValue(""), UrlProperty, Bindable(true), WebSysDescription("Image_ImageUrl")]
        
public virtual string ImageUrl
        
{
            
get
            
{
                
string text1 = (stringthis.ViewState["ImageUrl"];
                
if (text1 != null)
                
{
                    
return text1;
                }

                
return string.Empty;
            }

            
set
            
{
                
this.ViewState["ImageUrl"= value;
            }

        }

  照葫芦画瓢,很简单地就给出了扩展属性ImageOverUrl的代码,此属性用以提供鼠标悬浮时显示的图片。

public virtual string ImageOverUrl
        
{
            
get
            
{
                
string text1 = (string)this.ViewState["ImageOverUrl"];
                
if (text1 != null)
                
{
                    
return text1;
                }

                
return string.Empty;
            }

            
set
            
{
                
this.ViewState["ImageOverUrl"= value;
            }

        }

  下一步就是给Image添加onmouseover和onmouseout客户端事件了。由于ImageButton是按钮,所以在鼠标点击时必然要触发按钮事件,而同时它又是图片,所以应该是在图片的onclick触发按钮事件,因而我们应该可以参照其对onclick的处理方式撰写我们的onmouseover和onmouseout代码。再回到ImageButton的源码中来,发现它是通过重写AddAttributesToRender方法完成onclick功能设计的,代码如下:


        
protected override void AddAttributesToRender(HtmlTextWriter writer)
        
{
            Page page1 
= this.Page;
            
if (page1 != null)
            
{
                page1.VerifyRenderingInServerForm(
this);
            }

            writer.AddAttribute(HtmlTextWriterAttribute.Type, 
"image");
            
string text1 = this.UniqueID;
            PostBackOptions options1 
= this.GetPostBackOptions();
            
if ((text1 != null&& ((options1 == null|| (options1.TargetControl == this)))
            
{
                writer.AddAttribute(HtmlTextWriterAttribute.Name, text1);
            }

            
bool flag1 = base.IsEnabled;
            
string text2 = string.Empty;
            
if (flag1)
            
{
                text2 
= Util.EnsureEndWithSemiColon(this.OnClientClick);
                
if (base.HasAttributes)
                
{
                    
string text3 = base.Attributes["onclick"];
                    
if (text3 != null)
                    
{
                        text2 
= text2 + Util.EnsureEndWithSemiColon(text3);
                        
base.Attributes.Remove("onclick");
                    }

                }

            }

            
if (this.Enabled && !flag1)
            
{
                writer.AddAttribute(HtmlTextWriterAttribute.Disabled, 
"disabled");
            }

            
base.AddAttributesToRender(writer);
            
if ((page1 != null&& (options1 != null))
            
{
                page1.ClientScript.RegisterForEventValidation(options1);
                
if (flag1)
                
{
                    
string text4 = page1.ClientScript.GetPostBackEventReference(options1, false);
                    
if (!string.IsNullOrEmpty(text4))
                    
{
                        text2 
= Util.MergeScript(text2, text4);
                    }

                }

            }

            
if (text2.Length > 0)
            
{
                writer.AddAttribute(HtmlTextWriterAttribute.Onclick, text2);
                
if (base.EnableLegacyRendering)
                
{
                    writer.AddAttribute(
"language""javascript"false);
                }

            }

        }

  于是,onmouseover和onmouseout的设计代码也就出来了:


        
protected override void AddAttributesToRender(HtmlTextWriter writer)
        
{
            
bool flag1 = base.IsEnabled;
            
if (!string.IsNullOrEmpty(this.ImageOverUrl) && flag1)
            
{
                
string Textover = "this.src='" + base.ResolveClientUrl(this.ImageOverUrl) + "';";
                
string Textout = "this.src='" + base.ResolveClientUrl(this.ImageUrl) + "';";
                
if (base.HasAttributes)
                
{
                    
string temp;
                    temp 
= base.Attributes["onmouseover"];
                    
if (temp != null)
                    
{
                        Textover 
= Textover + temp;
                        
base.Attributes.Remove("onmouseover");
                    }

                    temp 
= base.Attributes["onmouseout"];
                    
if (temp != null)
                    
{
                        Textout 
= Textout + temp;
                        
base.Attributes.Remove("onmouseout");
                    }

                }


                
base.Attributes.Add("onmouseover", Textover);
                
base.Attributes.Add("onmouseout", Textout);
            }


            
base.AddAttributesToRender(writer);

        }

相关源码工程下载:http://www.cnblogs.com/Files/cncxz/selfImageButton.rar

 

零基础学软件之ASP.NET第三季 ASP.NET控件的使用

-
  • 1970年01月01日 08:00

<em>Asp.net</em> <em>ImageButton</em>控件防重复提交<em>重写</em>控件

当初设计这个控件的目的是这样的,我们在平常的网页设计中,很多时候使用了带图片的按钮,但是在<em>ASP.NET</em>中,普通按钮(Button)和图片按钮(<em>ImageButton</em>)都是没有防重复...
  • 2018年04月09日 00:00

Android 自定义的ImageButton状态修改 (Drawable)

转自:http://blog.sina.com.cn/s/blog_5f8817250100m86s.html前一段时间,我写一个自定义的ImageButton,其类名MyImageButton。它主...
  • kufeiyun
  • kufeiyun
  • 2011-02-09 09:27:00
  • 5685

c#自定义控件——ImageButton---饼形图的按钮

来自:http://blog.csdn.net/agoodchild/article/details/6698394   c#自定义控件——ImageButton  这段...
  • gaofang2009
  • gaofang2009
  • 2013-01-27 14:39:21
  • 3033

Android 自定义标签 Imagebutton实现ImageButton里放置文字

1 .android的ImageButton标签是没有text属性的,那么我们要在一个ImageButton里放置文字怎么办呢? 先上效果图如下: 如果我们不设置背景效果如下:...
  • encienqi
  • encienqi
  • 2012-08-16 15:50:07
  • 972

自定义控件的例子

android自定义控件<em>ImageButton</em> 立即下载 上传者: SWBSkyrim 时间: 2014-12-23...<em>asp.net</em>自定义控件代码例子 立即下载 上传者: gblijun2014 时间: 2014-05-06...
  • 2018年04月08日 00:00

asp.net必须懂

1.面向对象的思想主要包括什么?继承多态封装●封装:用抽象的数据类型将数据和基于数据的操作封装在一起,数据被保护在抽象数据类型内部。●继承:子类拥有父类的所有数据和操作。●多态:一个程序中同名的不同方...
  • garethzhen
  • garethzhen
  • 2008-01-19 12:53:00
  • 296

ImageButton控件的使用[WEB学习示例]

 前台绑定:                                                                    ImageUrl="~/images/ICONS/N...
  • xianfajushi
  • xianfajushi
  • 2009-11-05 21:40:00
  • 1312

imagebutton添加.9图片文件

android中的imagebutton添加.9图片,总是不能完整的覆盖imagebutton全部。 在查询后得知可以通过设置android:scaleType="centerCrop"和andro...
  • rbyyy924805
  • rbyyy924805
  • 2014-04-03 22:59:29
  • 1044

asp.net自定义按钮分组

.aspx代码如下:
  • yayun0516
  • yayun0516
  • 2014-11-14 10:52:30
  • 1003
收藏助手
不良信息举报
您举报文章:asp.net2.0:扩展ImageButton控件定制自己需要的功能
举报原因:
原因补充:

(最多只允许输入30个字)