Creating Checkboxes

Checkboxes display checkmarks—which the user can toggle with a click—and caption text. To see how this works in Web applications, take a look at the CheckBoxes example on the CD-ROM; you can see it at work in Figure 16.1. This example is intended to help the user design a sandwich, and as you can see in that figure, they've chosen whole wheat bread, sausage, and so on.

For reference, here's what WebForm1.aspx in the CheckBoxes example looks like:

<%@ Page Language="vb" AutoEventWireup="false"
Codebehind="WebForm1.aspx.vb" Inherits="CheckBoxes.WebForm1"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
  <HEAD>
    <title>CheckBoxes example</title>
    <meta name="GENERATOR" content="Microsoft Visual Studio.NET 7.0">
    <meta name="CODE_LANGUAGE" content="Visual Basic 7.0">
    <meta name=vs_defaultClientScript content="JavaScript">
    <meta name=vs_targetSchema content="http://schemas.microsoft.com/ _
        intellisense/ie5">
  </HEAD>
  <body MS_POSITIONING="GridLayout">

    <form id="Form1" method="post" runat="server">
<asp:CheckBox id=CheckBox1 style="Z-INDEX: 101; LEFT: 54px;
POSITION: absolute; TOP: 47px" runat="server" Text="Whole wheat"
AutoPostBack="True"></asp:CheckBox>
<asp:CheckBoxList id=CheckBoxList1 style="Z-INDEX: 105; LEFT:
310px; POSITION: absolute; TOP: 51px" runat="server" Width="126px"
Height="157px" AutoPostBack="True">
<asp:ListItem Value="cheese">Cheese</asp:ListItem>
<asp:ListItem Value="sausage">Sausage</asp:ListItem>
<asp:ListItem Value="tomato">Tomato</asp:ListItem>
<asp:ListItem Value="ham">Ham</asp:ListItem>
</asp:CheckBoxList>
<asp:TextBox id=TextBox2 style="Z-INDEX: 104; LEFT: 55px;
POSITION: absolute; TOP: 186px" runat="server" Width="243px"
Height="25px"></asp:TextBox>
<asp:TextBox id=TextBox1 style="Z-INDEX: 103; LEFT: 55px;
POSITION: absolute; TOP: 140px" runat="server" Width="243px"
Height="24px"></asp:TextBox>
<asp:CheckBox id=CheckBox2 style="Z-INDEX: 102; LEFT: 54px;
POSITION: absolute; TOP: 95px" runat="server" Text="Sesame seeds"
AutoPostBack="True"></asp:CheckBox>
    </form>
  </body>
</HTML>

And here's what WebForm1.aspx.vb looks like:

Public Class WebForm1
    Inherits System.Web.UI.Page
    Protected WithEvents CheckBox1 As System.Web.UI.WebControls.CheckBox
    Protected WithEvents CheckBox2 As System.Web.UI.WebControls.CheckBox
    Protected WithEvents TextBox1 As System.Web.UI.WebControls.TextBox
    Protected WithEvents CheckBoxList1 As _
        System.Web.UI.WebControls.CheckBoxList
    Protected WithEvents TextBox2 As System.Web.UI.WebControls.TextBox

#Region " Web Form Designer Generated Code "

    'This call is required by the Web Form Designer.
    <System.Diagnostics.DebuggerStepThrough()> _
        Private Sub InitializeComponent()

    End Sub

    Private Sub Page_Init(ByVal sender As System.Object, _
        ByVal e As System.EventArgs) Handles MyBase.Init
        'CODEGEN: This method call is required by the Web Form Designer
        'Do not modify it using the code editor.
        InitializeComponent()
    End Sub

#End Region

    Private Sub Page_Load(ByVal sender As System.Object, _
        ByVal e As System.EventArgs) Handles MyBase.Load
        'Put user code to initialize the page here
    End Sub

    Private Sub CheckBox1_CheckedChanged(ByVal sender As System.Object, _
        ByVal e As System.EventArgs) Handles CheckBox1.CheckedChanged
        If CType(sender, CheckBox).Checked Then
            TextBox1.Text = "Bread: Whole wheat"
        Else
            TextBox1.Text = "Bread: White"
        End If
        If CheckBox2.Checked Then
            TextBox1.Text += " with sesame seeds"
        End If
    End Sub

    Private Sub CheckBox2_CheckedChanged(ByVal sender As System.Object, _
        ByVal e As System.EventArgs) Handles CheckBox2.CheckedChanged
        If CheckBox1.Checked Then
            TextBox1.Text = "Bread: Whole wheat"
        Else
            TextBox1.Text = "Bread: White"
        End If

        If CType(sender, CheckBox).Checked Then
            TextBox1.Text += " with sesame seeds"
        End If
    End Sub

    Private Sub CheckBoxList1_SelectedIndexChanged(ByVal sender _
        As System.Object, ByVal e As System.EventArgs) Handles _
        CheckBoxList1.SelectedIndexChanged
        Dim LoopIndex As Integer
        TextBox2.Text = "Filling: "

        For LoopIndex = 0 To 3
            If CheckBoxList1.Items(LoopIndex).Selected Then
                TextBox2.Text &= _
                    CheckBoxList1.Items(LoopIndex).Value & " "
            End If
        Next
    End Sub
End Class

In this example, the two checkboxes appear at left, where you can select the bread type. (The other checkboxes are part of a checkbox list control.) When the user clicks the "Whole wheat" checkbox, for example, we can display the type of bread selected, whole wheat if the box is checked, or the default—white bread—if the box is not checked. To display the type of bread, I'll handle the checkbox's CheckChanged event; to determine if a checkbox is selected or not, you just use its Checked property. Note that I also take a look at the other checkbox, CheckBox2, to see if the user wants sesame seeds, and add them as well, if needed:

    Private Sub CheckBox1_CheckedChanged(ByVal sender As System.Object, _
        ByVal e As System.EventArgs) Handles CheckBox1.CheckedChanged
        If CType(sender, CheckBox).Checked Then
            TextBox1.Text = "Bread: Whole wheat"
        Else
            TextBox1.Text = "Bread: White"
        End If

        If CheckBox2.Checked Then
            TextBox1.Text += " with sesame seeds"
        End If
    End Sub

The other checkboxes, at right in this example, are part of a checkbox list control—coming up right after the ListControl class which the CheckBoxList class is based on.

Note

Don't forget—if you want to handle this control's events immediately, you must set its AutoPostBack property to True.