Programming ASP.NET

Javascript validator Javascripts

Main Page

↑

5.6 Selecting Values

Several ASP controls allow the user to select a value or values:

CheckBox: Allows selection of Boolean data
RadioButton: Allows only a single option to be selected
CheckBoxList: Group of CheckBox controls that can be dynamically created and bound to a data source
RadioButtonList: Group of RadioButton controls that can be dynamically created and bound to a data source
ListBox: Allows selection of one or more items from a predefined list
DropDownList: Similar to a ListBox, but allows only a single selection

All of these controls derive from the WebControl class. The RadioButton derives further from the CheckBox class, and the last four controls, the List controls, all derive from the abstract ListControl class. Each of these controls is considered in detail in the upcoming sections.

5.6.1 CheckBox Control

A CheckBox control provides a means for a user to select Boolean data (that is, Yes/No or True/False). If you have several checkboxes arranged together (not to be confused with a CheckBoxList), then you can select multiple options. No option is mutually exclusive of another.

The C# code in Example 5-10 shows the use of three independent CheckBoxes to control the appearance of a Label. (The equivalent VB.NET code, which is nearly identical to the C# code, is shown in Example 5-11.) Clicking on any of the checkboxes in these examples—Underline, Overline, or Strikeout—imposes that attribute on the text string in the Label control. The results of the C# code are shown in Figure 5-5.

Figure 5-5. Checkboxes

Example 5-10. CheckBoxes in C#, csASPCheckboxes.aspx

<%@ Page Language="C#" %>

<script runat="server">
   void lblTime_Init(Object Source, EventArgs E)
   {
      lblTime.Font.Name = "Verdana";
      lblTime.Font.Size = 20;
      lblTime.Font.Bold = true;
      lblTime.Font.Italic = true;
      lblTime.Text = DateTime.Now.ToString(  );
   }

   void chkUnderLine_CheckedChanged(Object Source, EventArgs E)
   {
      if (chkUnderLine.Checked )
         lblTime.Font.Underline = true;
      else
         lblTime.Font.Underline = false;
   }

   void chkOverLine_CheckedChanged(Object Source, EventArgs E)
   {
      if (chkOverLine.Checked )
         lblTime.Font.Overline = true;
      else
         lblTime.Font.Overline = false;
   }

   void chkStrikeout_CheckedChanged(Object Source, EventArgs E)
   {
      if (chkStrikeout.Checked )
         lblTime.Font.Strikeout = true;
      else
         lblTime.Font.Strikeout = false;
   }
</script>

<html>
   <body>
   <form runat="server">

      <h1>ASP Controls</h1>
      <h2>Checkboxes</h2>

      <asp:label
         id="lblTime"
         runat="server"
         onInit="lblTime_Init"/>

      <br/>
      <br/>

      <asp:checkBox
         id="chkUnderLine"
         autoPostBack="true"
         checked="false"
         text="Underline?"
         textAlign="left"
         onCheckedChanged="chkUnderLine_CheckedChanged"
         runat="server" />
         
      <asp:checkBox
         id="chkOverLine"
         autoPostBack="true"
         checked="false"
         text="Overline?"
         textAlign="right"
         onCheckedChanged="chkOverLine_CheckedChanged"
         runat="server" />

      <asp:checkBox
         id="chkStrikeout"
         autoPostBack="true"
         checked="false"
         text="Strikeout?"
         onCheckedChanged="chkStrikeout_CheckedChanged"
         runat="server" />
   </form>
   </body>
</html>

Example 5-11. CheckBoxes in VB.NET, vbASPCheckboxes.aspx

