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 2.0 .NET framework
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 controls. 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 controls 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:
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 of 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's 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 current Trackbar control's 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 current
Trackbar control's 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 first "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.