Professional ASP.NET 3.5 in C# and Visual Basic Part 19 pptx

Evjen c03.tex V2 - 01/28/2008 12:33pm Page 134
Chapter 3: ASP.NET Web Server Controls
Figure 3-17
When the
RepeatDirection
property is set to
Horizontal
, you get the check box items laid out in a
horizontal fashion:
CheckBox1 CheckBox2 CheckBox3
CheckBox4 CheckBox5 CheckBox6
CheckBox7 CheckBox8 CheckBox9
CheckBox10 CheckBox11 CheckBox12
The RadioButton Server Control
The R adioButton server control is quite similar to the CheckBox server control. It places a radio button on
your Web page. Unlike a check box, however, a single radio button on a form does not make much sense.
Radio buttons are generally form elements that require at least two options. A typical set of RadioButton
controls on a page takes the following construction:
<
asp:RadioButton ID="RadioButton1" runat="server" Text="Yes" GroupName="Set1" /
>
<
asp:RadioButton ID="RadioButton2" runat="server" Text="No" GroupName="Set1"/
>
Figure 3-18 shows the result.
Figure 3-18
134
Evjen c03.tex V2 - 01/28/2008 12:33pm Page 135
Chapter 3: ASP.NET Web Server Controls
When you look at the code for the RadioButton control, note the standard
Text

property that places the
text next to the radio button on the Web form. The more important property here is
GroupName
,which
can be set in one of the RadioButton controls to match what it is set to in the other. This enables the radio
buttons on the Web form to work together for the end user. How do they work together? Well, when one
of the radio buttons on the form is checked, the circle associated with the item selected appears filled in.
Any other filled-in circle from the same group in the collection is removed, ensuring that only one of the
radio buttons in the collection is selected.
Listing 3-15 shows an example of using the RadioButton control.
Listing 3-15: Using the RadioButton server control
VB
<
%@ Page Language="VB" %
>
<
script runat="server"
>
Protected Sub RadioButton_CheckedChanged(ByVal sender As Object, _
ByVal e As System.EventArgs)
If RadioButton1.Checked = True Then
Response.Write("You selected Visual Basic")
Else
Response.Write("You selected C#")
End If
End Sub
<
/script
>
<

html xmlns=" />>
<
head runat="server"
>
<
title
>
RadioButton control
<
/title
>
<
/head
>
<
body
>
<
form id="form1" runat="server"
>
<
div
>
<
asp:RadioButton ID="RadioButton1" runat="server" Text="Visual Basic"
GroupName="LanguageChoice" OnCheckedChanged="RadioButton_CheckedChanged"
AutoPostBack="True" /
>
<
asp:RadioButton ID="RadioButton2" runat="server" Text="C#"

GroupName="LanguageChoice" OnCheckedChanged="RadioButton_CheckedChanged"
AutoPostBack="True" /
>
<
/div
>
<
/form
>
<
/body
>
<
/html
>
C#
<
%@ Page Language="C#" %
>
<
script runat="server"
>
protected void RadioButton_CheckedChanged(object sender, EventArgs e)
{
if (RadioButton1.Checked == true) {
Response.Write("You selected Visual Basic");
Continued
135
Evjen c03.tex V2 - 01/28/2008 12:33pm Page 136
Chapter 3: ASP.NET Web Server Controls

}
else {
Response.Write("You selected C#");
}
}
<
/script
>
Like the CheckBox, the RadioButton control has a
CheckedChanged
event that puts an
OnCheckedChanged
attribute in the control. The attribute’s value points to the server-side event that is fired when a selection
is made using o ne of the two radio buttons on the form. Remember that the
AutoPostBack
property
needs to be set to
True
for this to work correctly.
Figure 3-19 shows the results.
Figure 3-19
One advantage that the RadioButton control has over a RadioButtonList control (which is discussed next)
is that it enables you to place other items (text, controls, or images) between the RadioButton controls
themselves. RadioButtonList, however, is always a straight list of radio buttons on your Web page.
The RadioButtonList Ser ver Control
The RadioButtonList server control lets you display a collection of radio buttons on a Web page. The
RadioButtonList control is quite similar to the CheckBoxList and other list controls in that it allows you
to iterate through to see what the user selected, to make counts, or to perform other actions.
A typical RadioButtonList control is written to the page in the following manner:
<

