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

Evjen c03.tex V2 - 01/28/2008 12:33pm Page 154
Chapter 3: ASP.NET Web Server Controls
The advantage of using the Panel control to encapsulate a set of other elements is that you can manipulate
these elements as a single unit using one attribute set in the Panel control itself. For example, setting the
Font-Bold
attribute to
True
causes each item within the Panel control to adopt this attribute.
The new addition to the Panel control is the capability to scroll with scrollbars that appear automati-
cally depending on the amount of information that Panel control holds. You can even specify how the
scrollbars should appear.
For an example of using scrollbars, look at a long version of the Lorem Ipsum text (found at
www.lipsum.
com
) and place that text within the Panel control, as shown in Listing 3-27.
Listing 3-27: Using the new scrollbar feature with the Panel server control
<
%@ Page Language="VB" %
>
<
html
>
<
head runat="server"
>
<
title
>
Panel Server Control Page
<
/title

>
<
/head
>
<
body
>
<
form id="form1" runat="server"
>
<
asp:Panel ID="Panel1" runat="server" Height="300" Width="300"
ScrollBars="auto"
>
<
p
>
Lorem ipsum dolor sit amet
<
/p
>
<
/asp:Panel
>
<
/form
>
<
/body
>

<
/html
>
By assigning values to the
Height
and
Width
attributes of the Panel server control and using the
Scroll-
Bars
attribute (in this case, set to
Auto
), you can display the information it contains within the defined
area using scrollbars (see Figure 3-29).
As you can see, a single vertical scrollbar has b een added to the set area of 300 × 300 pixels. The Panel
control wraps the text by default as required. To change this behavior, use the new
Wrap
attribute, which
takes a
Boolean
value:
<
asp:Panel ID="Panel1" runat="server"
Height="300" Width="300" ScrollBars="Auto"
Wrap="False" /
>
Turning off wrapping may cause the horizontal scrollbar to turn on (depending on what is contained in
the panel section).
If you do not want to let the ASP.NET engine choose which scrollbars to activate, you can actually make
that decision by using the

ScrollBars
attribute. In addition to
Auto
, its values include
None
,
Horizontal
,
Vertical
,and
Both
.
Another interesting attribute that enables you to change the behavior of the Panel control is
Horizontal-
Align
. It enables you to set how the content in the Panel control is horizontally aligned. The possible
values of this attribute include
NotSet
,
Center
,
Justify
,
Left
,and
Right
. Figure 3-30 shows a collection
of Panel controls with different horizontal alignments.
154
Evjen c03.tex V2 - 01/28/2008 12:33pm Page 155

Chapter 3: ASP.NET Web Server Controls
Figure 3-29
Center aligned Justified Left align Right align
Figure 3-30
It is also possible to move the vertical scrollbar to the left side of the Panel control by using the
Direction
attribute.
Direction
can be set to
NotSet
,
LeftToRight
,and
RightToLeft
. A setting of
RightToLeft
is
ideal when you are dealing with languages that are written from right to left (some Asian languages, for
example). However, that setting also moves the scrollbar to the left side of the Panel control. If the scroll-
bar is moved to the left side and the
HorizontalAlign
attribute is set to
Left
, your content resembles
Figure 3-31.
155
Evjen c03.tex V2 - 01/28/2008 12:33pm Page 156
Chapter 3: ASP.NET Web Server Controls
Figure 3-31
The PlaceHolder Server Control

