在 ASP.NET 中实现 WinForms TrackBar 控件

• 下载源代码文件 - 18.7 Kb

引言

本文介绍了一种在 ASP.NET 2.0 中实现 Windows Forms TrackBar（滑块）控件的简单方法。为了部署使用本文所述方法的 Web 应用程序，最终用户必须使用 Internet Explorer 并已本地安装 Microsoft .NET Framework 2.0。如果您需要在其他浏览器类型或缺少当前框架的计算机上部署滑块类型控件，您可能需要考虑其他方法。

除了仅仅演示在 ASP.NET 应用程序中部署 TrackBar 控件的可行性外，本文所述的方法也适用于任何 Windows Forms 控件。与本示例应用程序一样，将任何此类控件部署到 ASP.NET 2.0 Web 应用程序都将具有相同的要求，即最终用户必须使用 Internet Explorer 并安装 2.0 框架。

入门

要开始，请解压缩下载的文件并打开提供的项目。在 zip 文件中，您会发现解决方案中包含两个项目。一个项目是用户控件项目，另一个是演示用的 ASP.NET 2.0 Web 应用程序。在处理演示解决方案之前，您需要使用 IIS 设置一个指向解决方案 Web 部分的虚拟目录。

用户控件项目：用户控件项目名为“TrackBarControl”。在此项目中，有一个名为“Slider.vb”的用户控件。这是一个标准的用户控件项目，但已在默认引用列表中添加了对“System.Windows.Forms”的引用。虽然您可能无法直接将“System.Windows.Forms”引用到 ASP.NET 项目中，但您可以将该引用添加到用户控件项目中，将其编译成 DLL，然后将该 DLL 添加到 ASP.NET 项目中。该 DLL 将被添加到 Web 应用程序的 bin 文件夹；重要的是，您需要将该 DLL 的副本直接拖到 Web 站点的根目录下，以便将该控件暴露给默认页面。这就是将 Windows Forms 控件暴露给 ASP.NET 所需的全部内容。

此示例中用户控件的代码隐藏并不复杂；打开“Slider.vb”文件并查看设计器。您会看到设计器包含两个控件，第一个是 Windows Forms TrackBar 控件，另一个是 Label，我们将用它来显示 TrackBar 控件的当前值。

在用户控件代码的开头，您会注意到以下内容

Imports System.Windows.Forms.TrackBar

Public Class Slider
    Inherits System.Windows.Forms.UserControl

首先，用户控件从 Forms 导入 TrackBar 控件，类本身继承自“System.Windows.Forms.UserControl”。在类声明之后，您将看到以下代码放置在默认构造函数中

Public Sub New()
    MyBase.New()

    ' This call is required by the Windows Form Designer.

    InitializeComponent()

    ' Initialize the track bar

    ' I have set the bar to be from 0 to 100 here, you can expose 

    ' properties to permit the user to set this values at design time, 

    ' for an example, see the TrackBarValue property in this code page.

    ' You can do this with the

    ' tick marks and whatever else you might want to expose. You can 

    ' also divide or multiply the value to convert it to some other value 

    ' if you want to use it as is.

    Me.TrackBar1.Minimum = 0
    Me.TrackBar1.Maximum = 100
    Me.TrackBar1.Value = 0

End Sub

如您所见，构造函数除了调用 MyBase.New()、初始化组件以及设置 TrackBar 控件的几个默认值外，并没有做太多其他事情。在这里设置了 TrackBar 控件的最小值、最大值和初始值。控件初始化后，我们将有一个范围从 0 到 100，初始值为 0 的 TrackBar。

在构造函数之后，下一部分代码处理 TrackBar 控件的滚动功能

Public Sub TrackBar1_Scroll(ByVal sender As System.Object, _
       ByVal e As System.EventArgs) Handles TrackBar1.Scroll

    ' Whenever the user scrolls the TrackBar, 

    ' this label will update to show the value

    Me.lblCurrentValue.Text = TrackBar1.Value.ToString()

End Sub

此处理程序配置为在通过滚动更新 TrackBar 值时，更新用于显示 TrackBar 控件当前值的 Label。

在滚动函数处理程序之后是以下代码

Private Sub TrackBar1_ValueChanged(ByVal sender As Object, _
        ByVal e As System.EventArgs) Handles TrackBar1.ValueChanged

    ' This is not redundant, if you set the trackbar to some initial 

    ' value in use, call this will synch the label and the trackbar

    Me.lblCurrentValue.Text = TrackBar1.Value.ToString()

End Sub

当 TrackBar 控件的值在未滚动控件的情况下发生更改时，此子例程会将 Label 的当前值更新为与 TrackBar 控件的值匹配。

Slider.vb 类中最后一段代码是一个公共属性，用于将 TrackBar 值暴露给可能使用 Slider.vb 类的应用程序。

Public Property TrackBarValue() As String
    Get
        Return TrackBar1.Value.ToString()
    End Get
    Set(ByVal value As String)
        TrackBar1.Value = value
    End Set
End Property

