带有鼠标悬停效果和客户端操作的自定义图像按钮控件

• 下载演示项目 - 15.7 Kb
• 下载源代码 - 14.8 Kb

引言

本文介绍了一种简单的方法来构建一个自定义的 ASP.NET 2.0 图像按钮控件，该控件既包含鼠标悬停效果，又能在单击时调用 JavaScript 函数。虽然本文很简单，代码也相当琐碎，但通过这个例子所阐述的概念相对重要，并且是将在 ASP.NET 2.0 项目中集成客户端功能的关键。

本文中需要注意的两个重要事项是：

1. 您可以向自定义控件添加属性，以及
2. 您可以从自定义控件嵌入并调用 JavaScript 函数。

此控件的一种可能用途是将其中的几个放入 `Panel` 中，并将 `Panel` 和集合用作工具栏。当然，该控件也可以作为独立控件正常工作。

入门

要开始，请打开 Visual Studio 2005 IDE 并启动一个新项目。从“新建项目”对话框（图 1）中，在“项目类型”下，从“Visual Basic”下方选择“Windows”节点，然后在右侧窗格中选择“Web 控件库”模板。键入项目名称，然后单击“确定”。

项目打开后；右键单击解决方案，然后单击“添加”菜单选项，然后选择“新项”。当“添加新项”对话框出现时（图 2），选择“Web 自定义控件”模板。选择模板后，在名称字段中键入“MOEbutton.vb”，然后单击“添加”关闭对话框。您现在可以删除最初从模板初始化项目时创建的默认 Web 控件。

此时，我们应该有一个打开的 Web 控件库项目，其中包含一个名为“MOEbutton.vb”的 Web 控件。在编写此项目的代码之前，最后一步是添加一个所需的引用。要添加此引用，请双击解决方案资源管理器中的“我的项目”图标以打开“我的项目”。在此处，选择“引用”选项卡，然后单击“添加”按钮。当“添加引用”对话框打开时，选择 .NET 选项卡，然后向下搜索列表，直到找到“System.Design”引用。选择此库，然后单击“确定”按钮。

图 1：Visual Studio 2005 新建项目对话框

图 2：添加新项对话框

返回到“MOEbutton.vb”文件，并在文件顶部添加下面突出显示的 Imports 语句。

Imports System
Imports System.ComponentModel
Imports System.Web
Imports System.Web.UI
Imports System.Web.UI.WebControls
Imports System.Web.UI.Design

<DefaultProperty("Text"), _
 ToolboxData("<{0}:MOEbutton runat=server></{0}:MOEbutton>")>_
Public Class MOEbutton
    Inherits WebControl

我们现在可以添加使此控件功能所需的代码。首先，我们需要创建几个私有成员变量；这些变量将用于包含用于显示控件上的普通和鼠标悬停效果的图像文件的路径，用于包含带有将应用于按钮的 `OnClick` 事件的 JavaScript 的字符串，以及用于声明将用作此自定义基础的 HTML 输入图像控件（请注意，`HtmlInputImage` 按钮是带事件声明的）。要完成这些步骤，请创建一个“声明”区域，并键入以下变量声明。

#Region "Declarations"

    'create private member variables used by this control

    Private mMouseOverImage As String
    Private mMouseOutImage As String
    Private mJavaScriptCall As String

    Private WithEvents imgButton As HtmlControls.HtmlInputImage

#End Region

接下来要做的是设置一些简单的初始化设置；我们可以在公共的 Sub New 声明和 `MOEbutton` 的 `Load` 事件中完成此操作（添加一个“方法”区域并键入以下内容）。

#Region "Methods"

    Public Sub New()
        'initialize new controls with a default height and width
        Me.Width = 24
        Me.Height = 24

    End Sub


    Private Sub MOEbutton_Load(ByVal sender As Object, _
            ByVal e As System.EventArgs) Handles Me.Load
        EnsureChildControls()
    End Sub

#End Region

声明变量后，我们需要提供公共属性以向控件用户公开控件的属性；为了完成这些步骤，创建一个“属性”区域并键入以下代码。

#Region "Properties"

    ' create public properties for member variables

    <Category("Button Images")>_
    <Browsable(True)>_
    <Description("Set path to mouseover image file.")>_
    <Editor(GetType(System.Web.UI.Design.UrlEditor),
    GetType(System.Drawing.Design.UITypeEditor))>_
    Public Property MouseOverImage() As String
        Get
            Return mMouseOverImage
        End Get
        Set(ByVal value As String)
            mMouseOverImage = value
        End Set
    End Property


    <Category("Button Images")>_
    <Browsable(True)>_
    <Description("Set path to mouseout image file.")>_
    <Editor(GetType(System.Web.UI.Design.UrlEditor),
    GetType(System.Drawing.Design.UITypeEditor))>_
    Public Property MouseOutImage() As String
        Get
            Return mMouseOutImage
        End Get
        Set(ByVal value As String)
            mMouseOutImage = value
        End Set
    End Property


    <Category("JavaScript")>_
    <Browsable(True)>_
    <Description("Set javascript string for onclick event.")>_
    Public Property JavaScriptCall() As String
        Get
            Return mJavaScriptCall
        End Get
        Set(ByVal value As String)
            mJavaScriptCall = value
        End Set
    End Property