The PlaceHolder server control works just as its name implies — it is a placeholder for you to interject
objects dynamically into your page. Think of it as a marker with which you can add other controls. The
capability to add controls to a page at a specific point also works with the Panel control.
To see how it works, insert a PlaceHolder control into your page and then add controls to it from your
server-side code in the manner shown in Listing 3-28.
Listing 3-28: Using PlaceHolder to add controls to a page dynamically
VB
Dim NewLabelControl As New Label()
NewLabelControl.Text = "Hello there"
PlaceHolder1.Controls.Add(NewLabelControl)
C#
Label NewLabelControl = new Label();
NewLabelControl.Text = "Hello there";
PlaceHolder1.Controls.Add(NewLabelControl);
This example creates a new instance of a Label control and populates it with a value before it is
added to the PlaceHolder control. You can add more than one control to a single instance of a
PlaceHolder control.
156
Evjen c03.tex V2 - 01/28/2008 12:33pm Page 157
Chapter 3: ASP.NET Web Server Controls
BulletedList Server Control
One common HTML Web page element is a collection of items in a bulleted list. The BulletedList server
control is meant to display a bulleted list of items easily in an ordered (using the HTML
<
ol
> element)
or unordered (using the HTML
<
ul
> element) fashion. In addition, the control can determine the style

used for displaying the list.
The BulletedList control can be constructed of any number of
<
asp:ListItem
> controls or can be
data-bound to a data source of some kind and populated based upon the contents retrieved. Listing
3-29 shows a bulleted list in its simplest form.
Listing 3-29: A simple BulletedList control
<
%@ Page Language="VB" %
>
<
html xmlns=" />>
<
head runat="server"
>
<
title
>
BulletedList Server Control
<
/title
>
<
/head
>
<
body
>
<

form id="form1" runat="server"
>
<
asp:BulletedList ID="Bulletedlist1" runat="server"
>
<
asp:ListItem
>
United States
<
/asp:ListItem
>
<
asp:ListItem
>
United Kingdom
<
/asp:ListItem
>
<
asp:ListItem
>
Finland
<
/asp:ListItem
>
<
asp:ListItem
>
Russia

<
/asp:ListItem
>
<
asp:ListItem
>
Sweden
<
/asp:ListItem
>
<
asp:ListItem
>
Estonia
<
/asp:ListItem
>
<
/asp:BulletedList
>
<
/form
>
<
/body
>
<
/html
>
The use of the <

asp:BulletedList
> element, along with <
asp:ListItem
> elements, produces a simple
bulleted list output like the one shown in Figure 3-32.
Figure 3-32
157
Evjen c03.tex V2 - 01/28/2008 12:33pm Page 158
Chapter 3: ASP.NET Web Server Controls
The BulletedList control also enables you to easily change the style of the list with just one or two
attributes. The
BulletStyle
attribute changes the style of the bullet that precedes each line of the list.
It has possible values of
Numbered
,
LowerAlpha
,
UpperAlpha
,
LowerRoman
,
UpperRoman
,
Disc
,
Circle
,
Square
,

NotSet
,and
CustomImage
. Figure 3-33 shows examples of these styles (minus the
CustomImage
setting that enables you to use any image of your choice).
Figure 3-33
You can change the starting value of the first item in any of the numbered styles (
Numbered
,
LowerAl-
pha
,
UpperAlpha
,
LowerRoman
,
UpperRoman
)byusingthe
FirstBulletNumber
attribute. If you set the
attribute’s value to
5
when you use the
UpperRoman
setting, for example, you get the format illustrated in
Figure 3-34.
158
Evjen c03.tex V2 - 01/28/2008 12:33pm Page 159
Chapter 3: ASP.NET Web Server Controls

Figure 3-34
To employ images as bullets, use the
CustomImage
setting in the BulletedList control. You must also use
the
BulletImageUrl
attribute in the following manner:
<
asp:BulletedList ID="Bulletedlist1" runat="server"
BulletStyle="CustomImage" BulletImageUrl="~/myImage.gif"
>
Figure 3-35 shows an example of image b ullets.
Figure 3-35
The BulletedList control has an attribute called
DisplayMode
, which has three possible values:
Text
,
HyperLink
,and
LinkButton
.
Text
is the default and has been used so far in the examples. Using
Text
means that the items in the bulleted list are laid out only as text.
HyperLink
means that each of the items
is turned into a hyperlink — any user clicking the link is redirected to another page, which is specified
by the

