JavaScript Editor Javascript validator     Javascripts

Main Page


Previous Section Next Section

5.7 Selecting from a List

ASP.NET provides four ASP controls for selecting either single or multiple items from a list:

CheckBoxList
RadioButtonList
ListBox
DropDownList

All of these controls are derived from ListControl and have much in common:

  • ListItem (the information displayed by the list) works exactly the same way for all the ListControls, with a Value property and a Text property.

  • Items can be added either statically, programmatically through the Add method, or from a data source.

  • The SelectedIndex and SelectedItem properties point to the selected item with the lowest index.

  • The Selected property is true for any item that is selected.

  • All four controls raise and respond to the SelectedIndexChanged event.

The ListBox and DropDownList controls differ from the other two list controls (CheckBoxList and RadionButtonList) in that they appear to the user to be a single control (a list box or a drop-down list) rather than a collection of buttons or checkboxes. The ListBox and DropDownList controls lend themselves to longer lists because they scroll.

Table 5-5 summarizes the differences among the four list controls.

Table 5-5. Differences among the four list controls

Characteristic

CheckBoxList

RadioButtonList

DropDownList

ListBox

Single selection only

 

x

x

 

Able to select one or more items

x

  

x

Displays the entire list

x

x

  

Displays single item at a time, along with a button for seeing the entire list, using vertical scroll bar if necessary

  

x

 

Displays multiple items, using vertical scroll bar if necessary

   

x

Best for short lists

x

x

  

Best for long lists

  

x

x

The following sections describe the controls and objects related to selecting items from a list.

5.7.1 ListItem Object

There are four ASP controls that allow you to select from a list, all derived from the ListControl class. A ListControl control consists of a collection of ListItem objects. Each ListItem object has two properties, as Table 5-6 shows.

Table 5-6. Properties of the ListItem object

Name

Type

Get

Set

Description

Text

String

x

x

The text string displayed for a ListItem.

Value

String

x

x

A value associated with a ListItem. The value is not displayed, but is available programmatically.

When dealing with lists, it is very common to display one thing to the user, but to pass the selection to your code as something different. For example, if presenting your users with a list of states, the list might display state names, such as Massachusetts. But when they select an item, the program will pass the selected item as ma. Massachusetts would be the ListItem object's Text property, and ma would be the Value property.

The Text property can be specified in one of two ways:

Inner HTML content

Text contained between the opening and closing tags of any control

Text attribute

An attribute within the opening tag of the ListItem control

There can be either a closing tag with no inner HTML, or the opening tag can be self-closing. All three of the following lines are equivalent:

<asp:ListItem >Item 7</asp:ListItem>
<asp:ListItem text="Item 7"></asp:ListItem>
<asp:ListItem text="Item 7"/>

If both a Text property and inner HTML content are specified, the inner HTML content will be displayed. For example, consider the following line:

<asp:ListItem text="Item 7">Item 8</asp:ListItem>

If that line were used, then "Item 8" is what would be displayed on the web page.

The Value property can be set similarly to the Text property. So, for example, the lines of code presented previously could be modified to also set the value, as follows:

<asp:ListItem value="7">Item 7</asp:ListItem>
<asp:ListItem text="Item 7" value="7"></asp:ListItem>
<asp:ListItem text="Item 7" value="7"/>

5.7.2 CheckBoxList Control

The CheckBoxList is a parent control containing a collection of CheckBox items. It is very similar to the group of CheckBox controls shown previously in Example 5-10 and Example 5-11, except that all the child checkboxes are handled as a group. The CheckBoxList control derives from ListControl rather than directly from WebControl.

The CheckBoxList control is better suited than individual checkboxes for creating a series of checkboxes out of data in a database, although either type of control can be bound to data. Chapter 9 discusses data binding to a database.

There are three ways to add items to a CheckBoxList:

  • Statically, using the ASP ListItem control tag

  • Programmatically from an array

  • Dynamically from a data source such as a database

5.7.2.1 Adding items statically

