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.
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
At the start of the user control’s code, you will note the following:
Public Class Slider
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()
Me.TrackBar1.Minimum = 0
Me.TrackBar1.Maximum = 100
Me.TrackBar1.Value = 0
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
Me.lblCurrentValue.Text = TrackBar1.Value.ToString()
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
Me.lblCurrentValue.Text = TrackBar1.Value.ToString()
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
Set(ByVal value As String)
TrackBar1.Value = value
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
Dim strInputVal As String = Request("TBInputValue")
If strInputVal = Nothing Then
strInputVal = 0
TBInputValue.Value = strInputVal
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
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 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"
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
TrackBar value. This does not serve any useful purpose other than to demonstrate that the current value of the
The last bit of code in the markup worth mentioning is this little script:
if (document.forms.TBInputValue.value == null ||
document.forms.TBInputValue.value == 0)
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.