Implement a WinForms TrackBar Control in ASP.NET

• Download source files - 18.7 Kb

Introduction

This article describes a simple approach to implementing a Windows Forms TrackBar (slider) control in ASP.NET 2.0. In order to deploy a web application that uses the approach defined herein, the end users must use Internet Explorer and must have the Microsoft .NET Framework 2.0 installed locally. If you need to deploy a slider type control on other browser types or on machines that lack the current framework, you may wish to pursue an alternative approach.

Aside from simply demonstrating that it is possible to deploy the TrackBar control in an ASP.NET application, the approach described in this article applies to any Windows Forms control. As with this example application, any deployment of such controls to an ASP.NET 2.0 web application will carry the same requirements that the end users have Internet Explorer and have the 2.0 framework.

Getting Started

In order to get started, unzip the downloaded files and open the project provided. Within the zip file, you will find two projects contained in a solution. One project is a user control project, and the other is a demonstration ASP.NET 2.0 web application. Prior to working with the demonstration solution, you will need to use IIS to set up a virtual directory pointing to the web site portion of the solution.

User Control Project: The user control project is the project entitled, “TrackBarControl”. Within this project, there is a single User Control called “Slider.vb”. This project is a standard user control project but has added in a reference to “System.Windows.Forms” to the default list of references. Whilst you may not be able to reference “System.Windows.Forms” directly into an ASP.NET project, you are able to add the reference to a user control project, compile it into a DLL, and add the DLL to the ASP.NET project. The DLL will be added to the web application’s bin folder; it is important that you drag a copy of the DLL directly into the root of the web site in order to expose the control to the default page. That is the entire sum of what you need to do in order to expose the Windows Forms control to ASP.NET.

The code behind the user control in this example is not too elaborate; open up the “Slider.vb” file and have a look at the designer. You will observe that the designer contains two controls, the first is the Windows Forms TrackBar control, and the other is a Label which we will use to display the current value of the TrackBar control.

At the start of the user control’s code, you will note the following:

Imports System.Windows.Forms.TrackBar

Public Class Slider
    Inherits System.Windows.Forms.UserControl

First off, the user control imports the TrackBar control from Forms, the class itself inherits from “System.Windows.Forms.UserControl”. After the class declaration, you will see the following code placed into the default constructor:

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

As you can see, the constructor does not do much outside of calling MyBase.New(), initializing the component, and setting a few default values on the TrackBar control. The TrackBar control’s minimum and maximum values, and initial value are set here. Upon initialization of the control, we will have a TrackBar with a range from 0 to 100 and an initial value of 0.

Following the constructor, the next section of code handles the TrackBar control’s scrolling function:

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

This handler is configured to update the Label used to display the current value of the TrackBar control whenever the TrackBar value is updated by means of scrolling.

Following the scrolling function’s handler is the following code:

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

This subroutine updates the current value of the Label to match the TrackBar control’s value whenever the TrackBar control’s value changes without scrolling the control.

The last bit of code in the Slider.vb class is a public property used to expose the TrackBar value to an application that may consume the Slider.vb class.

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

That brings us to the end of the code required to support the use of this control in an ASP.NET 2.0 project. Having completed the coding, the project should be compiled to produce a DLL that will subsequently be used in the web application.

Web Application: The web application is a simple project used to demonstrate the use of the user control built from the Slider.vb class. Once the DLLs are added to the project, copy the DLL contained in the Bin folder directly into the web application’s root folder. There is a single default ASPX page within this project, and that page contains a separate code-behind file. First, take a look at the code-behind page.

The code-behind page is quite simple, and only contains a page load event handler; the page load subroutine contains a browser check, and also demonstrates that it is possible to capture the value from the TrackBar control from within the code-behind page.

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)

Within the first segment code shown above, the handler is grabbing the last set value of the TrackBar control from a hidden input field that is synchronized to contain the TrackBar control’s current value. The recovered value is then evaluated, and if it is empty, it is set to 0. The hidden input field is updated to match the recovered value, and the TrackBar control’s current value is sent to the browser for display by means of a Response.Write call.

Following this block, the browser type and CLR version number are evaluated to validate that the client’s browser will support the display of the control. That concludes the description of the entire contents of the Default.aspx code-behind page.

The final area to examine is the markup default.aspx page. The markup includes a minor amount of JavaScript along with the standard markup needed to display and interact with the slider. I won’t go into the standard markup but I will address the areas pertinent to the control and display of the TrackBar control.

The first item worthy of discussing addresses the creation of the TrackBar control. This is handled by means of an object tag; it looks like this:

<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>

Within the object tag, there are couple of items worth mentioning. The first item is the declaration of the class ID; whilst this would normally contain a unique ID for the control, in this instance, the class ID is used to point to the TrackBar control residing directly within the project, as opposed to a DLL out in the machine’s file system. Note the manner in which the class ID declaration is handled in the previous code snippet. You may note that the class ID contains “HTTP” followed by the name of the DLL. The DLL name is followed by a pound sign which is used to separate the two halves of the ID. Following the pound sign is the fully qualified name of the user control. The “onmousemove” attribute is added after the class ID, and its value is used to tell the system to update the hidden input field to match the value of the slider by means of the TrackBarValue property established in the Slider.vb user control class.

The next interesting item is the onClientClick function set up for the form’s submit button. When the user clicks on the submit button, a JavaScript alert box is generated and is used to display the current TrackBar value. This does not serve any useful purpose other than to demonstrate that the current value of the TrackBar may be obtained from a JavaScript call.

The last bit of code in the markup worth mentioning is this little script:

<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>

The purpose of this script is to maintain the state of the control between submittals; without this bit of code, every time the form loads, the TrackBar control would reset to zero; with this code in place, the TrackBar control will be set back to its last value when the form is reloaded. You may also enable the commented out code to set a default value for the TrackBar control which may be useful for the initial load if you want to set the control to some specific value.

Summary

This approach is only useful if you are targeting Internet Explorer users only; if you need to support other browsers, you will need to use a purely JavaScript based control in lieu of adopting this approach. The example provided is pretty simple, and is intended only to describe how this approach might work and demonstrate that it is possible to deploy Windows Forms controls in an ASP.NET application. The demonstration projects were also built to demonstrate gaining access to the current TrackBar control value from either client-side JavaScript or from within the VB code-behind page.