<%@ Page Language="VB" %>
<script runat="server">
   Sub lblTime_Init(ByVal Sender as Object, _
                    ByVal e as EventArgs)
      lblTime.Font.Name = "Verdana"
      lblTime.Font.Size = new FontUnit(20)
      lblTime.Font.Bold = true
      lblTime.Font.Italic = true
      lblTime.Text = DateTime.Now(  )
   End Sub

   Sub chkUnderLine_CheckedChanged(ByVal Sender as Object, _
                                   ByVal e as EventArgs)
      if chkUnderLine.Checked then
         lblTime.Font.Underline = true
      else
         lblTime.Font.Underline = false
      end if
   End Sub

   Sub chkOverLine_CheckedChanged(ByVal Sender as Object, _
                                  ByVal e as EventArgs)
      if chkOverLine.Checked then
         lblTime.Font.Overline = true
      else
         lblTime.Font.Overline = false
      end if
   End Sub

   Sub chkStrikeout_CheckedChanged(ByVal Sender as Object, _
                                   ByVal e as EventArgs)
      if chkStrikeout.Checked then
         lblTime.Font.Strikeout = true
      else
         lblTime.Font.Strikeout = false
      end if
   End Sub
</script>

<html>
   <body>
   <form runat="server">

      <h1>ASP Controls</h1>
      <h2>Checkboxes</h2>

      <asp:label
         id="lblTime"
         runat="server"
         onInit="lblTime_Init"/>

      <br/>
      <br/>

      <asp:checkBox
         id="chkUnderLine"
         autoPostBack="true"
         checked="false"
         text="Underline?"
         textAlign="left"
         onCheckedChanged="chkUnderLine_CheckedChanged"
         runat="server" />
         
      <asp:checkBox
         id="chkOverLine"
         autoPostBack="true"
         checked="false"
         text="Overline?"
         textAlign="right"
         onCheckedChanged="chkOverLine_CheckedChanged"
         runat="server" />

      <asp:checkBox
         id="chkStrikeout"
         autoPostBack="true"
         checked="false"
         text="Strikeout?"
         onCheckedChanged="chkStrikeout_CheckedChanged"
         runat="server" />
   </form>
   </body>
</html>

Like all controls derived from WebControl, CheckBoxes have an ID property. But as the sample code in Example 5-10 and Example 5-11 shows, there are several other properties and methods that are not inherited from WebControl. These members are listed in Table 5-4. Note, however, that some of these properties, such as AutoPostBack and Text, are common to several other controls.

Table 5-4. Members of the CheckBox class not inherited from WebControl control class

Name

Type

Get

Set

Values

Description

AutoPostBack

Boolean

x

x

true, false

Determines if automatic postback to the server will occur if the user changes the contents of the control. If false (the default), postback to the server will not occur until the page is posted, either by a button or another control with AutoPostBack set to true.

Checked

Boolean

x

x

true, false

Indicates if the CheckBox is checked. Default is false.

Text

String

x

x

The text label associated with the CheckBox.

TextAlign

TextAlign

x

x

Left, Right

Dictates if the text label is on the left or right of the CheckBox. Default is Right.

CheckedChanged

Event

EventArgs

This event is raised when the Checked property is changed. Note that this event will not immediately post back to the server unless AutoPostBack is set to true.

The CheckBox control can raise the CheckedChanged event, which is handled by the OnCheckedChanged event handler. This event passes a standard EventArgs argument, which does not expose any properties.

5.6.2 RadioButton Control

A RadioButton control is very similar to, and in fact is derived from, a CheckBox control. The only difference between the two classes is that RadioButtons are typically grouped using the GroupName property, and only one RadioButton in the group can be checked (that is, its Checked property is true) at one time. Changing the Checked property of one RadioButton control in the group to true changes the Checked property of all other controls in the group to false.

Example 5-12 is a C# version of a web page that contains three RadioButton controls to set the font size of a label. Example 5-13 provides the equivalent VB.NET version. Each of the radio buttons in Example 5-12 and Example 5-13 is part of the group grpSize. The result of running either Example 5-12 or Example 5-13 is shown in Figure 5-6.

Example 5-12. RadioButtons in C#, csASPRadioButtons.aspx

<%@ Page Language="C#" %>