asp:RadioButtonList ID="RadioButtonList1" runat="server"
>
<
asp:ListItem Selected="True"
>
English
<
/asp:ListItem
>
<
asp:ListItem
>
Russian
<
/asp:ListItem
>
<
asp:ListItem
>
Finnish
<
/asp:ListItem
>
<
asp:ListItem
>
Swedish
<
/asp:ListItem
>

<
/asp:RadioButtonList
>
136
Evjen c03.tex V2 - 01/28/2008 12:33pm Page 137
Chapter 3: ASP.NET Web Server Controls
Like the other list controls, this one uses instances of the
ListItem
object for each of the items contained
in the collection. From the example, you can see that if the
Selected
property is set to
True
,oneofthe
ListItem
objects is selected by default when the page is generated for the first time. This produces the
results shown in Figure 3-20.
Figure 3-20
The
Selected
property is not required, but it is a good idea if you want the end user to make some sort
of selection from this collection. Using it makes it impossible to leave the collection blank.
You can use the RadioButtonList control to check for the value selected by the end user in any of your
page methods. Listing 3-16 shows a
Button1_Click
event that pushes out the value selected in the
RadioButtonList collection.
Listing 3-16: Checking the value of the item selected from a RadioButtonList control
VB
<

%@ Page Language="VB" %
>
<
script runat="server"
>
Protected Sub Button1_Click(ByVal sender As Object, _
ByVal e As System.EventArgs)
Label1.Text = "You selected: " & _
RadioButtonList1.SelectedItem.ToString()
End Sub
<
/script
>
C#
<
%@ Page Language="C#" %
>
<
script runat="server"
>
protected void Button1_Click(object sender, EventArgs e)
{
Label1.Text = "You selected: " +
RadioButtonList1.SelectedItem.ToString();
}
<
/script
>
This bit of code gets at the item selected from the RadioButtonList collection of
ListItem

objects. It is how
you work with other list controls that are provided in ASP.NET. The RadioButtonList also affords you
access to the
RepeatColumns
and
RepeatDirection
properties (these were explained in the CheckBoxList
section). You can bind this control to items that come from any o f the data so urce controls so that you
can dynamically create radio button lists on your Web pages.
137
Evjen c03.tex V2 - 01/28/2008 12:33pm Page 138
Chapter 3: ASP.NET Web Server Controls
Image Ser ver Control
The Image server control enables you to work with the images that appear on your Web page from the
server-side code. It is a simple server control, but it can give you the power to determine how your images
are displayed on the browser screen. A typical Image control is constructed in the following manner:
<
asp:Image ID="Image1" runat="server" ImageUrl="~/MyImage1.gif" /
>
The important property here is
ImageUrl
. It points to the file location of the image. In this case, the
location is specified as the
MyImage.gif
file.
Listing 3-17 shows an example of how to dynamically change the
ImageUrl
property.
Listing 3-17: Changing the ImageUrl property dynamically
VB

<
%@ Page Language="VB" %
>
<
script runat="server"
>
Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
Image1.ImageUrl = "~/MyImage2.gif"
End Sub
<
/script
>
<
html xmlns=" />>
<
head runat="server"
>
<
title
>
Image control
<
/title
>
<
/head
>
<
body
>

<
form id="form1" runat="server"
>
<
div
>
<
asp:Image ID="Image1" runat="server" ImageUrl="~/MyImage1.gif" /
><
br /
>
<
br /
>
<
asp:Button ID="Button1" runat="server" Text="Change Image"
OnClick="Button1_Click" /
>
<
/div
>
<
/form
>
<
/body
>
<
/html
>

