Toggle Controls

• Download source files - 18.3 Kb

Introduction

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" 
                                    Src="ToggleButton.ascx" %>

Then, add a tag like this in your HTML code where you want the toggle button to be displayed:

<rw:ToggleButton id="ToggleButton1" 
                runat="server"></rw:ToggleButton>

Next, make sure you use the appropriate settings, for instance:

<rw:ToggleButton id="ToggleButton1" runat="server"
    Text2="<<Less" Text1="More>>"
    ToolTip1="Click for more" ToolTip2="Click for less"
    OnClick="ToggleButton1_Click">
</rw:ToggleButton>

Not all of these settings are necessary. As a minimum, you should set the OnClick handler, the Text1 and Text2 properties on the ToggleButton and ToggleLink controls, and the ImageURL1 and ImageURL2 properties on the ToggleImage control.

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

<<%@ Control Language="VB" ClassName="ToggleButton" %>
<script runat="server">

    Public Property Status As Integer
        Get
            Dim obj As Object = Viewstate("status")
            If(Not obj Is Nothing) Then Return CInt(obj)
            Return 1
        End Get
        Set
            Viewstate("status")=Value
            If(Value=1) Then
                Button1.Text=Text1
                Button1.Tooltip=Tooltip1
            Else
                Button1.Text=Text2
                Button1.Tooltip=Tooltip2
            End If
        End Set
    End Property

    Public Property Text1 As String
        Get
            Dim obj As Object = Viewstate("text1")
            If(Not obj Is Nothing) Then Return obj.ToString()
            Return "Text1 not set"
        End Get
        Set
            Viewstate("text1")=Value
            If(Status=1) Then
                Button1.Text=Text1
            End If
        End Set
    End Property

' other properties come here
' code omitted for brevity

    Public Event Click(Sender as Object, E as EventArgs)

    Protected Sub OnClick(e As EventArgs)
        RaiseEvent Click(Me, e)
    End Sub

    Sub Button1_Click(sender As Object, e As EventArgs)
        If Status=1 Then
            Status=2
        Else
            Status=1
        End If
        OnClick(EventArgs.Empty)
    End Sub

</script>
<asp:Button id="Button1" onclick="Button1_Click" runat="server" 
        Text="Not set" CausesValidation="False"></asp:Button>

From inside the page, the properties of the button itself are hidden. To make them available again, I added the most common properties (Text, Enabled and Tooltip) to the user control again, and I added getters and setters to pass them through to the button. There are separate properties for Text and Tooltip for both states (Text1/Text2 and Tooltip1/Tooltip2). For the ToggleImage control, there're the ImageURL1 and 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 ToggleImage and ToggleLink controls is very similar.

As an example, here's a simple demo page for the ToggleButton:

<%@ Page Language="VB" ValidateRequest="False"%>
<%@ Register TagPrefix="uc0" TagName="ToggleButton" Src="ToggleButton.ascx" %>
<script runat="server">

    Sub ToggleButton1_Click(sender As Object, e As EventArgs)
        ' typically, do something with the value of ToggleButton1.Status here
        Label1.Text = "You toggled the button. Current status is " & _
                                                         ToggleButton1.Status
    End Sub

</script>
<html>
<head>
<title>Toggle Controls</title>
</head>
<body>
    <form runat="server">
        <uc0:ToggleButton id="ToggleButton1" runat="server"
            Text2="<<Less" Text1="More>>" Enabled="True"
            ToolTip1="Click for more" ToolTip2="Click for less"
            OnClick="ToggleButton1_Click">
        </uc0:ToggleButton>
        <asp:Label id="Label1" runat="server"></asp:Label>
    </form>
</body>
</html>

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.

History

This is the first version, 1.0.