#End Region

请注意，在每个文件路径相关属性声明上方的属性部分中，代码指定了一个编辑器，并且该编辑器被定义为 URL 编辑器。将此属性添加到控件中，可以指定 IDE 如何编辑该属性；在此示例中，当控件用户设置控件的图像文件路径属性时，属性网格将在文本框的右侧显示一个带省略号的按钮。如果用户单击该按钮，IDE 将打开 URL 编辑器，并允许用户使用该编辑器导航到图像文件并通过该编辑器的对话框设置图像文件路径属性。

以这种方式设置的属性将保留在控件用户项目中。请注意，URL 编辑器将在选定路径前添加一个波浪号和一个斜杠，这两者在此上下文中都无用。您可能希望解析从 URL 编辑器返回的字符串（在每个图像文件路径属性的 Set 区域中）以在存储选择之前删除前两个字符）。此路径将传递给“OnMouseOver”和“OnMouseOut”调用，如果存在波浪号，则无法找到文件。

<Editor(GetType(System.Web.UI.Design.UrlEditor), _ 
  GetType(System.Drawing.Design.UITypeEditor))>_

此时，唯一剩下的就是定义控件的呈现方式。要完成此步骤，请创建一个“渲染”区域，并在此区域内，使用以下代码覆盖 `CreateChildControls()` 方法。

#Region "Rendering"

    Protected Overrides Sub CreateChildControls()

        imgButton = New HtmlControls.HtmlInputImage()
        imgButton.Src = MouseOutImage.ToString()
        imgButton.Attributes.Add("onmouseover", "this.src='" & _
                  MouseOverImage.ToString() & "';")
        imgButton.Attributes.Add("onmouseout", "this.src='" & _
                  MouseOutImage.ToString() & "';")
        imgButton.Attributes.Add("onclick", JavaScriptCall.ToString())
        Controls.Add(imgButton)

    End Sub

#End Region

在这段代码中，有几点值得注意；首先，您会注意到创建了一个 `HtmlInputImage` 控件的新实例。创建此对象后，其 `src` 属性被设置为指向为 `MouseOutImage` 属性存储的路径。接下来，将 `OnMouseOver` 和 `OnMouseOut` 属性添加到 `imgButton` 控件，并将其图像源文件设置为在 `OnMouseOver` 或 `OnMouseOut` 事件触发时更新。接下来，将“`OnClick`”属性添加到控件，并将 `JavaScriptCall` 属性中包含的 JavaScript 字符串分配给“`OnClick`”事件。虽然此示例是基本的，并且仅使用包含简单 JavaScript 调用的字符串，但该函数也可以命名外部注册 JavaScript 文件中包含的 JavaScript 函数，或者可以包含在此类中定义并随后注册以供以后使用的复杂函数。

控件现在已完成。在测试控件之前，请重新生成项目。完成后，如果遇到任何错误并已修复，就可以测试控件了。要测试控件，请向当前打开的 Web 控件库项目添加一个新的网站项目。创建测试网站后，右键单击解决方案资源管理器中的网站解决方案并选择“设置为启动项目”菜单选项，将测试项目设置为启动项目。接下来，找到网站解决方案中的 Default.aspx 页面，右键单击此页面，然后选择“设置为起始页”菜单选项。

如果您下载了项目，您可以配置一个指向示例网站的虚拟目录，并查看它，而不是从头开始创建。示例项目包含两个子项目，一个带有单个自定义 Web 控件（`MOEbutton`）的 Web 类库，以及一个带有支持演示所需附加文件的示例网站。

如果您配置示例项目并启动默认页面，您将看到一堆 `MOEbutton` 控件，它们以类似于工具栏的方式排列在页面顶部。这些控件都具有鼠标悬停效果，包括一个普通图标的替代版本，以及一些 JavaScript 调用，有些用于弹出警报，有些用于打开新窗口。

除了为 `MOEbutton` 类创建的属性之外，由于该类继承自 `WebControl` 类，该类的所有属性和方法也无需额外费用即可包含在内。因此，无需额外的工作即可允许控件用户设置背景颜色或边框特性，或定义工具提示，而无需编写任何额外代码。

网站启动并运行后，您应该会在浏览器窗口中看到以下显示：

图 3：Internet Explorer 中的 MOE 按钮示例