<
asp:ListItem
> control’s
Value
attribute. A value of
LinkButton
turns each b ulleted list item
into a hyperlink that posts back to the same page. It enables you to retrieve the selection that the end user
makes, as illustrated in Listing 3-30.
159
Evjen c03.tex V2 - 01/28/2008 12:33pm Page 160
Chapter 3: ASP.NET Web Server Controls
Listing 3-30: Using the LinkButton value for the DisplayMode attribute
VB
<
%@ Page Language="VB"%
>
<
script runat="server"
>
Protected Sub BulletedList1_Click(ByVal sender As Object, _
ByVal e As System.Web.UI.WebControls.BulletedListEventArgs)
Label1.Text = "The index of item you selected: " & e.Index & _
"
<
br
>
The value of the item selected: " & _
BulletedList1.Items(e.Index).Text
End Sub

<
/script
>
<
html xmlns=" />>
<
head runat="server"
>
<
title
>
BulletedList Server Control
<
/title
>
<
/head
>
<
body
>
<
form id="form1" runat="server"
>
<
asp:BulletedList ID="BulletedList1" runat="server"
OnClick="BulletedList1_Click" DisplayMode="LinkButton"
>
<
asp:ListItem

>
United States
<
/asp:ListItem
>
<
asp:ListItem
>
United Kingdom
<
/asp:ListItem
>
<
asp:ListItem
>
Finland
<
/asp:ListItem
>
<
asp:ListItem
>
Russia
<
/asp:ListItem
>
<
asp:ListItem
>
Sweden

<
/asp:ListItem
>
<
asp:ListItem
>
Estonia
<
/asp:ListItem
>
<
/asp:BulletedList
>
<
asp:Label ID="Label1" runat="server"
>
<
/asp:Label
>
<
/form
>
<
/body
>
<
/html
>
C#
<

%@ Page Language="C#"%
>
<
script runat="server"
>
protected void BulletedList1_Click(object sender,
System.Web.UI.WebControls.BulletedListEventArgs e)
{
Label1.Text = "The index of item you selected: " + e.Index +
"
<
br
>
The value of the item selected: " +
BulletedList1.Items[e.Index].Text;
}
<
/script
>
In this example, the
DisplayMode
attribute is set to
LinkButton
,andthe
OnClick
attribute is used to point
to the
BulletedList1_Click
event.
BulletedList1_Click

uses the
BulletedListEventArgs
object,
which only exposes the
Index
property. Using that, you can determine the index number of the item
selected.
160
Evjen c03.tex V2 - 01/28/2008 12:33pm Page 161
Chapter 3: ASP.NET Web Server Controls
You can directly access the
Text
value of a selected item by using the
Items
property, or you can use the
same property to populate an instance of the
ListItem
object, as shown here:
VB
Dim blSelectedValue As ListItem = BulletedList1.Items(e.Index)
C#
ListItem blSelectedValue = BulletedList1.Items[e.Index];
Now that you have seen how to create bulleted lists with items that you declaratively place in the code,
look at how to create dynamic bulleted lists from items that are stored in a data store. The following
example shows how to use the BulletedList control to data-bind to results coming from a data store; in it,
all information is retrieved from an XML file.
The first step is to create the XML in Listing 3-31.
Listing 3-31: FilmChoices.xml
<
?xml version="1.0" encoding="utf-8"?

>
<
FilmChoices
>
<
Film
Title="Close Encounters of the Third Kind"
Year="1977"
Director="Steven Spielberg" /
>
<
Film
Title="Grease"
Year="1978"
Director="Randal Kleiser" /
>
<
Film
Title="Lawrence of Arabia"
Year="1962"
Director="David Lean" /
>
<
/FilmChoices
>
To populate the BulletedList server control with the
Title
attribute from the
FilmChoices.xml
file, use