至此，我们就完成了支持此控件在 ASP.NET 2.0 项目中使用所需的全部代码。完成编码后，应编译项目以生成 DLL，然后将其用于 Web 应用程序。

Web 应用程序：该 Web 应用程序是一个简单的项目，用于演示使用从 Slider.vb 类构建的用户控件。将 DLL 添加到项目后，将 Bin 文件夹中的 DLL 复制到 Web 应用程序的根文件夹中。此项目中有一个默认的 ASPX 页面，该页面包含一个单独的代码隐藏文件。首先，请查看代码隐藏页面。

代码隐藏页面非常简单，只包含一个页面加载事件处理程序；页面加载子例程包含一个浏览器检查，并演示了从代码隐藏页面捕获 TrackBar 控件的值是可能的。

Protected Sub Page_Load(ByVal sender As Object, _
          ByVal e As System.EventArgs) Handles Me.Load

    ' Recover value from a hidden input field and make it available

    ' to the code behind page - serves no purpose, just demonstrates

    ' ability to capture the value and use it in the code behind page

    Dim strInputVal As String = Request("TBInputValue")

    If strInputVal = Nothing Then
        'stop it from being nothing on initial load

        strInputVal = 0
    End If

    ' update the hidden input field – 

    ' critical to retaining trackbar value between loads

    TBInputValue.Value = strInputVal

    ' write out the previous/current value on page load

    Response.Write("Trackbar Value = " & strInputVal)

在上述第一个代码段中，处理程序从一个隐藏输入字段获取 TrackBar 控件的最后设置值，该字段已同步以包含 TrackBar 控件的当前值。然后评估恢复的值，如果为空，则将其设置为 0。更新隐藏输入字段以匹配恢复的值，并通过 Response.Write 调用将 TrackBar 控件的当前值发送到浏览器进行显示。

在此块之后，将评估浏览器类型和 CLR 版本号，以验证客户端浏览器是否支持该控件的显示。以上是对 Default.aspx 代码隐藏页面的全部内容的描述。

最后要检查的区域是 default.aspx 页面的标记。该标记包含少量 JavaScript 以及显示和与滑块交互所需的标准标记。我将不深入讨论标准标记，但会讨论与 TrackBar 控件的创建和显示相关的区域。

值得讨论的第一个项目是 TrackBar 控件的创建。这通过一个 object 标签来处理；它看起来是这样的

<object id="TrackBarControl1" height="63" width="192" 
  classid="http:TrackBarControl.dll#TrackBarControl.Slider" 
  onmousemove="document.forms[0].TBInputValue.value=
  document.forms[0].TrackBarControl1.TrackBarValue;" >    
</object>

在 object 标签内，有几点值得一提。第一点是 class ID 的声明；虽然这通常包含控件的唯一 ID，但在这种情况下，class ID 用于指向直接位于项目中的 TrackBar 控件，而不是位于计算机文件系统中的 DLL。请注意上面代码片段中 class ID 声明的处理方式。您可能会注意到 class ID 包含“HTTP”，后跟 DLL 的名称。DLL 名称后跟一个井号 (#)，用于分隔 ID 的两个部分。井号之后是用户控件的完全限定名称。在 class ID 之后添加了“onmousemove”属性，其值用于通过 Slider.vb 用户控件类中建立的 TrackBarValue 属性，告知系统更新隐藏输入字段以匹配滑块的值。

下一个有趣的项是为窗体的提交按钮设置的 onClientClick 函数。当用户单击提交按钮时，会生成一个 JavaScript 警报框，用于显示当前的 TrackBar 值。这除了演示可以通过 JavaScript 调用获取 TrackBar 的当前值外，没有其他任何实际用途。

在标记中最后值得一提的代码是这段小脚本

<script>
    // This section of code will persist the trackbar's value, 

    // you can also set a default

    // value in here by replacing the do nothing section with 

    // some value in the next line

    if (document.forms[0].TBInputValue.value == null ||
        document.forms[0].TBInputValue.value == 0)
    {
        //do nothing or uncomment below to set default value

        //document.forms[0].TrackBarControl1.TrackBarValue=50;

    }
    else
    {     
        document.forms[0].TrackBarControl1.TrackBarValue=
        document.forms[0].TBInputValue.value;
    }
</script>

此脚本的目的是在提交之间维护控件的状态；没有这段代码，每次表单加载时，TrackBar 控件都会重置为零；有了这段代码，当表单重新加载时，TrackBar 控件将恢复到其最后一个值。您还可以启用注释掉的代码来设置 TrackBar 控件的默认值，这在初始加载时可能很有用，如果您想将控件设置为某个特定值。

摘要

此方法仅在您仅针对 Internet Explorer 用户时才有用；如果您需要支持其他浏览器，则需要使用纯 JavaScript 控件，而不是采用此方法。提供的示例非常简单，仅用于描述此方法的工作原理，并演示了在 ASP.NET 应用程序中部署 Windows Forms 控件的可行性。演示项目也构建用于演示如何从客户端 JavaScript 或在 VB 代码隐藏页中访问当前的 TrackBar 控件值。