Professional ASP.NET 3.5 in C# and Visual Basic Part 18 docx

Evjen c03.tex V2 - 01/28/2008 12:33pm Page 124
Chapter 3: ASP.NET Web Server Controls
Figure 3-10
Visually Removing Items from a Collection
The DropDownList, ListBox, CheckBoxList, and RadioButtonList server controls give you the capability
to visually remove items from the collection displayed in the control, although you can still work with
the items that are not displayed in your server-side code.
The ListBox, CheckBoxList, and RadioButtonList controls are discussed shortly in this chapter.
For a quick example of removing items, create a drop-down list with three items, including one that
you will not display. On the postback, however, you can still work with the ListItem’s
Value
or
Text
property, as illustrated in Listing 3-11.
Listing 3-11: Disabling certain ListItems from a collection
VB
<
%@ page language="VB" %
>
<
script runat="server"
>
Protected Sub DropDownList1_SelectedIndexChanged(ByVal sender As Object, _
ByVal e As System.EventArgs)
Response.Write("You selected item number " & _
DropDownList1.SelectedValue & "
<
br
>
")
Response.Write("You didn’t select item number " & _

DropDownList1.Items(1).Value)
End Sub
<
/script
>
<
html
>
<
head runat="server"
>
<
title
>
DropDownList Server Control
<
/title
>
<
/head
>
<
body
>
<
form id="form1" runat="server"
>
124
Evjen c03.tex V2 - 01/28/2008 12:33pm Page 125
Chapter 3: ASP.NET Web Server Controls

<
asp:DropDownList ID="DropDownList1" Runat="server" AutoPostBack="True"
OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged"
>
<
asp:ListItem Value="1"
>
First Choice
<
/asp:ListItem
>
<
asp:ListItem Value="2" Enabled="False"
>
Second Choice
<
/asp:ListItem
>
<
asp:ListItem Value="3"
>
Third Choice
<
/asp:ListItem
>
<
/asp:DropDownList
>
<
/form

>
<
/body
>
<
/html
>
C#
<
%@ Page Language="C#" %
>
<
script runat="server"
>
protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
{
Response.Write("You selected item number " +
DropDownList1.SelectedValue + "
<
br
>
");
Response.Write("You didn’t select item number " +
DropDownList1.Items[1].Value);
}
<
/script
>
From the code, you can see that the <
asp:ListItem

> element has an attribute:
Enabled
. The Boolean
value given to this element dictates whether an item in the collection is displayed. If you use
Enabled="
False"
, the item is not displayed, but you still have the capability to work with the item in the server-side
code displayed in the
DropDownList1_SelectedIndexChanged
event. The result of the output from these
Response.Write
statements is shown in Figure 3-11.
Figure 3-11
The ListBox Server Control
The ListBox server control has a function similar to the DropDownList control. It displays a collection
of items. The ListBox control behaves differently from the DropDownList control in that it displays
125
Evjen c03.tex V2 - 01/28/2008 12:33pm Page 126
Chapter 3: ASP.NET Web Server Controls
more of the collection to the end user, and it enables the end user to make multiple selections from the
collection — something that is not possible with the DropDownList control.
A typical ListBox control appears in code as follows:
<
asp:ListBox ID="ListBox1" runat="server"
>
<
asp:ListItem
>
Hematite
<

/asp:ListItem
>
<
asp:ListItem
>
Halite
<
/asp:ListItem
>
<
asp:ListItem
>
Limonite
<
/asp:ListItem
>
<
asp:ListItem
>
Magnetite
<
/asp:ListItem
>
<
/asp:ListBox
>
This generates the browser display illustrated in Figure 3-12.
Figure 3-12
Allowing Users to Select Multiple Items
You can use the

SelectionMode
attribute to let your end users make multiple selections from what is
displayed by the ListBox control. Here’s an example:
<
asp:ListBox ID="ListBox1" runat="server" SelectionMode="Multiple"
>
<
asp:ListItem
>
Hematite
<
/asp:ListItem
>
<
asp:ListItem
>
Halite
<
/asp:ListItem
>
<
asp:ListItem
>
Limonite
<
/asp:ListItem
>
<
asp:ListItem
>

Magnetite
<
/asp:ListItem
>
<
/asp:ListBox
>
The possible values of the
SelectionMode
property include
Single
and
Multiple
. Setting the value to
Multiple
allows the end user to make multiple selections in the list box. The user must hold down either
the Ctrl or Shift keys while making selections. Holding down the Ctrl key enables the user to make a
single selection from the list while maintaining previous selections. Holding down the Shift key enables
a range of multiple selections.
An Example of Using the ListBox Control
The ListBox control shown in Listing 3-12 allows multiple selections to be displayed in the browser when
a user clicks the Submit button. The form should also have an additional text box and button at the top
that enables the end user to add additional items to the ListBox.
Listing 3-12: Using the ListBox control
VB
<
%@ Page Language="VB" %
>
Continued
126

Evjen c03.tex V2 - 01/28/2008 12:33pm Page 127
Chapter 3: ASP.NET Web Server Controls
<
script runat="server"
>
Protected Sub Button1_Click(ByVal sender As Object, _
ByVal e As System.EventArgs)
ListBox1.Items.Add(TextBox1.Text.ToString())
End Sub
Protected Sub Button2_Click(ByVal sender As Object, _
ByVal e As System.EventArgs)
Label1.Text = "You selected from the ListBox:
<
br
>
"
For Each li As ListItem In ListBox1.Items
If li.Selected = True Then
label1.Text += li.Text & "
<
br
>
"
End If
Next
End Sub
<
/script
>
<

html xmlns=" />>
<
head runat="server"
>
<
title
>
Using the ListBox
<
/title
>
<
/head
>
<
body
>
<
form id="form1" runat="server"
>
<
div
>
<
asp:TextBox ID="TextBox1" runat="server"
><
/asp:TextBox
>
<
asp:Button ID="Button1" runat="server" Text="Add an additional item"

OnClick="Button1_Click" /
><
br /
><
br /
>
<
asp:ListBox ID="ListBox1" runat="server" SelectionMode="multiple"
>
<
asp:ListItem
>
Hematite
<
/asp:ListItem
>
<
asp:ListItem
>
Halite
<
/asp:ListItem
>
<
asp:ListItem
>
Limonite
<
/asp:ListItem
>

<
asp:ListItem
>
Magnetite
<
/asp:ListItem
>
<
/asp:ListBox
><
br /
><
br /
>
<
asp:Button ID="Button2" runat="server" Text="Submit"
OnClick="Button2_Click" /
><
br /
><
br /
>
<
asp:Label ID="Label1" runat="server"
><
/asp:Label
>
<
/div
>

<
/form
>
<
/body
>
<
/html
>
C#
<
%@ Page Language="C#" %
>
<
script runat="server"
>
protected void Button1_Click(object sender, EventArgs e)
Continued
127
Evjen c03.tex V2 - 01/28/2008 12:33pm Page 128
Chapter 3: ASP.NET Web Server Controls
{
ListBox1.Items.Add(TextBox1.Text.ToString());
}
protected void Button2_Click(object sender, EventArgs e)
{
Label1.Text = "You selected from the ListBox:
<
br
>

";
foreach (ListItem li in ListBox1.Items) {
if (li.Selected) {
Label1.Text += li.Text + "
<
br
>
";
}
}
}
<
/script
>
This is an interesting example. First, some default items (four common minerals) are already placed inside
the ListBox control. However, the text box and button at the top of the form allow the end user to add
additional minerals to the list. Users can then make one or more selections from the ListBox, including
selections from the items that they dynamically added to the collection. After a user makes his selection
and clicks the button, the
Button2_Click
event iterates through the
ListItem
instances in the collection
and displays only the items that have been selected.
This control works by creating an instance of a
ListItem
object and using its
Selected
property to see
if a particular item in the collection has been selected. The use of the

ListItem
object is not limited
to the ListBox control (although that is what is used here). You can dynamically add or remove items
from a collection and get at items and their values using the
ListItem
object in the DropDownList,
CheckBoxList, and RadioButtonList controls as well. It is a list-control feature.
When this page is built and run, you get the results presented in Figure 3-13.
Figure 3-13
128
Evjen c03.tex V2 - 01/28/2008 12:33pm Page 129
Chapter 3: ASP.NET Web Server Controls
Adding Items to a Collection
To add items to the collection, you can use the following short syntax:
ListBox1.Items.Add(TextBox1.Text)
Look at the source code created in the browser, and you should see something similar to the following
generated dynamically:
<
select size="4" name="ListBox1" multiple="multiple" id="ListBox1"
>
<
option value="Hematite"
>
Hematite
<
/option
>
<
option value="Halite"
>

Halite
<
/option
>
<
option value="Limonite"
>
Limonite
<
/option
>
<
option value="Magnetite"
>
Magnetite
<
/option
>
<
option value="Olivine"
>
Olivine
<
/option
>
<
/select
>
You can see that the dynamically added value is a text item, and you can see its value. You can also add
instances of the ListItem object to get different values for the item name and value:

VB
ListBox1.Items.Add(New ListItem("Olivine", "MG2SIO4"))
C#
ListBox1.Items.Add(new ListItem("Olivine", "MG2SIO4"));
This example adds a new instance of the
ListItem
object — adding not only the textual name of t he item,
but also the value of the item (its chemical formula). It produces the following results in the browser:
<
option value="MG2SIO4"
>
Olivine
<
/option
>
The CheckBox Server Control
Check boxes on a Web form enable your users to either make selections from a collection of items or
specify a value of an item to be yes/no, on/off, or true/false. Use either the CheckBox control or the
CheckBoxList control to include check boxes in your Web forms.
The CheckBox control allows you to place single check boxes on a form; the CheckBoxList control allows
you to place collections of check boxes on the form. You can use multiple CheckBox controls on your
ASP.NET pages, but then you are treating each check b ox as its own element with its own associated
events. On the other hand, the CheckBoxList control allows you to take multiple check boxes and create
specific events for the entire group.
Listing 3-13 shows an example of using the CheckBox control.
Listing 3-13: Using a single instance of the CheckBox control
VB
<
%@ Page Language="VB" %
>

Continued
129
Evjen c03.tex V2 - 01/28/2008 12:33pm Page 130
Chapter 3: ASP.NET Web Server Controls
<
script runat="server"
>
Protected Sub CheckBox1_CheckedChanged(ByVal sender As Object, _
ByVal e As System.EventArgs)
Response.Write("Thanks for your donation!")
End Sub
<
/script
>
<
html xmlns=" />>
<
head runat="server"
>
<
title
>
CheckBox control
<
/title
>
<
/head
>
<

body
>
<
form id="form1" runat="server"
>
<
div
>
<
asp:CheckBox ID="CheckBox1" runat="server" Text="Donate $10 to our cause!"
OnCheckedChanged="CheckBox1_CheckedChanged" AutoPostBack="true" /
>
<
/div
>
<
/form
>
<
/body
>
<
/html
>
C#
<
%@ Page Language="C#" %
>
<
script runat="server"

>
protected void CheckBox1_CheckedChanged(object sender, EventArgs e)
{
Response.Write("Thanks for your donation!");
}
<
/script
>
This produces a page that contains a single check box asking for a monetary donation. Using the
Checked-
Changed
event,
OnCheckedChanged
is used within the CheckBox control. The attribute’s value points to
the
CheckBox1_CheckedChanged
event, which fires when the user checks the check box. It occurs only
if the
AutoPostBack
property is set to
True
(this property is set to
False
by default). Running this page
produces the results shown in Figure 3-14.
Figure 3-14
130
Evjen c03.tex V2 - 01/28/2008 12:33pm Page 131
Chapter 3: ASP.NET Web Server Controls
How to Determine Whether Check Boxes Are Checked

You might not want to use the
AutoPostBack
feature of the check box, but instead want to determine if
the check box is checked after the form is posted back to the server. You can make this check through an
If Then
statement, as illustrated in the following example:
VB
If (CheckBox1.Checked = True) Then
Response.Write("CheckBox is checked!")
End If
C#
if (CheckBox1.Checked == true) {
Response.Write("Checkbox is checked!");
}
This check is done on the CheckBox value using the control’s
Checked
property. The property’s value is
aBooleanvalue,soitiseither
True
(checked) or
False
(not checked).
Assigning a Value to a Check Box
You can also use the
Checked
property to make sure a check box is checked based on other dynamic
values:
VB
If (Member = True) Then
CheckBox1.Checked = True

End If
C#
if (Member == true) {
CheckBox1.Checked = true;
}
Aligning Text Around the Check Box
In the previous check box example, the text appears to the right of the actual check box, as shown in
Figure 3-15.
Figure 3-15
Using the CheckBox control’s
TextAlign
property, you can realign the text so that it appears on the other
side of the check box:
<
asp:CheckBox ID="CheckBox1" runat="server" Text="Donate $10 to our cause!"
OnCheckedChanged="CheckBox1_CheckedChanged" AutoPostBack="true"
TextAlign="Left" /
>
The possible values of the
TextAlign
property are either
Right
(the default setting) or
Left
. This property
is also available to the CheckBoxList, RadioButton, and RadioButtonList controls. Assigning the value
Left
produces the result shown in Figure 3-16.
131
Evjen c03.tex V2 - 01/28/2008 12:33pm Page 132

Chapter 3: ASP.NET Web Server Controls
Figure 3-16
The CheckBoxList Server Control
The CheckBoxList server control is quite similar to the CheckBox control, except that the former enables
you to work with a collection of items rather than a single item. The idea is that a CheckBoxList server
control instance is a collection of related items, each being a check box unto itself.
To see the CheckBoxList control in action, you can build an example that uses Microsoft’s SQL Server to
pull information from the Customers table of the Northwind example database. An example is presented
in Listing 3-14.
Listing 3-14: Dynamically populating a CheckBoxList
VB
<
%@ Page Language="VB" %
>
<
script runat="server"
>
Protected Sub Button1_Click(ByVal sender As Object, _
ByVal e As System.EventArgs)
Label1.Text = "You selected:
<
br
>
"
For Each li As ListItem In CheckBoxList1.Items
If li.Selected = True Then
Label1.Text += li.Text & "
<
br
>

"
End If
Next
End Sub
<
/script
>
<
html xmlns=" />>
<
head runat="server"
>
<
title
>
CheckBoxList control
<
/title
>
<
/head
>
<
body
>
<
form id="form1" runat="server"
>
<
div

>
<
asp:Button ID="Button1" runat="server" Text="Submit Choices"
OnClick="Button1_Click" /
><
br /
><
br /
>
<
asp:Label ID="Label1" runat="server"
><
/asp:Label
>
<
br /
>
<
asp:CheckBoxList ID="CheckBoxList1" runat="server"
DataSourceID="SqlDataSource1" DataTextField="CompanyName"
RepeatColumns="3" BorderColor="Black"
BorderStyle="Solid" BorderWidth="1px"
>
<
/asp:CheckBoxList
>
<
asp:SqlDataSource ID="SqlDataSource1" runat="server"
SelectCommand="SELECT [CompanyName] FROM [Customers]"
ConnectionString="

<
%$ ConnectionStrings:AppConnectionString1 %
>
"
>
<
/asp:SqlDataSource
>
132
Evjen c03.tex V2 - 01/28/2008 12:33pm Page 133
Chapter 3: ASP.NET Web Server Controls
<
/div
>
<
/form
>
<
/body
>
<
/html
>
C#
<
%@ Page Language="C#" %
>
<
script runat="server"
>

protected void Button1_Click(object sender, EventArgs e)
{
Label1.Text = "You selected:
<
br
>
";
foreach (ListItem li in CheckBoxList1.Items) {
if (li.Selected == true) {
Label1.Text += li.Text + "
<
br
>
";
}
}
}
<
/script
>
This ASP.NET page has a SqlDataSource control on the page that pulls the information you need from the
Northwind database. From the
SELECT
statement used in this control, you can see that you are retrieving
the
CompanyName
field from each of the listings in the Customers table.
The CheckBoxList control binds itself to the SqlDataSource control using a few properties:
<
asp:CheckBoxList ID="CheckBoxList1" runat="server"

DataSourceID="SqlDataSource1" DataTextField="CompanyName"
RepeatColumns="3" BorderColor="Black"
BorderStyle="Solid" BorderWidth="1px"
>
<
/asp:CheckBoxList
>
The
DataSourceID
property is used to associate the CheckBoxList control with the results that come
back from the SqlDataSource control. Then the
DataTextField
property is used to retrieve the name of
the field you want to work with from the results. In this example, it is the only one that is available: the
CompanyName
. That’s it! CheckBoxList generates the results you want.
The remaining code consists of styling properties, which.are pretty interesting. The
BorderColor
,
Bor-
derStyle
,and
BorderWidth
properties enable you to put a border around the entire check box list. The
most interesting property is the
RepeatColumns
property, which specifies how many columns (three in
this example) can be used to display the results.
When you run the page, you get the results shown in Figure 3-17.
The

RepeatDirection
property instructs the CheckBoxList control about how to lay out the items bound
to the control on the Web page. Possible values include
Vertical
and
Horizontal
. The default value is
Vertical
. Setting it to
Vertical
with a
RepeatColumn
setting of
3
gives the following results:
CheckBox1 CheckBox5 CheckBox9
CheckBox2 CheckBox6 CheckBox10
CheckBox3 CheckBox7 CheckBox11
CheckBox4 CheckBox8 CheckBox12
133