an XmlDataSource control to access the file, as illustrated in Listing 3-32.
Listing 3-32: Dynamically populating a BulletedList server control
<
%@ Page Language="VB" %
>
<
html xmlns=" />>
<
head runat="server"
>
<
title
>
BulletedList Server Control
<
/title
>
<
/head
>
<
body
>
<
form id="form1" runat="server"
>
<
asp:BulletedList ID="BulletedList1" runat="server"
DataSourceID="XmlDataSource1" DataTextField="Title"
>

<
/asp:BulletedList
>
<
asp:XmlDataSource ID="XmlDataSource1" runat="server"
DataFile="~/FilmChoices.xml" XPath="FilmChoices/Film"
>
161
Evjen c03.tex V2 - 01/28/2008 12:33pm Page 162
Chapter 3: ASP.NET Web Server Controls
<
/asp:XmlDataSource
>
<
/form
>
<
/body
>
<
/html
>
In this example, you use the
DataSourceID
attribute to point to the XmlDataSource control (as you would
with any control that can be bound to one of the data source controls). After you are connected to the data
source control, you specifically point to the
Title
attribute using the
DataTextField

attribute. After the
two server controls are connected and the page is run, you get a bulleted list that is completely generated
from the contents of the XML file. Figure 3-36 shows the result.
Figure 3-36
The XmlDataSource server control has some limitations in that the binding to the BulletedList server
control worked i n the previous example only because the
Title
value was an XML attribute and not a
subelement. The XmlDataSource control exposes XML attributes as properties only when databinding.
If you are going to want to work with subelements, then you are going to have to perform an XSLT
transform using the XmlDataSource control’s
TransformFile
attribute to turn elements into attributes.
HiddenField Server Control
For many years now, developers have been using hidden fields in their Web pages to work with state
management. The
<
input type="hidden"
> element is ideal for storing items that have no security con-
text to them. These items are simply placeholders for data points that you want to store in the page itself
instead of using the
Session
object or intermingling the data with the view state of the page. View state
is another great way to store information in a page, but many developers turn off this feature to avoid
corruption of the view state or possible degradation of page performance.
Any time a hidden field is placed within a Web page, it is not interpreted in the browser in any fashion,
although it is completely viewable by end users if they look at the source of the HTML page.
Listing 3-33 is an example of using the HiddenField server control to hold a GUID that can be used
from page to page simply by carrying over its value as the end user navigates through your
application.

162
Evjen c03.tex V2 - 01/28/2008 12:33pm Page 163
Chapter 3: ASP.NET Web Server Controls
Listing 3-33: Working with the HiddenField server control
VB
<
%@ Page Language="VB" %
>
<
script runat="server" language="vb"
>
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)
HiddenField1.Value = System.Guid.NewGuid().ToString()
End Sub
<
/script
>
<
html xmlns=" />>
<
head runat="server"
>
<
title
>
HiddenField Server Control
<
/title
>
<

/head
>
<
body
>
<
form id="form1" runat="server"
>
<
asp:HiddenField ID="HiddenField1" runat="Server" /
>
<
/form
>
<
/body
>
<
/html
>
C#
<
%@ Page Language="C#"%
>
<
script runat="server"
>
protected void Page_Load(object sender, EventArgs e)
{
HiddenField1.Value = System.Guid.NewGuid().ToString();

}
<
/script
>
In this example, the
Page_Load
event populates the
HiddenField1
control with a GUID. You can see the
hidden field and its value by looking at the source of the blank HTML page that is created. You should
see a result similar to the following (the GUID will have a different value, of course):
<
input type="hidden" name="HiddenField1" id="HiddenField1"
value="a031e77c-379b-4b4a-887c-244ee69584d5" /
>
On the page postback, ASP.NET can detect whether the HiddenField server control has changed its
value since the last post. This enables you to change the HiddenField value with client-side script and
then work with the changes in a page event.
The HiddenField server control has an event called
ValueChanged
that you can use when the value is
changed:
VB
Protected Sub HiddenField1_ValueChanged(ByVal sender As Object, _
ByVal e As System.EventArgs)
’ Handle event here
End Sub
163