The web page shown in Example 5-14 demonstrates many of the properties of CheckBoxLists. The list items are added statically in the HTML code. The CheckBoxList control attributes specify the appearance and behavior of the control. (This code is the same for both C# and VB.) Figure 5-7 shows the resulting web page.

Example 5-14. CheckBoxLists, ASPCheckBoxList.aspx
<html>
   <body>
   <form runat="server">

      <h1>ASP Controls</h1>
      <h2>CheckBoxLists</h2>

      <asp:CheckBoxList
         id="cblGenre"
         autoPostBack="true"
         cellPadding="5"
         cellSpacing="10"
         repeatColumns="3"
         repeatDirection="vertical"
         RepeatLayout="table"
         textAlign="right"
         runat="server">

         <asp:ListItem> Item 1 </asp:ListItem>   
         <asp:ListItem> Item 2 </asp:ListItem>
         <asp:ListItem> Item 3 </asp:ListItem>
         <asp:ListItem> Item 4 </asp:ListItem>
         <asp:ListItem> Item 5 </asp:ListItem>
         <asp:ListItem> Item 6 </asp:ListItem>
      </asp:CheckBoxList>
   </form>
   </body>
</html>
Figure 5-7. CheckBoxList statically added items
figs/pan2_0507.gif

In the code in Example 5-14, default values were used for those properties that have defaults, as indicated in Table 5-7. By changing the RepeatDirection, RepeatLayout, and TextAlign properties to Horizontal, Flow, and Left, respectively, you get the results shown in Figure 5-8.

Figure 5-8. Static CheckBox list modified to use non-default values
figs/pan2_0508.gif

Table 5-7. Properties of CheckBoxList control

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, postback to the server will not occur until the page is posted, either by a button or another control with AutoPostBack set to true. Its default value is false.

CellPadding

Int32

x

x

Integers

Distance in pixels between the border and contents of a cell. The default is -1, which indicates the property is not set.

CellSpacing

Int32

x

x

Integers

Distance in pixels between cells. The default is -1, which indicates the property is not set.

DataSource

Object

x

x

 

Source that populates the control.

RepeatColumns

Integer

x

x

Integers

Number of columns to display.

RepeatDirection

RepeatDirection

x

x

Horizontal, Vertical

Horizontal specifies that items are loaded from left to right, then top to bottom.

Vertical specifies that items are loaded top to bottom, then left to right. The default value is Vertical.

RepeatLayout

RepeatLayout

x

x

Flow, Table

Flow specifies that items are displayed without a table structure.

Table specifies that items are displayed in a table structure. Default is Table.

Selected

Boolean

x

x

true, false

Indicates an item has been selected. Default is false.

TextAlign

TextAlign

x

x

Left, Right

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

5.7.2.2 Adding items programmatically from an array

There are times when you do not know at compile time what checkboxes you want to create. For example, you may want to draw the choices from a database. In these cases, you need to be able to add items programmatically.

In Example 5-15 (in C#) and Example 5-16 (in VB.NET), ListItem objects are added both programmatically and also are hard-coded within the CheckBoxList tags, for purposes of illustration.

Example 5-15. Adding items from an array in C#, csASPCheckBoxListArray.aspx
<%@ Page Language="C#" %>
<script runat="server">
   void cblGenre_Init(Object Source, EventArgs E)
   {
      // create an array of items to add
      string[] Genre = {"SciFi","Novels", "Computers", "History", "Religion"};

      int i;
      for (i = 0; i < Genre.GetLength(0); i++)
      {
         this.cblGenre.Items.Add(new ListItem(Genre[i]));
      }
   }
</script>

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

      <h1>ASP Controls</h1>
      <h2>CheckBoxList</h2>
      <h3>Adding Items From An Array</h3>
      
      <asp:CheckBoxList
         id="cblGenre"
         autoPostBack="true"
         cellPadding="5"
         cellSpacing="10"
         repeatColumns="3"
         repeatDirection="vertical"
         RepeatLayout="table"
         textAlign="right"
         onInit="cblGenre_Init"
         runat="server">

         <asp:ListItem> Item 1 </asp:ListItem>   
         <asp:ListItem> Item 2 </asp:ListItem>
         <asp:ListItem> Item 3 </asp:ListItem>
         <asp:ListItem> Item 4 </asp:ListItem>
         <asp:ListItem> Item 5 </asp:ListItem>
         <asp:ListItem> Item 6 </asp:ListItem>
      </asp:CheckBoxList>
   </form>
   </body>
</html>
Example 5-16. Adding items from an array in VB.NET, vbASPCheckBoxListArray.aspx
<%@ Page Language="VB" %>
<script runat="server">
   Sub cblGenre_Init(ByVal Sender as Object, _
                     ByVal e as EventArgs)
      '  create an array of items to add
      dim Genre(  ) as string = {"SciFi", "Novels", "Computers", "History", "Religion"}

      dim i as integer
      For i = 0 To Genre.GetLength(0) - 1
         cblGenre.Items.Add(new ListItem(Genre(i)))
      Next
   End Sub
</script>

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

      <h1>ASP Controls</h1>
      <h2>CheckBoxList</h2>
      <h3>Adding Items From An Array</h3>
      
      <asp:CheckBoxList
         id="cblGenre"
         autoPostBack="true"
         cellPadding="5"
         cellSpacing="10"
         repeatColumns="3"
         repeatDirection="vertical"
         RepeatLayout="table"
         textAlign="right"
         onInit="cblGenre_Init"
         runat="server">

         <asp:ListItem> Item 1 </asp:ListItem>   
         <asp:ListItem> Item 2 </asp:ListItem>
         <asp:ListItem> Item 3 </asp:ListItem>
         <asp:ListItem> Item 4 </asp:ListItem>
         <asp:ListItem> Item 5 </asp:ListItem>
         <asp:ListItem> Item 6 </asp:ListItem>
      </asp:CheckBoxList>
   </form>
   </body>
</html>

You add an attribute to the control tag that implements an event handler for control initialization:

onInit="cblGenre_Init"

Then you add the cblGenre_Init method, called by onInit, to the script block at the beginning of the page. This method creates a string array of genres to add to the list of checkboxes. Then a for loop is used to iterate through the array, calling the Add method on each item to add a new ListItem object to the CheckBoxList control.

Notice the slight difference in the logic used in the for loops between the C# code and the VB.NET code. This is because the C# loop repeats while the second parameter is true, while the VB.NET loop repeats until the end value is exceeded. Therefore, in the VB.NET loop you have to subtract 1 from the end value.

When you run the web pages in Example 5-15 or Example 5-16, you get the results shown in Figure 5-9.

You can modify the code in Example 5-15 and Example 5-16 to add Value properties for some of the ListItems created in the CheckBoxList tag, as well as in all the ListItem objects created in the cblGenre_Init event procedure. Example 5-17 shows the code to do so in C#, and Example 5-18 shows the same code in VB.NET. Code lines that have been added or modified are shown in boldface.

Example 5-17. Adding items with values to CheckBoxList from array using C#, csASPCheckBoxListArrayValue.aspx
<%@ Page Language="C#" %>
<script runat="server">
   void cblGenre_Init(Object Source, EventArgs E)
   {
      // create arrays of items to add
      string[] Genre = {"SciFi","Novels", "Computers", "History", "Religion"};
      string[] Code = {"sf","nvl", "cmp", "his", "rel"};

      int i;
      for (i = 0; i < Genre.GetLength(0); i++)
      {
         //  Add both Text and Value
         this.cblGenre.Items.Add(new ListItem(Genre[i],Code[i]));
      }
   }
</script>

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

      <h1>ASP Controls</h1>
      <h2>CheckBoxList</h2>
      <h3>Adding Items From An Array With a Value</h3>
      
      <asp:CheckBoxList
         id="cblGenre"
         autoPostBack="true"
         cellPadding="5"
         cellSpacing="10"
         repeatColumns="3"
         repeatDirection="vertical"
         RepeatLayout="table"
         textAlign="right"
         onInit="cblGenre_Init"
         runat="server">

         <asp:ListItem value="1"> Item 1 </asp:ListItem>
         <asp:ListItem text="Item 2" value="2"></asp:ListItem>
         <asp:ListItem text="Item 3"/>
         <asp:ListItem text="Item 4"> Inner Item 4 </asp:ListItem>
         <asp:ListItem value="5"></asp:ListItem>
         <asp:ListItem> Item 6 </asp:ListItem>
      </asp:CheckBoxList>
   </form>
   </body>
</html>
Example 5-18. Adding items with values to CheckBoxList from array using VB.NET, vbASPCheckBoxListArrayValue.aspx
<%@ Page Language="VB" %>
<script runat="server">
   Sub cblGenre_Init(ByVal Sender as Object, _
                     ByVal e as EventArgs)
      '  create arrays of items to add
      dim Genre(  ) as string = {"SciFi", "Novels", "Computers", "History", "Religion"}
      dim Code(  ) as string = {"sf","nvl", "cmp", "his", "rel"}

      dim i as integer
      For i = 0 To Genre.GetLength(0) - 1
         '  Add both Text and Value
         cblGenre.Items.Add(new ListItem(Genre(i),Code(i)))
      Next
   End Sub
</script>

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

      <h1>ASP Controls</h1>
      <h2>CheckBoxList</h2>
      <h3>Adding Items From An Array With a Value</h3>
      
      <asp:CheckBoxList
         id="cblGenre"
         autoPostBack="true"
         cellPadding="5"
         cellSpacing="10"
         repeatColumns="3"
         repeatDirection="vertical"
         RepeatLayout="table"
         textAlign="right"
         onInit="cblGenre_Init"
         runat="server">

         <asp:ListItem value="1"> Item 1 </asp:ListItem>   
         <asp:ListItem text="Item 2" value="2"></asp:ListItem>
         <asp:ListItem text="Item 3"/>
         <asp:ListItem text="Item 4"> Inner Item 4 </asp:ListItem>
         <asp:ListItem value="5"></asp:ListItem>
         <asp:ListItem> Item 6 </asp:ListItem>
      </asp:CheckBoxList>
   </form>
   </body>
</html>

If the code in Example 5-17 or Example 5-18 is run, it will look as shown in Figure 5-10.

Figure 5-9. CheckBoxList with items added from an array
figs/pan2_0509.gif
Figure 5-10. CheckBoxList with items and values added from an array
figs/pan2_0510.gif

In cblGenre_Init, where you previously created a single string array to hold the Text properties, there are now two string arrays: one for the Text properties and one for the Value properties. You now use the overloaded Add method that takes two arguments. The first argument is the Text property, and the second argument is the Value property. In C#, this looks like:

this.cblGenre.Items.Add(new ListItem(Genre[i],Code[i]));

In VB.NET, it looks like:

cblGenre.Items.Add(new ListItem(Genre(i),Code(i)))

An object may overload its methods, which means it may declare two or more methods with the same name. The compiler differentiates among these methods based on the number and type of parameters provided.

For example, the ListItemCollection class overloads the Add method. One version takes a string, and the second version takes a ListItem object.

Finally, in creating the static ListItems, you used several different methods of creating Values and Text, including instances of missing Text (Item 5), missing Value (Item 3, Item 4, Item 6), and divergent Text property from inner HTML content (Item 4). The differences between Figure 5-9 and Figure 5-11 can be seen in Items 4 and 5.

You can see that if the Value is missing, then the Text is displayed. If the Text is missing, then the Value is displayed. If the Text is different from the inner HTML content, then the inner HTML content is displayed.

5.7.2.3 Adding items from a data source

The real power of adding items programmatically comes when you can use a data source to populate the items in a CheckBoxList control. The ultimate data source, obviously, is a database. This will be covered in Chapter 9. However, you can use the array just created to demonstrate binding to a data source.

By replacing the for loop in cblGenre_Init in Example 5-15 and Example 5-16 with two lines (which specify the data source and then bind to it), the method now appears as shown in Example 5-19 for C# and Example 5-20 for VB .NET. (Note that the lines of code that have been added to the two event procedures—shown in bold—are identical in the C# and VB .NET versions of the program, except for the trailing semicolon in C#.)

Example 5-19. Adding items to a CheckBoxList from a data source using C#, csASPCheckBoxListDataBind.aspx
<%@ Page Language="C#" %>
<script runat="server">
   void cblGenre_Init(Object Source, EventArgs E)
   {
      // create an array of items to add
      string[] Genre = {"SciFi","Novels", "Computers", "History", "Religion"};

      cblGenre.DataSource = Genre;
      cblGenre.DataBind(  );
   }
</script>

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

      <h1>ASP Controls</h1>
      <h2>CheckBoxList</h2>
      <h3>Adding Items From An Array Using DataBinding</h3>
      
      <asp:CheckBoxList
         id="cblGenre"
         autoPostBack="true"
         cellPadding="5"
         cellSpacing="10"
         repeatColumns="3"
         repeatDirection="vertical"
         RepeatLayout="table"
         textAlign="right"
         onInit="cblGenre_Init"
         runat="server">

         <asp:ListItem> Item 1 </asp:ListItem>   
         <asp:ListItem> Item 2 </asp:ListItem>
         <asp:ListItem> Item 3 </asp:ListItem>
         <asp:ListItem> Item 4 </asp:ListItem>
         <asp:ListItem> Item 5 </asp:ListItem>
         <asp:ListItem> Item 6 </asp:ListItem>
      </asp:CheckBoxList>
   </form>
   </body>
</html>
Example 5-20. Adding items to a CheckBoxList from a data source using VB.NET, vbASPCheckBoxListDataBind.aspx
<%@ Page Language="VB" %>
<script runat="server">
   Sub cblGenre_Init(ByVal Sender as Object, _
                     ByVal e as EventArgs)
      '  create an array of items to add
      dim Genre(  ) as string = {"SciFi", "Novels", "Computers", "History", "Religion"}

      cblGenre.DataSource = Genre
      cblGenre.DataBind(  )
   End Sub
</script>

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

      <h1>ASP Controls</h1>
      <h2>CheckBoxList</h2>
      <h3>Adding Items From An Array Using DataBinding</h3>
      
      <asp:CheckBoxList
         id="cblGenre"
         autoPostBack="true"
         cellPadding="5"
         cellSpacing="10"
         repeatColumns="3"
         repeatDirection="vertical"
         RepeatLayout="table"
         textAlign="right"
         onInit="cblGenre_Init"
         runat="server">

         <asp:ListItem> Item 1 </asp:ListItem>   
         <asp:ListItem> Item 2 </asp:ListItem>
         <asp:ListItem> Item 3 </asp:ListItem>
         <asp:ListItem> Item 4 </asp:ListItem>
         <asp:ListItem> Item 5 </asp:ListItem>
         <asp:ListItem> Item 6 </asp:ListItem>
      </asp:CheckBoxList>
   </form>
   </body>
</html>

You might expect the results to be unchanged from Figure 5-10, but that is not the case. Instead you get the results shown in Figure 5-11.

Figure 5-11. CheckBoxList with items added using DataBinding
figs/pan2_0511.gif

In the previous example, using the for loop, ListItems were added by the Init method after the control was created. In this example, the pre-existing ListItem objects were replaced by the new data source. This is because the ListControl.Items collection is initialized by the data source, so any ListItem objects previously defined are lost.

5.7.2.4 Responding to user selections

When a user checks or unchecks one of the checkboxes in a CheckBoxList, the SelectedIndexChanged event is raised. This event passes an argument of type EventArgs, which does not expose any properties. By setting an attribute for handling this event and putting code in the event handler method, you can respond to the user clicking on one of the checkboxes. If AutoPostBack is set to true, the response occurs immediately. Otherwise, the response occurs the next time the form is posted to the server.

The additional code added to the previous examples, shown highlighted in Example 5-21 for C# and Example 5-22 for VB.NET, demonstrates responding to SelectedIndexChanged.

Example 5-21. Responding to CheckBoxList User Action using C#, csASPCheckBoxListEvents.aspx
<%@ Page Language="C#" %>
<script runat="server">
   void cblGenre_Init(Object Source, EventArgs E)
   {
      // create arrays of items to add
      string[] Genre = {"SciFi","Novels", "Computers", "History", "Religion"};
      string[] Code = {"sf","nvl", "cmp", "his", "rel"};

      int i;
      for (i = 0; i < Genre.GetLength(0); i++)
      {
         //  Add both Text and Value
         this.cblGenre.Items.Add(new ListItem(Genre[i],Code[i]));
      }
   }

   void cblGenre_SelectedIndexChanged(Object Source, EventArgs E)
   {
      StringBuilder sb = new StringBuilder(  );
      foreach(ListItem li in cblGenre.Items)
      {
         if (li.Selected == true)
         {
            sb.Append("<br/>" + li.Value + " - " + li.Text);
        }
      }
   
      if (sb.Length == 0)
         lblGenre.Text = "No genres selected.";
      else
         lblGenre.Text = sb.ToString(  );
   }
</script>

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

      <h1>ASP Controls</h1>
      <h2>CheckBoxList</h2>
      <h3>Responding to Events</h3>
      
      <asp:CheckBoxList
         id="cblGenre"
         autoPostBack="true"
         cellPadding="5"
         cellSpacing="10"
         repeatColumns="3"
         repeatDirection="vertical"
         RepeatLayout="table"
         textAlign="right"
         onInit="cblGenre_Init"
         onSelectedIndexChanged="cblGenre_SelectedIndexChanged"
         runat="server">

         <asp:ListItem value="1"> Item 1 </asp:ListItem>   
         <asp:ListItem text="Item 2" value="2"></asp:ListItem>
         <asp:ListItem text="Item 3"/>
         <asp:ListItem text="Item 4"> Inner Item 4 </asp:ListItem>
         <asp:ListItem value="5"></asp:ListItem>
         <asp:ListItem> Item 6 </asp:ListItem>
      </asp:CheckBoxList>
      <asp:label id="lblGenre" runat="server" />
   </form>
   </body>
</html>
Example 5-22. Responding to CheckBoxList User Action using VB.NET- vbASPCheckBoxListEvents.aspx
<%@ Page Language="VB" %>
<script runat="server">
   Sub cblGenre_Init(ByVal Sender as Object, _
                     ByVal e as EventArgs)
      '  create arrays of items to add
      dim Genre(  ) as string = {"SciFi", "Novels", "Computers", "History", "Religion"}
      dim Code(  ) as string = {"sf","nvl", "cmp", "his", "rel"}

      dim i as integer
      For i = 0 To Genre.GetLength(0) - 1
         '  Add both Text and Value
         cblGenre.Items.Add(new ListItem(Genre(i),Code(i)))
      Next
   End Sub

   Sub cblGenre_SelectedIndexChanged(ByVal Sender as Object, _
                                     ByVal e as EventArgs)
     dim sb as new StringBuilder(  )
     dim li as ListItem
      for each li in cblGenre.Items
         if li.Selected then
            sb.Append("<br/>" & li.Value & " - " & li.Text)
       end if
      next li
   
      if sb.Length = 0 then
         lblGenre.Text = "No genres selected."
      else
         lblGenre.Text = sb.ToString(  )
      end if
   End Sub
</script>

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

      <h1>ASP Controls</h1>
      <h2>CheckBoxList</h2>
      <h3>Adding Items From An Array With a Value</h3>
      
      <asp:CheckBoxList
         id="cblGenre"
         autoPostBack="true"
         cellPadding="5"
         cellSpacing="10"
         repeatColumns="3"
         repeatDirection="vertical"
         RepeatLayout="table"
         textAlign="right"
         onInit="cblGenre_Init"
         onSelectedIndexChanged="cblGenre_SelectedIndexChanged"
         runat="server">

         <asp:ListItem value="1"> Item 1 </asp:ListItem>   
         <asp:ListItem text="Item 2" value="2"></asp:ListItem>
         <asp:ListItem text="Item 3"/>
         <asp:ListItem text="Item 4"> Inner Item 4 </asp:ListItem>
         <asp:ListItem value="5"></asp:ListItem>
         <asp:ListItem> Item 6 </asp:ListItem>
      </asp:CheckBoxList>
      <asp:label id="lblGenre" runat="server" />
   </form>
   </body>
</html>

Notice how the StringBuilder class is used in the method cblGenre_SelectedIndexChanged to create the string, rather than just concatenating each string value onto the previous value, as in this line of (C#) code:

str += "<br/>" + li.Value + " - " + li.Text;

The StringBuilder class provides a much more efficient way of constructing strings, since it does not require that a new string be implicitly created with every change to the string.

In the code in Example 5-21 and Example 5-22, you add an attribute named OnSelectedIndexChanged to identify the event handler for the SelectedIndexChanged event. Like all event handlers, the name comes from prepending the word "On" to the event name. You also add a Label control to the form, lblGenre, to display the selected items.

The event handler points to a method in the script block at the top of the page called cblGenre_SelectedIndexChanged. In this event handler, you iterate through the collection of ListItems in the CheckBoxList. For each ListItem, you check to see if the Selected property is true. If it is, then you add the Value property of that item to the HTML string you are constructing, using the StringBuilder class. Finally, the length of the StringBuilder string is tested. If it is zero length, then an appropriate message is displayed, otherwise the StringBuilder string containing the selected values is displayed.

The results of Example 5-21 and Example 5-22 are shown in Figure 5-12, where several items have been selected.

Figure 5-12. Responding to CheckBoxList user selections
figs/pan2_0512.gif

5.7.3 RadioButtonList Control

The RadioButtonList control is very similar to the CheckBoxList control. They are both derived from the ListControl class and share all of the same properties, events, and methods. The only difference between the two is that the RadioButtonList control can have only one item selected at a time. When an item is selected, any other selected item is deselected.

The RadioButtonList and the CheckBoxList controls share the two properties inherited from ListControl that are shown in Table 5-8.

Table 5-8. Selection properties inherited from the ListControl class

Name

Type

Get

Set

Description

SelectedIndex

Integer

x

x

If equal to -1, then nothing has been selected.

SelectedItem

ListItem

x

  

To demonstrate how these are used, modify the code in Example 5-12 and Example 5-13, replacing the three radio buttons controlling the font size in grpSize with a single RadioButtonList, calling it rblSize. Example 5-23 shows the resulting C# ASP.NET page, while Example 5-24 shows the ASP.NET page with VB.NET code.

Example 5-23. RadioButtonList control using C#, csASPRadioButtonList.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 rblSize_SelectedIndexChanged(Object Source, EventArgs E)
   {
      //  Check to verify that something has been selected.
      if (rblSize.SelectedIndex != -1)
      {
         int size = Convert.ToInt32(rblSize.SelectedItem.Value);
         lblTime.Font.Size = size;
      }
   }
</script>

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

      <h1>ASP Controls</h1>
      <h2>RadioButtonList</h2>

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

      <asp:radioButtonList
         id="rblSize"
         autoPostBack="true"
         cellSpacing="20"
         repeatColumns="3"
         repeatDirection="horizontal"
         RepeatLayout="table"
         textAlign="right"
         onSelectedIndexChanged="rblSize_SelectedIndexChanged"
         runat="server">

         <asp:ListItem text="10pt" value="10"/>  
         <asp:ListItem text="14pt" value="14"/>  
         <asp:ListItem text="16pt" value="16"/>  
      </asp:radioButtonList>
   </form>
   </body>
</html>
Example 5-24. RadioButtonList control using VB.NET, vbASPRadioButtonList.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 rblSize_SelectedIndexChanged(ByVal Sender as Object, _
                                    ByVal e as EventArgs)
      '  Check to verify that something has been selected.
      if (rblSize.SelectedIndex <> -1) then
         dim size as integer = Convert.ToInt32(rblSize.SelectedItem.Value)
         lblTime.Font.Size = new FontUnit(size)
      end if
   End Sub
</script>

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

      <h1>ASP Controls</h1>
      <h2>RadioButtonList</h2>

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

      <asp:radioButtonList
         id="rblSize"
         autoPostBack="true"
         cellSpacing="20"
         repeatColumns="3"
         repeatDirection="horizontal"
         RepeatLayout="table"
         textAlign="right"
         onSelectedIndexChanged="rblSize_SelectedIndexChanged"
         runat="server">

         <asp:ListItem text="10pt" value="10"/>  
         <asp:ListItem text="14pt" value="14"/>  
         <asp:ListItem text="16pt" value="16"/>  
      </asp:radioButtonList>
   </form>
   </body>
</html>

The results of Example 5-23 or Example 5-24 are shown in Figure 5-13. It doesn't look much different than the individual radio buttons, but it is much easier to populate from a data source.

Figure 5-13. Using the RadioButtonList control
figs/pan2_0513.gif

In Example 5-23 and Example 5-24, the original separate radio buttons are replaced by a RadioButtonList control. Note that each ListItem object has both a Text property and a Value property. The event handler, rblSize_SelectedIndexChanged, takes an integer value for the Font.Size property in the C# code:

int size = Convert.ToInt32(rblSize.SelectedItem.Value);
lblTime.Font.Size = size;

but requires a FontUnit type in VB.NET:

dim size as integer = Convert.ToInt32(rblSize.SelectedItem.Value)
lblTime.Font.Size = new FontUnit(size)

As described previously, in conjunction with Table 5-1, this is because C# provides an implicit conversion operator, but VB.NET does not.

The event handler method makes use of the SelectedIndex and SelectedItem properties mentioned previously. The SelectedIndex property represents the lowest integer value index of all the selected items. The SelectedItem property returns the Text property of the item pointed to by SelectedIndex. Since a RadioButtonList, by definition, can have at most a single selected item, then SelectedIndex and SelectedItem will tell us which item is selected. These properties of a CheckBoxList control or other ListControl control (which allow multi-selection) are more ambiguous.

Example 5-23 and Example 5-24 verify that at least one of the values has been selected. If no item has been selected, then the SelectedIndex property is equal to -1. If an item has been selected, you set the Font.Size property by converting the SelectedItem.Value property to an integer in C# and by passing the SelectedItem.Value as an argument to the FontUnit class constructor in VB.NET.

Note that the following two lines of C# code in Example 5-23:

int size = Convert.ToInt32(rblSize.SelectedItem.Value);
lblTime.Font.Size = size;

could just as easily have been written as a single line:

lblTime.Font.Size = Convert.ToInt32(rblSize.SelectedItem.Value);

(However, I often use the more verbose version to enhance readability and make the code easier to debug.)

5.7.4 DropDownList Control

DropDownList controls display a single item at a time with a button for dropping the list to display more selections. Only a single item can be selected. The code in Example 5-25 demonstrates a DropDownList control in C#, while the code in Example 5-26 shows the same in VB.NET. A two-dimensional string array is used to hold both the Text and Value properties. The array is then used to add the ListItem objects.

Example 5-25. DropDownList control using C#, csASPDropDownList.aspx
<%@ Page Language="C#"  %>
<script runat="server">
   void Page_Load(Object sender, EventArgs e)
   {
      if (! IsPostBack)
      {
         //  Build 2 dimensional array for the lists
         //  First dimension contains bookname
         //  2nd dimension contains ISBN number
         string[,] books = {
               {"Programming C#","0596001177"},
               {"Programming ASP.NET","0596001711"},
               {"WebClasses From Scratch","0789721260"},
               {"Teach Yourself C++ in 21 Days","067232072X"},
               {"Teach Yourself C++ in 10 Minutes","067231603X"},
               {"XML & Java From Scratch","0789724766"},
               {"Complete Idiot's Guide to a Career in Computer Programming",
               {"XML Web Documents From Scratch","0789723166"},
               {"Clouds To Code","1861000952"},
               {"C++: An Introduction to Programming","1575760614"},
               {"C++ Unleashed","0672312395"}
            };

         //  Now populate the list.
         int i;
         for (i = 0; i < books.GetLength(0); i++)
         {
            //  Add both Text and Value
             ddl.Items.Add(new ListItem(books[i,0],books[i,1]));
         }
      }
   }

   void ddl_SelectedIndexChanged(Object Source, EventArgs E)
   {
      //  Check to verify that something has been selected.
      if (ddl.SelectedIndex != -1)
      {
         lblDdl.Text=ddl.SelectedItem.Text + " ---> ISBN: " +
            ddl.SelectedItem.Value;
      }   
   }
</script>

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

      <h1>ASP Controls</h1>
      <h2>DropDownList</h2>

      <asp:dropDownList
         id="ddl"
         autoPostBack="true"
         onSelectedIndexChanged="ddl_SelectedIndexChanged"
         runat="server"/>

      <br/>
      <asp:label id="lblDdl" runat="server" />
   </form>
   </body>
</html>
Example 5-26. DropDownList control using VB.NET, vbASPDropDownList.aspx
<%@ Page Language="VB"  %>
<script runat="server">

   Sub Page_Load(ByVal Sender as Object, _
                 ByVal e as EventArgs)
      if not IsPostBack then
         '  Build 2 dimensional array for the lists
         '  First dimension contains bookname
         '  2nd dimension contains ISBN number
         dim books(,) as string = { _
               {"Programming C#","0596001177"}, _
               {"Programming ASP.NET","1234567890"}, _
               {"WebClasses From Scratch","0789721260"}, _
               {"Teach Yourself C++ in 21 Days","067232072X"}, _
               {"Teach Yourself C++ in 10 Minutes","067231603X"}, _
               {"XML & Java From Scratch","0789724766"}, _
               {"Complete Idiot's Guide to a Career in Computer Programming", _ 
                       "0789719959"}, _
               {"XML Web Documents From Scratch","0789723166"}, _
               {"Clouds To Code","1861000952"}, _
               {"C++: An Introduction to Programming","1575760614"}, _
               {"C++ Unleashed","0672312395"} _
            }

         '  Now populate the list.
         dim i as integer

         for i = 0 to books.GetLength(0) - 1
            '  Add both Text and Value
            ddl.Items.Add(new ListItem(books(i,0),books(i,1)))
         next
      end if
   End Sub

   Sub ddl_SelectedIndexChanged(ByVal Sender as Object, _
                                ByVal e as EventArgs)
      '  Check to verify that something has been selected.
      if ddl.SelectedIndex <> -1 then
         lblDdl.Text=ddl.SelectedItem.Text & " ---> ISBN: " & _
            ddl.SelectedItem.Value
      end if
   End Sub
</script>

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

      <h1>ASP Controls</h1>
      <h2>DropDownList</h2>

      <asp:dropDownList
         id="ddl"
         autoPostBack="true"
         onSelectedIndexChanged="ddl_SelectedIndexChanged"
         runat="server"/>

      <br/>
      <asp:label id="lblDdl" runat="server" />
   </form>
   </body>
</html>

The results of Example 5-25 or Example 5-26 are shown in Figure 5-14.

Figure 5-14. DropDownList control
figs/pan2_0514.gif

In Example 5-25 and Example 5-26, a DropDownList with the id of ddl is added. This control is populated when the page is first loaded, in the Page_Load event handler method.

To prevent this code running every time the page is reloaded, you test to see if the IsPostBack property is true. The IsPostBack property is false when the page is first loaded, but is set to true whenever the form is posted back to the server as a result of user action on one of the controls. In many applications, the contents of controls are filled from a database, which is a relatively expensive operation. Only hitting the database when necessary makes the implementation more efficient. In Example 5-23 and Example 5-24, you used two arrays to populate a CheckBoxList with both the Text and Value properties. In Example 5-25 and Example 5-26, you use a single two-dimensional array to accomplish the same thing. As before, you call the Items.Add method to add the ListItems to the control. In Chapter 9, you will see how to populate a ListControl from a database.

As with the other ListControls, the OnSelectedIndexChanged attribute points to the event handler method, ddl_SelectedIndexChanged. In that method, just as with the RadioButtonList control, you first check to see if something is selected by testing if the SelectedIndex property is not equal to -1. If an item has been selected, you display a concatenation of SelectedItem.Text and SelectedItem.Value in the Label called lblDdl.

5.7.5 ListBox Control

ListBox controls are very similar to DropDownList controls. Example 5-27 and Example 5-28 demonstrate two different ListBoxes: one using single selection and one allowing multiple selection. As you will see, they are almost identical in implementation, with the only significant difference being the method used to identify the selected item(s).

The code in Example 5-27 and Example 5-28 for implementing ListBox controls is nearly identical to that in Example 5-25 and Example 5-26 for implementing DropDownLists. The differences, highlighted in Example 5-27 and Example 5-28, include the addition of the two DropDownList controls, modification to the Page_Load method to populate those controls, and the addition of event handlers for those two controls.

Example 5-27. ListBox control using C#, csASPListBox.aspx
<%@ Page Language="C#"  %>
<script runat="server">
   void Page_Load(Object sender, EventArgs e)
   {
      if (! IsPostBack)
      {
         //  Build 2 dimensional array for the lists
         //  First dimension contains bookname
         //  2nd dimension contains ISBN number
         string[,] books = {
               {"Programming C#","0596001177"},
               {"Programming ASP.NET","0596001711"},
               {"WebClasses From Scratch","0789721260"},
               {"Teach Yourself C++ in 21 Days","067232072X"},
               {"Teach Yourself C++ in 10 Minutes","067231603X"},
               {"XML & Java From Scratch","0789724766"},
               {"Complete Idiot's Guide to a Career in Computer Programming",
               {"XML Web Documents From Scratch","0789723166"},
               {"Clouds To Code","1861000952"},
               {"C++: An Introduction to Programming","1575760614"},
               {"C++ Unleashed","0672312395"}
            };
         //  Now populate the lists.
         int i;
         for (i = 0; i < books.GetLength(0); i++)
         {
            //  Add both Text and Value
            lbSingle.Items.Add(new ListItem(books[i,0],books[i,1]));
            lbMulti.Items.Add(new ListItem(books[i,0],books[i,1]));
         }
      }
   }

   void lbSingle_SelectedIndexChanged(Object Source, EventArgs E)
   {
      //  Check to verify that something has been selected.
      if (lbSingle.SelectedIndex != -1)
      {
         lblLbSingle.Text=lbSingle.SelectedItem.Text + " ---> ISBN: " +
            lbSingle.SelectedItem.Value;
      }   
   }

   void lbMulti_SelectedIndexChanged(Object Source, EventArgs E)
   {
      string str = "";
      foreach(ListItem li in lbMulti.Items)
      {
         if (li.Selected == true)
         {
            str += "<br/>" + li.Text + " ---> ISBN: " +li.Value;
         }
      }
   
      if (str.Length == 0)
         lblLbMulti.Text = "No books selected.";
      else
         lblLbMulti.Text = str;
   }
</script>

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

      <h1>ASP Controls</h1>
      <h2>ListBox</h2>

      <h3>ListBox - single selection</h3>
      <asp:ListBox
         id="lbSingle"
         autoPostBack="true"
         rows="6"
         selectionMode="single"
         onSelectedIndexChanged="lbSingle_SelectedIndexChanged"
         runat="server"/>

      <br/>
      <asp:label id="lblLbSingle" runat="server" />
      <br/>

      <h3>ListBox - multiple selection</h3>
      <asp:ListBox
         id="lbMulti"
         autoPostBack="true"
         selectionMode="multiple"
         onSelectedIndexChanged="lbMulti_SelectedIndexChanged"
         runat="server"/>
      
      <asp:label id="lblLbMulti" runat="server" />
   </form>
   </body>
</html>
Example 5-28. ListBox control using VB.NET, vbASPListBox.aspx
<%@ Page Language="VB"  %>
<script runat="server">
   Sub Page_Load(ByVal Sender as Object, _
                 ByVal e as EventArgs)
      if not IsPostBack then
         '  Build 2 dimensional array for the lists
         '  First dimension contains bookname
         '  2nd dimension contains ISBN number
         dim books(,) as string = { _
               {"Programming C#","0596001177"}, _
               {"Programming ASP.NET","1234567890"}, _
               {"WebClasses From Scratch","0789721260"}, _
               {"Teach Yourself C++ in 21 Days","067232072X"}, _
               {"Teach Yourself C++ in 10 Minutes","067231603X"}, _
               {"XML & Java From Scratch","0789724766"}, _
               {"Complete Idiot's Guide to a Career in Computer Programming", _
                       "0789719959"}, _
               {"XML Web Documents From Scratch","0789723166"}, _
               {"Clouds To Code","1861000952"}, _
               {"C++: An Introduction to Programming","1575760614"}, _
               {"C++ Unleashed","0672312395"} _
            }
         '  Now populate the lists.
         dim i as integer

         for i = 0 to books.GetLength(0) - 1
            '  Add both Text and Value
            lbSingle.Items.Add(new ListItem(books(i,0),books(i,1)))
            lbMulti.Items.Add(new ListItem(books(i,0),books(i,1)))
         next
      end if
   End Sub

   Sub lbSingle_SelectedIndexChanged(ByVal Sender as Object, _
                                     ByVal e as EventArgs)
      '  Check to verify that something has been selected.
      if lbSingle.SelectedIndex <> -1 then
         lblLbSingle.Text=lbSingle.SelectedItem.Text & " ---> ISBN: " & _
            lbSingle.SelectedItem.Value
      end if
   End Sub

   Sub lbMulti_SelectedIndexChanged(ByVal Sender as Object, _
                                    ByVal e as EventArgs)
     dim sb as new StringBuilder(  )
     dim li as ListItem
      for each li in lbMulti.Items
         if li.Selected then
            sb.Append("<br/>" & li.Text & " ---> ISBN: " & li.Value)
         end if
      next li
   
      if sb.Length = 0 then
         lblLbMulti.Text = "No books selected."
      else
         lblLbMulti.Text = sb.ToString(  )
      end if
   End Sub
</script>

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

      <h1>ASP Controls</h1>
      <h2>ListBox</h2>

      <h3>ListBox - single selection</h3>
      <asp:ListBox
         id="lbSingle"
         autoPostBack="true"
         rows="6"
         selectionMode="single"
         onSelectedIndexChanged="lbSingle_SelectedIndexChanged"
         runat="server"/>

      <br/>
      <asp:label id="lblLbSingle" runat="server" />
      <br/>

      <h3>ListBox - multiple selection</h3>
      <asp:ListBox
         id="lbMulti"
         autoPostBack="true"
         selectionMode="multiple"
         onSelectedIndexChanged="lbMulti_SelectedIndexChanged"
         runat="server"/>
      
      <asp:label id="lblLbMulti" runat="server" />
   </form>
   </body>
</html>

ListBox controls have two properties in addition to those inherited from ListControl. These properties are shown in Table 5-9.

Table 5-9. Properties of ListBox controls not inherited from the ListControl control

Name

Type

Get

Set

Values

Description

SelectionMode

ListSelectionMode

x

x

Single, Multiple

Determines if a ListBox is in single selection mode or multiple selection mode. Default is Single.

Rows

Integer

x

x

 

Number of rows displayed. Default is 4.

The first ListBox added in Example 5-27 and Example 5-28, with an id of lbSingle, is a single selection list box. The Rows property has been set to 6, and 6 items are displayed. Since the control has been populated with more than 6 items, a vertical scrollbar automatically appears. If a second item is selected, the first item is deselected. As with most of the examples in this chapter, AutoPostBack has been set to true so that the effects of the change are visible immediately.

The second ListBox control, with an id of lbMulti, is a multiple selection list box. The Rows property has not been set, so the default 4 rows are visible. Since it is multiselect, the standard Windows techniques of multiselection can be used.

Windows MultiSelection Techniques

Most Windows applications use the same techniques for selecting multiple items.

To add a range of items to the selected list, click on the first item to be selected, then hold down the Shift key while clicking on the last item to be selected. All the items between the two are highlighted for selection.

To add non-contiguous items to the selection, hold down the Ctrl key while clicking on items.

To deselect single items that have already been selected, hold down the Ctrl key while clicking on each item to toggle its selection status.

The event handlers for processing the selections of the two list boxes are very different. The event handler for the single selection list box is very similar to the one for the DropDownList control or any other single select ListControl, such as the RadioButtonList control.

The event handler for the multiselect list box, on the other hand, is more like that used for the CheckBoxList control. It iterates through the collection of ListItem objects, checking each to see if the Selected property is true. If it is true, then the Text and Value properties are added to the string for output to a label.

The result of running the web page in Example 5-27 or Example 5-28 is shown in Figure 5-15.

Figure 5-15. ListBox controls
figs/pan2_0515.gif
    Previous Section Next Section


    JavaScript Editor Javascript validator     Javascripts 
    seattle eviction attorney



    ©