C#
<
%@ Page Language="C#" %
>
<
script runat="server"
>
protected void Button1_Click(object sender, EventArgs e)
{
Image1.ImageUrl = "~/MyImage2.gif";
}
<
/script
>
In this example, an image (
MyImage1.gif
) is shown in the browser when the page is loaded for the first
time. When the end user clicks the button on the page, a new image (
MyImage2.gif
)isloadedinthe
postback process.
138
Evjen c03.tex V2 - 01/28/2008 12:33pm Page 139
Chapter 3: ASP.NET Web Server Controls
Special circumstances can prevent end users from viewing an image that is part of your Web page. They
might be physically unable to see the image, or they might be using a text-only browser. In these cases,
their browsers look for the
<
img
> element’s

longdesc
attribute that points to a file containing a long
description of the image that is displayed.
For these cases, the Image server control includes a
DescriptionUrl
attribute. The value assigned to it
is a text file that contains a thorough description of the image with which it is associated. Here is how to
use it:
<
asp:Image ID="Image1" runat="server" DescriptionUrl="~/Image01.txt" /
>
This code produces the following results in the browser:
<
img id="Image1" src="INETA.jpg" longdesc="Image01.txt" alt="" /
>
Remember that the image does not support the user clicking the image. If you want to program events
based on button clicks, use the ImageButton server control discussed earlier in this chapter.
Table Ser ver Control
Tables are one of the Web page’s more common elements because the HTML <
table
> element is one
possible format utilized for controlling the layout of your Web page (CSS being the other). The typical
construction of the Table server control is as follows:
<
asp:Table ID="Table1" runat="server"
>
<
asp:TableRow Runat="server" Font-Bold="True"
ForeColor="Black" BackColor="Silver"
>

<
asp:TableHeaderCell
>
First Name
<
/asp:TableHeaderCell
>
<
asp:TableHeaderCell
>
Last Name
<
/asp:TableHeaderCell
>
<
/asp:TableRow
>
<
asp:TableRow
>
<
asp:TableCell
>
Bill
<
/asp:TableCell
>
<
asp:TableCell
>

Evjen
<
/asp:TableCell
>
<
/asp:TableRow
>
<
asp:TableRow
>
<
asp:TableCell
>
Devin
<
/asp:TableCell
>
<
asp:TableCell
>
Rader
<
/asp:TableCell
>
<
/asp:TableRow
>
<
/asp:Table
>

This produces the simple three-rowed table shown in Figure 3-21.
Figure 3-21
You can do a lot with the Table server control. For example, you can dynamically add rows to the table,
as illustrated in Listing 3-18.
139
Evjen c03.tex V2 - 01/28/2008 12:33pm Page 140
Chapter 3: ASP.NET Web Server Controls
Listing 3-18: Dynamically adding rows to the table
VB
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)
Dim tr As New TableRow()
Dim fname As New TableCell()
fname.Text = "Scott"
tr.Cells.Add(fname)
Dim lname As New TableCell()
lname.Text = "Hanselman"
tr.Cells.Add(lname)
Table1.Rows.Add(tr)
End Sub
C#
protected void Page_Load(object sender, EventArgs e)
{
TableRow tr = new TableRow();
TableCell fname = new TableCell();
fname.Text = "Scott";
tr.Cells.Add(fname);
TableCell lname = new TableCell();
lname.Text = "Hanselman";
tr.Cells.Add(lname);
Table1.Rows.Add(tr);

}
To add a single row to a Table control, you have to create new instances of the
TableRow
and
TableCell
objects. You create the
TableCell
objects first and then place them within a
TableRow
object that is added
to a
Table
object.
The Table server control is enhanced with some extra features. One of the simpler new features is the
capability to add captions to the tables on Web pages. Figure 3-22 shows a table with a caption.
To give your table a caption, simply use the new
Caption
attribute in the Table control, as illustrated in
Listing 3-19.
Listing 3-19: Using the new Caption attribute
<
%@ Page Language="VB" %
>
<
html xmlns=" />>
<
head runat="server"
>
<
title

