Controls with two states are often useful on web pages. You may think about buttons that expand and collapse a panel, but apart from that, there are so many situations where states can be "toggled".
This is a collection of three simple user controls that behave similarly, but take three different forms: a button, a link, and an image.
Using the controls
In Web Matrix, drag the file "ToggleButton.ascx", "ToggleImage.ascx" or "ToggleLink.ascx" onto your web form, where you want the control or the link to appear.
In Visual Studio, add the file as an Existing Item to your project. Then, you can drag it on the web form.
If you use another editor, you can add the control manually. The code below is for a button, but the code for a link or image is similar.
Add this directive on top of the page:
<%@ Register TagPrefix="rw" TagName="ToggleButton"
Then, add a tag like this in your HTML code where you want the toggle button to be displayed:
Next, make sure you use the appropriate settings, for instance:
<rw:ToggleButton id="ToggleButton1" runat="server"
ToolTip1="Click for more" ToolTip2="Click for less"
Not all of these settings are necessary. As a minimum, you should set the
OnClick handler, the
Text2 properties on the
ToggleLink controls, and the
ImageURL2 properties on the
The controls all have a property
Status, the value of which can be either 1 or 2. When clicked, the value will toggle from 1 to 2 or back. By reading this value in your code (typically in the
OnClick event handler), you can take actions to reveal or collapse panels on the web form, or to modify whatever you want to reflect the new state. The initial value of
Status is 1.
Although the control is written in VB.NET, you may use it in any page, even if that page is written in another language.
How it works
The code is pretty straightforward. This is a part of the code for the
<<%@ Control Language="VB" ClassName="ToggleButton" %>
Public Property Status As Integer
Dim obj As Object = Viewstate("status")
If(Not obj Is Nothing) Then Return CInt(obj)
Public Property Text1 As String
Dim obj As Object = Viewstate("text1")
If(Not obj Is Nothing) Then Return obj.ToString()
Return "Text1 not set"
Public Event Click(Sender as Object, E as EventArgs)
Protected Sub OnClick(e As EventArgs)
RaiseEvent Click(Me, e)
Sub Button1_Click(sender As Object, e As EventArgs)
If Status=1 Then
From inside the page, the properties of the button itself are hidden. To make them available again, I added the most common properties (
Tooltip) to the user control again, and I added getters and setters to pass them through to the button. There are separate properties for
Tooltip for both states (
Tooltip2). For the
ToggleImage control, there're the
ImageURL2 properties. Make sure they point to existing images.
Finally, I added the
OnClick delegate and event handler. This will pass the button's
Click event on to the page, while toggling the state of the control.
The code for the
ToggleLink controls is very similar.
As an example, here's a simple demo page for the
<%@ Page Language="VB" ValidateRequest="False"%>
<%@ Register TagPrefix="uc0" TagName="ToggleButton" Src="ToggleButton.ascx" %>
A more elaborate demo page is available with the download to show you how to use all three controls.
Points of interest
The project is an example of how to create simple user controls with events.
This is the first version, 1.0.