<script runat="server">
   void lblTime_Init(Object Source, EventArgs E)
   {
      lblTime.Font.Name = "Verdana";
      lblTime.Font.Size = 20;
      lblTime.Font.Bold = true;
      lblTime.Font.Italic = true;
      lblTime.Text = DateTime.Now.ToString(  );
   }

   void grpSize_CheckedChanged(Object Source, EventArgs E)
   {
      if (rdoSize10.Checked)
         lblTime.Font.Size = 10;
      else if (rdoSize14.Checked)
         lblTime.Font.Size = 14;
      else    lblTime.Font.Size = 16;
   }
</script>

<html>
   <body>
   <form runat="server">

      <h1>ASP Controls</h1>
      <h2>Radio Buttons</h2>

      <br/>
      <br/>
      
      <asp:label
         id="lblTime"
         runat="server"
         onInit="lblTime_Init"/>

      <br/>
      <br/>
      
      <asp:radioButton
         groupName="grpSize"
         id="rdoSize10"
         autoPostBack="true"
         checked="false"
         text="10pt"
         onCheckedChanged="grpSize_CheckedChanged"
         runat="server" />
      <asp:radioButton
         groupName="grpSize"
         id="rdoSize14"
         autoPostBack="true"
         checked="false"
         text="14pt"
         onCheckedChanged="grpSize_CheckedChanged"
         runat="server" />
      <asp:radioButton
         groupName="grpSize"
         id="rdoSize16"
         autoPostBack="true"
         checked="false"
         text="16pt"
         onCheckedChanged="grpSize_CheckedChanged"
         runat="server" />
   </form>
   </body>
</html>

Example 5-13. RadioButtons in VB.NET, vbASPRadioButtons.aspx

<%@ Page Language="VB" %>

<script runat="server">
   Sub lblTime_Init(ByVal Sender as Object, _
                    ByVal e as EventArgs)
      lblTime.Font.Name = "Verdana"
      lblTime.Font.Size = new FontUnit(20)
      lblTime.Font.Bold = true
      lblTime.Font.Italic = true
      lblTime.Text = DateTime.Now(  )
   End Sub

   Sub grpSize_CheckedChanged(ByVal Sender as Object, _
                              ByVal e as EventArgs)
      if (rdoSize10.Checked)
         lblTime.Font.Size = new FontUnit(10)
      else if (rdoSize14.Checked)
         lblTime.Font.Size = new FontUnit(14)
      else    
         lblTime.Font.Size = new FontUnit(16)
      End If
   End Sub
</script>

<html>
   <body>
   <form runat="server">

      <h1>ASP Controls</h1>
      <h2>Radio Buttons</h2>

      <br/>
      <br/>

      <asp:label
         id="lblTime"
         runat="server"
         onInit="lblTime_Init"/>

      <br/>
      <br/>
      
      <asp:radioButton
         groupName="grpSize"
         id="rdoSize10"
         autoPostBack="true"
         checked="false"
         text="10pt"
         onCheckedChanged="grpSize_CheckedChanged"
         runat="server" />
      <asp:radioButton
         groupName="grpSize"
         id="rdoSize14"
         autoPostBack="true"
         checked="false"
         text="14pt"
         onCheckedChanged="grpSize_CheckedChanged"
         runat="server" />
      <asp:radioButton
         groupName="grpSize"
         id="rdoSize16"
         autoPostBack="true"
         checked="false"
         text="16pt"
         onCheckedChanged="grpSize_CheckedChanged"
         runat="server" />
   </form>
   </body>
</html>

Figure 5-6. Radio buttons

The CheckedChanged event, which is derived from CheckBox, is handled by the onCheckedChanged event handler, which points to the grpSize_CheckedChanged method. That method is a simple if..else block that changes the text size depending on which button is selected. In practice, it would probably be better to use a C# switch statement or a VB.NET Select Case statement to make it easier to add additional radio buttons in the future.

Javascript validator Javascripts
→