Book VIII: Advanced ASP.NET Programming
Chapter 3: Using List Controls
In This Chapter
⻬Working with CheckBoxList controls
⻬Toiling with ListItem elements
⻬Utilizing RadioButtonList controls
⻬Employing ListBox controls
⻬Making use of DropDownList controls
⻬Doing more with ListItem elements
T
he controls I present in Chapter 1 of this mini-book work with individual items of data. In this chapter, you get a look at four server controls that work with lists of data. First are the CheckBoxListand RadioButtonListcontrols, which display lists of check boxes and radio buttons. Finally, the
ListBoxcontrol and DropDownListcontrols are presented. These controls let the user select an item from a list of options.
Using the CheckBoxList Control
The CheckBoxListcontrol displays a list of check boxes. It provides a simple way to present a set of options to the user without requiring you to code each check box individually.
Figure 3-1 shows a page that displays a CheckBoxListcontrol. Here, the
CheckBoxListcontrol lists several toppings that can be ordered on a pizza. When the user clicks the Order Pizza button, the program displays the items selected by the user in a label that appears beneath the button.
Using the CheckBoxList Control
132
Here’s the C# markup used to create the CheckBoxListcontrol shown in Figure 3-1:
<asp:CheckBoxList ID=”cblToppings” runat=”server”> <asp:ListItem>Pepperoni</asp:ListItem> <asp:ListItem>Linguica</asp:ListItem> <asp:ListItem>Chicken</asp:ListItem> <asp:ListItem>Onions</asp:ListItem> <asp:ListItem>Olives</asp:ListItem> <asp:ListItem>Mushrooms</asp:ListItem> <asp:ListItem>Garlic</asp:ListItem> <asp:ListItem>Tomatoes</asp:ListItem> <asp:ListItem>Anchovies</asp:ListItem> </asp:CheckBoxList>
The CheckBoxListcontrol has several properties that let you control the way list items are formatted. In particular, you’ll run across these:
Property Description
TextAlign Specifies whether the text appears to the right or left of the check boxes. You can specify Rightor Left. The default is Right.
RepeatColumns The number of columns to display. The default is 1.
Figure 3-1:
A page with a Check BoxList control.
Book II Chapter 3
Using List Controls
Using the CheckBoxList Control
133
Property Description
RepeatDirection Verticalor Horizontalto indicate whether the check boxes are repeated vertically or horizontally.
RepeatLayout Tableor Flow. Table(the default) indicates that an HTML table should be used to control the column layout.
CellPadding When Tablelayout is used, sets the size of the gap between the contents of a cell and the cell’s border.
CellSpacing When Tablelayout is used, sets the amount of space that appears between the table cells.
Creating columns
The most common use of the CheckBoxListcontrol properties is to break the list of check boxes into multiple columns. For example, Figure 3-2 shows two ways to break the list of toppings into three columns. The first way spec- ifies Verticalfor the RepeatDirectionproperty, and the second way specifies Horizontal. Figure 3-2: Two Check BoxList controls with columns.
Using the CheckBoxList Control
134
Here’s the markup used to create this page:
Vertical layout:<br />
<asp:CheckBoxList ID=”cblToppings” runat=”server” RepeatColumns=”3” RepeatDirection=”Vertical”> <asp:ListItem>Pepperoni</asp:ListItem> <asp:ListItem>Linguica</asp:ListItem> <asp:ListItem>Chicken</asp:ListItem> <asp:ListItem>Onions</asp:ListItem> <asp:ListItem>Olives</asp:ListItem> <asp:ListItem>Mushrooms</asp:ListItem> <asp:ListItem>Garlic</asp:ListItem> <asp:ListItem>Tomatoes</asp:ListItem> <asp:ListItem>Anchovies</asp:ListItem> </asp:CheckBoxList> <br /><br /> Horizontal layout:<br />
<asp:CheckBoxList ID=”CheckBoxList1” runat=”server” RepeatColumns=”3” RepeatDirection=”Horizontal”> <asp:ListItem>Pepperoni</asp:ListItem> <asp:ListItem>Linguica</asp:ListItem> <asp:ListItem>Chicken</asp:ListItem> <asp:ListItem>Onions</asp:ListItem> <asp:ListItem>Olives</asp:ListItem> <asp:ListItem>Mushrooms</asp:ListItem> <asp:ListItem>Garlic</asp:ListItem> <asp:ListItem>Tomatoes</asp:ListItem> <asp:ListItem>Anchovies</asp:ListItem> </asp:CheckBoxList>
Aligning text with check boxes
By default, the check boxes in a CheckBoxListcontrol appear to the left of the text that describes each text box. You can change that orientation by including the TextAlignproperty when you create the CheckBoxList. For example, the following markup places the check boxes to the right of the text that describes them:
<asp:CheckBoxList ID=”cblToppings” runat=”server” TextAlign=”Left”> <asp:ListItem>Pepperoni</asp:ListItem> <asp:ListItem>Linguica</asp:ListItem> <asp:ListItem>Chicken</asp:ListItem> <asp:ListItem>Onions</asp:ListItem> <asp:ListItem>Olives</asp:ListItem> <asp:ListItem>Mushrooms</asp:ListItem> <asp:ListItem>Garlic</asp:ListItem> <asp:ListItem>Tomatoes</asp:ListItem> <asp:ListItem>Anchovies</asp:ListItem> </asp:CheckBoxList>
Book II Chapter 3
Using List Controls
Working with ListItem Elements
135
Figure 3-3 shows how the pizza-toppings check box list appears to the right of the text rather than to the left.
Spacing things out
If the items in a CheckBoxListcontrol seem crowded, you can space them out by using the CellPaddingand CellSpacingproperties. Note that these properties work only when you specify Tablefor the RepeatLayoutprop- erty (or let it default to Table). Then, the CellPaddingproperty lets you add extra space within each cell of the HTML table that’s used to display the check box list, and the CellSpacingproperty adds extra space between the cells. Together, these properties let you add extra space so the items in the list don’t seem so crowded. You usually have to experiment with these settings to get the list to look the way you want it to.
Working with ListItem Elements
The items displayed by the CheckBoxListcontrol — and any other type of list control, for that matter — are defined by ListItemelements that appear between the start and end tags for the CheckBoxListcontrol.
ListItemelements are the same for all four types of list controls presented in this chapter. So heads up — you can use what you get from this section throughout the chapter.
Using the Text property
You can supply the Textproperty for a list item in one of two ways: By list- ing the text value between the start and end tags for each list item, or by
Figure 3-3: A Check BoxList with the check boxes on the other side of the text.
Working with ListItem Elements
136
using the Textattribute. For example, the following markup can also be used to create the CheckBoxListthat was shown in Figure 3-1:
<asp:CheckBoxList ID=”cblToppings” runat=”server”> <asp:ListItem Text=”Pepperoni” /> <asp:ListItem Text=”Linguica” /> <asp:ListItem Text=”Chicken” /> <asp:ListItem Text=”Onions” /> <asp:ListItem Text=”Olives” /> <asp:ListItem Text=”Mushrooms” /> <asp:ListItem Text=”Garlic” /> <asp:ListItem Text=”Tomatoes” /> <asp:ListItem Text=”Anchovies” /> </asp:CheckBoxList>
Using the Value property
If you don’t provide a Valueproperty for a list item, the Valueproperty is given the same value as the Textproperty. In some cases, that’s what you want. But you may want the value of a selected item to be different from the text displayed for the item. For example, suppose you want the value for each topping to be a short code rather than the full name of the topping. Then you could use markup like this to create the CheckBoxList:
<asp:CheckBoxList ID=”cblToppings” runat=”server”> <asp:ListItem Text=”Pepperoni” Value=”PEP” /> <asp:ListItem Text=”Linguica” Value=”LIN” /> <asp:ListItem Text=”Chicken” Value=”CHK” /> <asp:ListItem Text=”Onions” Value=”ONI” /> <asp:ListItem Text=”Olives” Value=”OLI” /> <asp:ListItem Text=”Mushrooms” Value=”MUS” /> <asp:ListItem Text=”Garlic” Value=”GAR” /> <asp:ListItem Text=”Tomatoes” Value=”TOM” /> <asp:ListItem Text=”Anchovies” Value=”ANC” /> </asp:CheckBoxList>
Then, if the user checks the Pepperoni, Olives, and Mushroomsitems, the label displays the following text:
PEP OLI MUS
Determining which items are selected
The code that determines which items are selected — and sets the label’s
Textproperty accordingly — looks like this:
string items = “”;
foreach (ListItem l in cblToppings.Items) {
Book II Chapter 3
Using List Controls
Working with ListItem Elements
137
if (l.Selected)
items += l.Value + “<br>”; }
lblOrder.Text = items;
Here a foreachstatement is used to loop through all items in the Itemscol- lection of the CheckBoxListcontrol. Each of these items is an object of the
ListItemtype, which has the following properties you can use: Property Description
Text The text displayed for the item. Value The value associated with the list item.
Selected A booleanvalue that indicates whether or not the user selected the item.
Here’s the equivalent code in VB.NET:
Dim Items As String
For Each l As ListItem In cblToppings.Items If l.Selected Then
items &= l.Value & “<br>” End If
Next
lblOrder.Text = items
Using the Collection Editor dialog box
If you don’t want to hand-code the ListItem elements for a list control, you can use the ListItem Collection Editor dialog box to create the list items, as shown in Figure 3-4. To summon this dialog box in Design view, click the Smart Tag icon at the top right of a CheckBoxList (or other list) control, and then chose Edit Items. Or you can click the ellipses that appear next to the Items property in the Properties window for the list control.
Figure 3-4:
The ListItem Collection Editor dialog box.
Toiling with the RadioButtonList Control
138
With the Collection Editor dialog box open, you can add an item to the col- lection by clicking the Add button. Then you can change the Enabled,
Selected, Text, or Valueproperties for each item. You can also remove items or change the order in which items appear.
Don’t forget that the ListItemelements that make up the list of items for a list control are the same no matter which type of list control you’re using.
Toiling with the RadioButtonList Control
The RadioButtonListcontrol is similar to the CheckBoxListcontrol, with the exception that — you guessed it — it creates a list of radio buttons rather than check boxes. Here’s an example of the markup for a RadioButtonList
control:
<asp:RadioButtonList ID=”RadioButtonList1” runat=”server”> <asp:ListItem>Individual</asp:ListItem> <asp:ListItem>Small</asp:ListItem> <asp:ListItem>Medium</asp:ListItem> <asp:ListItem Selected=”True”>Large</asp:ListItem> <asp:ListItem>Extra Large</asp:ListItem> <asp:ListItem>Humongous</asp:ListItem> </asp:RadioButtonList>
Figure 3-5 shows a page that includes this radio-button list. As you can see, this page also includes a label that displays the size of pizza ordered after the user clicks the Order Pizzabutton.
You should always set the Selectedproperty of one of the list items in a radio button list to True. If you don’t, the user might forget to select an item.
Figure 3-5:
A page that uses a RadioButton List control.
Book II Chapter 3
Using List Controls
Utilizing ListBox Controls
139
Most of what the previous sections tell you about the CheckBoxListcontrol applies to the RadioButtonListcontrol as well. However, there are a few important variations:
✦ The RadioButtonListhas a SelectedValueproperty you can use to get the Valueproperty of the selected item.This is possible because, unlike a CheckBoxList, a RadioButtonListcan have only one item selected at a time.
✦ The code that displays a specific value — such as the size of the pizza the user ordered — uses theSelectedValueproperty:
lblSize.Text = “You ordered a “ + rblSize.SelectedValue + “ pizza.”;
Here’s the Visual Basic equivalent:
lblSize.Text = “You ordered a “ _ & rblSize.SelectedValue _ & “ pizza.”
✦ If you prefer, you can use theSelectedIndexproperty to get the index value of the selected item.Then, you can use this index value to access the selected list item based on its position in the list. In most cases, however, SelectedIndex isn’t as useful as SelectedValue. If you do use SelectedIndex, remember that index values begin with 0, so the item with index 1is actually the seconditem in the list.
Utilizing ListBox Controls
A ListBoxcontrol is similar to a CheckBoxListor RadioButtonListcon- trol, but it displays simple text lines rather than check boxes or radio but- tons. A list box can be configured to limit the user to a single selection, or it can allow the user to select more than one item from the list. And — unlike a check-box list or radio-button list — a list box can include scroll bars. Figure 3-6 shows a page that uses a list box to let the user choose one or more toppings for a pizza order. Once again, the label beneath the button lists the toppings that the user selected. The markup used to create this list box is as follows:
<asp:ListBox ID=”lbToppings” runat=”server” SelectionMode=”Multiple”>
<asp:ListItem>Pepperoni</asp:ListItem> <asp:ListItem>Sausage</asp:ListItem> <asp:ListItem>Chicken</asp:ListItem> <asp:ListItem>Linguica</asp:ListItem>
Utilizing ListBox Controls
140
<asp:ListItem>Salami</asp:ListItem> <asp:ListItem>Canadian Bacon</asp:ListItem> <asp:ListItem>Olives</asp:ListItem> <asp:ListItem>Mushrooms</asp:ListItem> <asp:ListItem>Tomatoes</asp:ListItem> <asp:ListItem>Pickles</asp:ListItem> <asp:ListItem>Anchovies</asp:ListItem> <asp:ListItem>Garlic</asp:ListItem> </asp:ListBox>Notice that the tag for the ListBoxcontrol specifies SelectionMode= ”Multiple”. This lets the user select more than one item from the list by holding down the Shift or Ctrl key while selecting items. If you want to limit the user to a single selection, specify SelectionMode=”Single”instead. If you want, you can set the number of rows displayed in the list box by using the Rowsproperty. The default setting is 4. Note that a scroll bar will appear automatically if the number of list items exceeds the setting for the
Rowsproperty.
Here’s the C# code that lists the selected items when the user clicks the
Order Pizzabutton:
String toppings = “”;
foreach (ListItem l in lbToppings.Items) { if (l.Selected) toppings += l.Value + “<br>”; } lblOrder.Text = toppings; Figure 3-6: A page that uses a ListBox control.
Book II Chapter 3
Using List Controls
Employing DropDownList Controls
141
And here’s the VB.NET version of the code:
Dim Toppings As String
For Each l As ListItem In lbToppings.Items If l.Selected Then
Toppings &= l.Value & “<br>” End If
Next
lblOrder.Text = Toppings
Employing DropDownList Controls
A DropDownListcontrol combines the features of a text box with the features of a list box. Unlike a list box, the list of items in a drop-down list doesn’t appear until the user clicks the drop-down arrow that appears as part of the control. Also, unlike a list box, a drop-down list limits the user to a single selection.
Figure 3-7 shows a page that uses a drop-down list to let the user select the size of a pizza to order. Notice that this page includes a label that displays the size selected by the user — but it doesn’t include a button that lets the user submit the form. Instead, the page is posted automatically whenever the user changes the selection in the drop-down list. This happens because the markup for the drop-down list specifies AutoPostBack=”True”.
Here’s the markup for this drop-down list:
<asp:DropDownList ID=”ddlSize” runat=”server” AutoPostBack=”True” OnSelectedIndexChanged=”ddlSize_SelectedIndexChanged”> <asp:ListItem>Individual</asp:ListItem> Figure 3-7: A page that uses a drop- down list.
Employing DropDownList Controls
142
<asp:ListItem>Small</asp:ListItem> <asp:ListItem>Medium</asp:ListItem> <asp:ListItem Selected=”True”>Large</asp:ListItem> <asp:ListItem>Extra Large</asp:ListItem> <asp:ListItem>Humongous</asp:ListItem> </asp:DropDownList>Note that the AutoPostBackproperty is set to True, which causes the page to be posted whenever the user changes the selection. In addition, the
OnSelectedIndexChangedattribute specifies the name of the method to be called when the user changes the selection. (If you’re working in VB.NET, you probably won’t specify this attribute. Instead, you’ll specify a Handles
clause on the Subprocedure that handles this event.)
Here’s the C# version of the ddlSize_SelectedIndexChangedmethod:
protected void ddlSize_SelectedIndexChanged( object sender, EventArgs e)
{
lblSize.Text = ddlSize.SelectedValue; }
As you can see, this method sets the label’s Textproperty to the
SelectedValueproperty of the drop-down list.
The SelectedIndexChangedevent is raised whenever the user changes the selection for a drop-down list. That lets the program change the value of the
lblSizelabel when the user changes the size — but how can the label dis- play the initial setting? You could simply hard-code the label’s Textproperty to Large, but a better way is to set the label in the Page_Loadevent. You’ll