>
Table Server Control
<
/title
>
<
/head
>
140
Evjen c03.tex V2 - 01/28/2008 12:33pm Page 141
Chapter 3: ASP.NET Web Server Controls
<
body
>
<
form id="form1" runat="server"
>
<
asp:Table ID="Table1" runat="server"
Caption="
<
b
>
Table 1:
<
/b
>
This is an example of a caption above a table."
BackColor="Gainsboro"
>

<
asp:TableRow ID="Tablerow1" Runat=server
>
<
asp:TableCell ID="Tablecell1" Runat="server"
>
Lorem ipsum dolor sit
amet, consectetuer adipiscing elit. Duis vel justo. Aliquam
adipiscing. In mattis volutpat urna. Donec adipiscing, nisl eget
dictum egestas, felis nulla ornare ligula, ut bibendum pede augue
eu augue. Sed vel risus nec urna pharetra imperdiet. Aenean
semper. Sed ullamcorper auctor sapien. Suspendisse luctus. Ut ac
nibh. Nam lorem. Aliquam dictum aliquam purus.
<
/asp:TableCell
>
<
/asp:TableRow
>
<
/asp:Table
>
<
/form
>
<
/body
>
<
/html

>
Figure 3-22
By default, the caption is placed at the top center of the table, but you can control where it is placed by
using another new attribute —
CaptionAlign
. Its possible settings include
Bottom
,
Left
,
NotSet
,
Right
,
and
Top
.
In the past, an
<
asp:Table
> element contained any number of <
asp:TableRow
> elements. Now you
have some additional elements that can be nested within the
<
asp:Table
> element. These new elements
include
<
asp:TableHeaderRow

> and <
asp:TableFooterRow
>. They add either a header or footer to
your table, enabling you to use the Table server control to page through lots of data but still retain some
text in place to indicate the type of data being handled. This is quite a powerful feature when you work
with mobile applications that dictate that sometimes end users can move through only a few records at a
time.
141
Evjen c03.tex V2 - 01/28/2008 12:33pm Page 142
Chapter 3: ASP.NET Web Server Controls
The Calendar Server Control
The Calendar server control is a rich control that enables you to place a full-featured calendar directly
on your Web pages. It allows for a high degree of customization to ensure that it looks and behaves in a
unique manner. The Calendar control, in its simplest form, is coded in the following manner:
<
asp:Calendar ID="Calendar1" runat="server"
>
<
/asp:Calendar
>
This code produces a calendar on your Web page without any styles added, as shown in Figure 3-23.
Figure 3-23
Making a Date Selection from the Calendar Control
The calendar allows you to navigate through the months of the year and to select specific days in t he
exposed month. A simple application that enables the user to select a day of the month is shown in
Listing 3-20.
Listing 3-20: Selecting a single day in the Calendar control
VB
<
%@ Page Language="VB" %

>
<
script runat="server"
>
Protected Sub Calendar1_SelectionChanged(ByVal sender As Object, _
ByVal e As System.EventArgs)
Response.Write("You selected: " & _
Calendar1.SelectedDate.ToShortDateString())
End Sub
<
/script
>
<
html xmlns=" />>
<
head id="Head1" runat="server"
>
<
title
>
Using the Calendar Control
<
/title
>
<
/head
>
142
Evjen c03.tex V2 - 01/28/2008 12:33pm Page 143
Chapter 3: ASP.NET Web Server Controls

<
body
>
<
form id="form1" runat="server"
>
<
div
>
<
asp:Calendar ID="Calendar1" runat="server"
OnSelectionChanged="Calendar1_SelectionChanged"
>
<
/asp:Calendar
>
<
/div
>
<
/form
>
<
/body
>
<
/html
>
C#
<

%@ Page Language="C#" %
>
<
script runat="server"
>
protected void Calendar1_SelectionChanged(object sender, EventArgs e)
{
Response.Write("You selected: " +
Calendar1.SelectedDate.ToShortDateString());
}
<
/script
>
Running this application pulls up the calendar in the browser. The end user can then select a single date
in it. After a date is selected, the
Calendar1_SelectionChanged
event is triggered and makes use of the
OnSelectionChange
attribute. This event writes the value of the selected date to the screen. The result is
shown in Figure 3-24.
Figure 3-24
143