增强的ASP.NET ImageButton自定义控件,带有滚动效果

分享于 

10分钟阅读

Web开发

  繁體

Sample Image - screenshot.jpg

介绍

本文介绍扩展现有 ASP.NET 控件的简单方法;在本例中,标准工具包是 ImageButton 控件,扩展以支持滚动效果。 由于标准控件已经包含对服务器端单击事件和客户端单击事件的支持,所以在添加滚动到over之前,该控件是很好的。

这种控件的一个可能用途可能是将其中几个放入 Panel 中,并将按钮的Panel 和 Collection 用作工具栏。 当然,该控件也可以作为独立控件正常工作。

入门

开始时,打开 Visual Studio 2005 IDE并启动一个新项目。 从新项目对话框( 图 1 )的项目类型下,从"visual basic"下选择"Windows"节点,然后在右窗格中选择"web控件库"模板。 键在项目的NAME 中,然后单击"行"。

打开项目后,右键单击解决方案并单击"添加"菜单选项,然后选择"新项"。 当"添加新项"对话框出现( 图 2 ) 时,选择"web自定义控件"模板。 在选择模板之后,在 NAME 字段中输入键" eib.vb",然后单击"添加"关闭对话框。 现在可以 delete 创建项目最初从模板初始化时创建的默认web控件。

这里时,我们应该拥有一个开放的web控件库项目,该项目中有一个名为" eib.vb"的。 在编写这个项目的代码之前,最后一个步骤是添加一个需要的引用。 要添加这里引用,双击解决方案资源管理器中的"我的项目"icon 以打开"我的项目";从这里选择"引用"选项卡,然后单击"添加"按钮。 当"添加引用"对话框打开时,选择. NET 选项卡,然后搜索列表,直到找到"系统。设计"引用。 选择这里库并单击"行"按钮。

图 1: Visual Studio 2005新项目对话框

图 2: 添加新项目对话框

导航回" eib.vb"文件,并在文件的顶部添加 导入 语句高亮显示了 below: ( 请注意, 可以绑定 属性已经添加并设置为 True 但是,因为我没有在这个示例中实现任何数据绑定,所以这是没有必要

Imports SystemImports System.Collections.GenericImports System.ComponentModelImports System.TextImports System.WebImports System.Web.UI.DesignImports System.Web.UIImports System.Web.UI.WebControls
<Bindable(True)> _PublicClass EIB
 Inherits System.Web.UI.WebControls.ImageButton

现在我们可以添加使这个控制功能成为功能所必需的代码。 第一件事是设置一些简单的初始化设置;我们可以在 public 子对象 声明和在EIB加载事件( 在下面添加 Methods 区域和键;注意,我们还没有定义 MouseOverImageMouseOutImage 属性,但是不久将) 中:

#Region"Methods" 
 PublicSubNew()
 Width = 24 Height = 24 MouseOverImage = "" MouseOutImage = "" PostBackUrl = ""EndSub#End Region

完成该任务后,需要提供 public 属性以向控件用户公开控件属性,以便完成这些步骤,并在以下代码中创建" Properties"区域和密钥: ( 请注意,所有属性值都保存在视图状态中,而不是在本地成员变量中)

#Region"Properties" 
 <Category("Button Images")> _
 <Browsable(True)> _
 <Bindable(True)> _
 <Description("Set path to mouseover image file.")> _
 <Editor(GetType(System.Web.UI.Design.UrlEditor), _
 GetType(System.Drawing.Design.UITypeEditor))> _
 PublicProperty MouseOverImage() AsStringGetDim s AsString = _
 Convert.ToString(ViewState("MouseOverImage"))
 If s IsNothingOr s = ""ThenReturnString.Empty
 ElseDim tilde AsInteger = -1
 tilde = s.IndexOf("~")
 If (tilde <> -1) ThenReturn s.Substring((tilde + 2)).Trim()
 ElseReturn s
 EndIfEndIfEndGetSet(ByVal value AsString)
 ViewState("MouseOverImage") = value
 EndSetEndProperty <Category("Button Images")> _
 <Browsable(True)> _
 <Bindable(True)> _
 <Description("Set path to mouseout image file.")> _
 <Editor(GetType(System.Web.UI.Design.UrlEditor), _
 GetType(System.Drawing.Design.UITypeEditor))> _
 PublicProperty MouseOutImage() AsStringGetDim s AsString = _
 Convert.ToString(ViewState("MouseOutImage"))
 If s IsNothingOr s = ""ThenReturnString.Empty
 ElseDim tilde AsInteger = -1
 tilde = s.IndexOf("~")
 If (tilde <> -1) ThenReturn s.Substring((tilde + 2)).Trim()
 ElseReturn s
 EndIfEndIfEndGetSet(ByVal value AsString)
 ViewState("MouseOutImage") = value
 EndSetEndProperty#End Region

注意,在每个属性声明的属性部分 上面 中,代码指定编辑器,而且指定的编辑器被定义为URL编辑器。 将这里属性添加到控件指定如何编辑该属性;在这里实例中,控件用户在文本框右侧显示省略号。 如果用户单击按钮,IDE将打开URL编辑器,允许用户使用该编辑器导航到图像文件,并通过该编辑器的对话框设置图像文件路径属性。

以这种方式设置的属性将保持在用户的控制项目中。 请注意,URL编辑器将使用 tilde 和斜杠对选定的路径进行前缀,这两者都不用于这里上下文。 在运行时会在运行时查找文件路径,并添加斜杠,这样就会在添加到呈现页面的代码中检查这些字符并删除这些字符,以便将这些字符添加到可用文件路径字符串中:

Dim s AsString = Convert.ToString(ViewState("MouseOutImage"))If s IsNothingOr s = ""ThenReturnString.EmptyElseDim tilde AsInteger = -1
 tilde = s.IndexOf("~")
 If (tilde <> -1) ThenReturn s.Substring((tilde + 2)).Trim()
 ElseReturn s
 EndIfEndIf

最后要做的是渲染控件。 将" Rendering"区域添加到项目中并添加以下代码:

#Region"Rendering" 
 ProtectedOverridesSub OnPreRender(ByVal e As System.EventArgs)
 Me.ImageUrl = MouseOutImage.ToString()
 Me.Attributes.Add("onmouseover", "this.src='" & _
 MouseOverImage.ToString() & "';")
 Me.Attributes.Add("onmouseout", "this.src='" & _
 MouseOutImage.ToString() & "';")
 MyBase.OnPreRender(e)
 EndSub#End Region

这个方法看起来很简单,但是如果你看一下代码,你会注意到第一个代码行,子程序的第一行代码将匹配属性的MouseOutImage 属性。 接下来,我们将添加这两个属性,这些属性是这里控件扩展的要点。 首先,添加一个" OnMouseOver"事件,并告诉它将图像文件的源更改为 MouseOverImage 属性提供的路径。 下一个属性集通过在 MouseOutImage 属性中指定的图像文件设置 OnMouseOut 事件来执行类似的事件。 最后一行 MyBase.OnPreRender(e ) 是为了确保它的余的标准 ImageButton 属性和方法被进入新控制。

控件现在已经完成。 在测试控件之前,重新生成项目。 一旦完成并且任何遇到的错误都被修复,就是测试控件的时候了。 若要测试该控件,请将新的网站项目添加到当前打开的web控件库项目中。 创建测试网站后,通过在解决方案资源管理器中右击网站解决方案并选择"设置为启动项目"菜单选项,将测试项目设置为启动项目。 接下来,在网站解决方案中找到 Default.aspx 页面,右键单击该页面,然后选择"设置为起始页"菜单选项。

如果下载项目,可以配置指向示例网站的虚拟目录并检查它而不是从头创建一个目录。 示例项目包含两个从属项目,它的中包含一个带有单个自定义web控件( EIB )的web类库。

如果配置示例项目并启动默认页,则会看到页面顶部的Collection 按钮控件的类似于工具栏。 控件每个都有一个鼠标超过的效果,它由一个正常的icon 版本组成。 某些按钮使JavaScript调用成为可能。 有些设置为 postback,而有些则只设置为执行一个JavaScript命令来响应"在客户端单击"事件。

要防止仅执行客户端脚本的控件上的回发,可以使用以下方法: 在"在客户端单击"属性中,添加你希望执行的JavaScript命令,后面是一个半冒号和术语。" return false ",以类似以下方式的方式:

图 3: 配置OnClientClick以防止回发

也就是说,一旦站点启动并运行,你应该观察浏览器窗口中显示的以下内容。

图 4: IE 中的EIB按钮示例


控制  图像  asp  asp-net  Effect  效果  
相关文章