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

Evjen c20.tex V2 - 01/28/2008 3:13pm Page 978
Chapter 20: ASP.NET AJAX Control Toolkit
<
title
>
SlideShowExtender Control
<
/title
>
<
/head
>
<
body
>
<
form id="form1" runat="server"
>
<
div
>
<
asp:ScriptManager ID="ScriptManager1" runat="server"
>
<
/asp:ScriptManager
>
<
asp:Panel ID="Panel1" runat="server" Width="300px"
HorizontalAlign="Center"
>

<
cc1:SlideShowExtender ID="SlideShowExtender1" runat="server"
ImageTitleLabelID="LabelTitle" TargetControlID="Image1"
UseContextKey="True" NextButtonID="ButtonNext"
PlayButtonID="ButtonPlay"
PreviousButtonID="ButtonPrevious"
SlideShowServiceMethod="GetSlides"
ImageDescriptionLabelID="LabelDescription"
>
<
/cc1:SlideShowExtender
>
<
asp:Label ID="LabelTitle" runat="server" Text="Label"
Font-Bold="True"
><
/asp:Label
><
br /
><
br /
>
<
asp:Image ID="Image1" runat="server"
ImageUrl="Images/Garden.jpg" /
><
br /
>
<
asp:Label ID="LabelDescription" runat="server"

Text="Label"
><
/asp:Label
><
br /
><
br /
>
<
asp:Button ID="ButtonPrevious" runat="server" Text="Previous" /
>
<
asp:Button ID="ButtonNext" runat="server" Text="Next" /
>
<
asp:Button ID="ButtonPlay" runat="server" /
>
<
/asp:Panel
>
<
/div
>
<
/form
>
<
/body
>
<

/html
>
The SlideShowExtender control has a lot of available properties available. You can specify the loca-
tion where you are defining the image title and description using the
ImageTitleLabelID
and the
ImageDescriptionLabelID
properties. In addition to that, this page contains three Button controls. One
to act as the Previous button, another for the Next button, and the final one as the Play button. However,
it is important to note that when the Play button is clicked (to start the slideshow), it turns into the Stop
button.
The
SlideShowServiceMethod
property is important because it points to the server-side method that
returns the images that are part of the slide show. In this case, it is referring to a method called GetSlides,
which is represented here in Listing 20-29.
Listing 20-29: The GetSlides method implementation
VB
Partial Class SlideShowExtender
Inherits System.Web.UI.Page
<
System.Web.Services.WebMethodAttribute()
>
_
<
System.Web.Script.Services.ScriptMethodAttribute()
>
_
978
Evjen c20.tex V2 - 01/28/2008 3:13pm Page 979

Chapter 20: ASP.NET AJAX Control Toolkit
Public Shared Function GetSlides(ByVal contextKey As System.String) _
As AjaxControlToolkit.Slide()
Return New AjaxControlToolkit.Slide() { _
New AjaxControlToolkit.Slide("Images/Creek.jpg",
"The Creek", "This is a picture of a creek."),
New AjaxControlToolkit.Slide("Images/Dock.jpg",
"The Dock", "This is a picture of a Dock."),
New AjaxControlToolkit.Slide("Images/Garden.jpg",
"The Garden", "This is a picture of a Garden.") }
End Function
End Class
C#
public partial class SlideShowExtender : System.Web.UI.Page
{
[System.Web.Services.WebMethodAttribute(),
System.Web.Script.Services.ScriptMethodAttribute()]
public static AjaxControlToolkit.Slide[] GetSlides(string contextKey)
{
return new AjaxControlToolkit.Slide[] {
new AjaxControlToolkit.Slide("Images/Creek.jpg",
"The Creek", "This is a picture of a creek."),
new AjaxControlToolkit.Slide("Images/Dock.jpg",
"The Dock", "This is a picture of a Dock."),
new AjaxControlToolkit.Slide("Images/Garden.jpg",
"The Garden", "This is a picture of a Garden.") };
}
}
With the code-behind in place, the SlideShowExtender has a server-side method to call for t he photos.
This method, called

GetSlides()
, returns an array of
Slide
objects which require the location of the
object (the path), the title, and the description. When running this page, you get something similar to
the following results shown in Figure 20-37.
Pressing the Play button on the page will rotates the images until they are done. They will not repeat in
a loop unless you have the SlideShowExtender control’s
Loop
property set to
True
. (It is set to
False
by
default.)
The other important property to pay attention to is the
PlayInterval
property. The value of this property
is an integer that represents the number of milliseconds that the browser will take to change to the next
photo in the series of images. By default, this is set to
3000
milliseconds.
TextBoxWatermarkExtender
The TextBoxWatermarkExtender control allows you to put instructions within controls for the end
users, which gives them a better understanding of what to use the control for. This can be text or even
images (when using CSS). Listing 20-30 shows an example of using this control with a TextBox server
control.
979
Evjen c20.tex V2 - 01/28/2008 3:13pm Page 980
Chapter 20: ASP.NET AJAX Control Toolkit

Listing 20-30: Using the TextBoxWatermarkExtender control with a TextBox control
<
%@ Page Language="C#" %
>
<
%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit"
TagPrefix="cc1" %
>
<
html xmlns=" />>
<
head runat="server"
>
<
title
>
TextBoxWatermarkExtender Control
<
/title
>
<
/head
>
<
body
>
<
form id="form1" runat="server"
>
<

div
>
<
asp:ScriptManager ID="ScriptManager1" runat="server"
>
<
/asp:ScriptManager
>
<
cc1:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender1" runat="server"
WatermarkText="Enter in something here!" TargetControlID="TextBox1"
>
<
/cc1:TextBoxWatermarkExtender
>
<
asp:TextBox ID="TextBox1" runat="server"
><
/asp:TextBox
>
<
/div
>
<
/form
>
<
/body
>
<

/html
>
Figure 20-37
980
Evjen c20.tex V2 - 01/28/2008 3:13pm Page 981
Chapter 20: ASP.NET AJAX Control Toolkit
In this case, the TextBoxWatermarkExtender control is associated with a simple TextBox control and
uses the
WatermarkText
property to provide the text that will appear inside the actual TextBox control.
Figure 20-38 shows the results of the code from this listing.
Figure 20-38
The text in the image from Figure 20-38 is straight text with no style inside of the TextBox control.
When the end user clicks inside of the TextBox control, the text will disappear and the cursor will be
properly placed at the beginning of the text box.
To apply some style to the content that you use as a watermark, you can use the
WatermarkCssClass
property. You can change the code to include a bit of style as shown in Listing 20-31.
Listing 20-31: Applying style to the watermark
<
%@ Page Language="C#" %
>
<
%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit"
TagPrefix="cc1" %
>
<
html xmlns=" />>
<
head runat="server"

>
<
title
>
TextBoxWatermarkExtender Control
<
/title
>
<
style type="text/css"
>
.watermark
{
width:150px;
font:Verdana;
font-style:italic;
color:GrayText;
}
<
/style
>
<
/head
>
<
body
>
<
form id="form1" runat="server"
>

<
div
>
<
asp:ScriptManager ID="ScriptManager1" runat="server"
>
<
/asp:ScriptManager
>
<
cc1:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender1" runat="server"
WatermarkText="Enter in something here!" TargetControlID="TextBox1"
WatermarkCssClass="watermark"
>
<
/cc1:TextBoxWatermarkExtender
>
<
asp:TextBox ID="TextBox1" runat="server"
><
/asp:TextBox
>
<
/div
>
<
/form
>
<
/body

>
<
/html
>
This time, the WatermarkCssClass property is used and points to the inline CSS class,
watermark
,which
is on the page. Running this page, you will see the style applied as shown in Figure 20-39.
981
Evjen c20.tex V2 - 01/28/2008 3:13pm Page 982
Chapter 20: ASP.NET AJAX Control Toolkit
Figure 20-39
ToggleButtonExtender
The ToggleButtonExtender control works with CheckBox controls and allows you to use an image of
your own instead of the standard check box images that the CheckBox controls typically use. Using
the ToggleButtonExtender control, you are able to specify images for checked, unchecked, and disabled
statuses. Listing 20-32 shows an example of using this control.
Listing 20-32: Using the ToggleButtonExtender control
<
%@ Page Language="C#" %
>
<
%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit"
TagPrefix="cc1" %
>
<
html xmlns=" />>
<
head runat="server"
>

<
title
>
ToggleButtonExtender Control
<
/title
>
<
/head
>
<
body
>
<
form id="form1" runat="server"
>
<
div
>
<
asp:ScriptManager ID="ScriptManager1" runat="server"
>
<
/asp:ScriptManager
>
<
cc1:MutuallyExclusiveCheckBoxExtender
ID="MutuallyExclusiveCheckBoxExtender1" runat="server" Key="MyCheckBoxes"
TargetControlID="CheckBox1"
>

<
/cc1:MutuallyExclusiveCheckBoxExtender
>
<
cc1:MutuallyExclusiveCheckBoxExtender
ID="MutuallyExclusiveCheckBoxExtender2" runat="server" Key="MyCheckBoxes"
TargetControlID="CheckBox2"
>
<
/cc1:MutuallyExclusiveCheckBoxExtender
>
<
cc1:ToggleButtonExtender ID="ToggleButtonExtender1" runat="server"
TargetControlID="CheckBox1" UncheckedImageUrl="Images/Unchecked.gif"
CheckedImageUrl="Images/Checked.gif" CheckedImageAlternateText="Checked"
UncheckedImageAlternateText="Not Checked" ImageWidth="25"
ImageHeight="25"
>
<
/cc1:ToggleButtonExtender
>
<
asp:CheckBox ID="CheckBox1" runat="server" Text="&nbsp;Option One" /
>
<
cc1:ToggleButtonExtender ID="ToggleButtonExtender2" runat="server"
TargetControlID="CheckBox2" UncheckedImageUrl="Images/Unchecked.gif"
CheckedImageUrl="Images/Checked.gif" CheckedImageAlternateText="Checked"
UncheckedImageAlternateText="Not Checked" ImageWidth="25"
ImageHeight="25"

>
<
/cc1:ToggleButtonExtender
>
<
asp:CheckBox ID="CheckBox2" runat="server" Text="&nbsp;Option Two" /
>
<
/div
>
<
/form
>
<
/body
>
<
/html
>
982
Evjen c20.tex V2 - 01/28/2008 3:13pm Page 983
Chapter 20: ASP.NET AJAX Control Toolkit
This page has two CheckBox controls. Each check box has an associated ToggleButtonExtender control
along with a MutuallyExclusiveCheckBoxExtender control to tie the two check boxes together. The Tog-
gleButtonExtender control uses the
CheckedImageUrl
and the
UncheckedImageUrl
properties to specify
the appropriate images to use. Then, if images are disabled by the end user’s browser instance, the text

that is provided in the
CheckedImageAlternateText
and
UncheckedImageAlternateText
properties is
used instead. You will also have to specify values for the
ImageWidth
and
ImageHeight
properties for the
page to run.
Running this page, you get results similar to those presented in Figure 20-40.
Figure 20-40
UpdatePanelAnimationExtender
The UpdatePanelAnimationExtender control allows you to apply an animation to a Panel control for two
specific events. The first is the
OnUpdating
event and the second is the
OnUpdated
event. You can then
use the animation framework provided by ASP.NET AJAX to change the page’s style based on these two
events. Listing 20-33 shows an example of using the
OnUpdated
event when the end user clicks a specific
date within a
Calendar
control contained within the UpdatePanel control on the page.
Listing 20-33: Using animations o n the OnUpdated event
VB
<

%@ Page Language="VB" %
>
<
%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit"
TagPrefix="cc1" %
>
<
script runat="server"
>
Protected Sub Calendar1_SelectionChanged(ByVal sender As Object, _
ByVal e As EventArgs)
Label1.Text = "The date selected is " &
Calendar1.SelectedDate.ToLongDateString()
End Sub
<
/script
>
<
html xmlns=" />>
<
head runat="server"
>
<
title
>
UpdatePanelAnimationExtender Control
<
/title
>
<

/head
>
<
body
>
<
form id="form1" runat="server"
>
<
div
>
<
asp:ScriptManager ID="ScriptManager1" runat="server"
>
<
/asp:ScriptManager
>
<
cc1:UpdatePanelAnimationExtender ID="UpdatePanelAnimationExtender1"
runat="server" TargetControlID="UpdatePanel1"
>
<
Animations
>
Continued
983
Evjen c20.tex V2 - 01/28/2008 3:13pm Page 984
Chapter 20: ASP.NET AJAX Control Toolkit
<
OnUpdated

>
<
Sequence
>
<
Color PropertyKey="background" StartValue="#999966"
EndValue="#FFFFFF" Duration="5.0" /
>
<
/Sequence
>
<
/OnUpdated
>
<
/Animations
>
<
/cc1:UpdatePanelAnimationExtender
>
<
asp:UpdatePanel ID="UpdatePanel1" runat="server"
>
<
ContentTemplate
>
<
asp:Label ID="Label1" runat="server"
><
/asp:Label

><
br /
>
<
asp:Calendar ID="Calendar1" runat="server"
onselectionchanged="Calendar1_SelectionChanged"
><
/asp:Calendar
>
<
/ContentTemplate
>
<
/asp:UpdatePanel
>
<
/div
>
<
/form
>
<
/body
>
<
/html
>
C#
<
%@ Page Language="C#" %

>
<
%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit"
TagPrefix="cc1" %
>
<
script runat="server"
>
protected void Calendar1_SelectionChanged(object sender, EventArgs e)
{
Label1.Text = "The date selected is " +
Calendar1.SelectedDate.ToLongDateString();
}
<
/script
>
With this bit of code, when you click a date within the Calendar control, the entire background of the
UpdatePanel holding the calendar changes color from one to another for a five-second duration according
as specified in the animation you built. The animations you define can get pretty complex, and building
deluxe animations are beyond the scope of this chapter.
ValidatorCalloutExtender
The last extender control covered is the ValidatorCalloutExtender control. This control allows you to
add a more noticeable validation message to end users working with a form. You associate this control
not with the control that is being validated, but instead with the validation control itself. An example of
associating the ValidatorCalloutExtender control with a RegularExpressionValidator control is presented
in Listing 20-34.
Listing 20-34: Creating validation callouts with the ValidationCalloutExtender
<
%@ Page Language="C#" %
>

<
%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit"
TagPrefix="cc1" %
>
984
Evjen c20.tex V2 - 01/28/2008 3:13pm Page 985
Chapter 20: ASP.NET AJAX Control Toolkit
<
html xmlns=" />>
<
head runat="server"
>
<
title
>
ValidatorCalloutExtender Control
<
/title
>
<
/head
>
<
body
>
<
form id="form1" runat="server"
>
<
div

>
<
asp:ScriptManager ID="ScriptManager1" runat="server"
>
<
/asp:ScriptManager
>
<
cc1:ValidatorCalloutExtender ID="ValidatorCalloutExtender1" runat="server"
TargetControlID="RegularExpressionValidator1"
>
<
/cc1:ValidatorCalloutExtender
>
Email Address:&nbsp;
<
asp:TextBox ID="TextBox1" runat="server"
><
/asp:TextBox
>
<
asp:RegularExpressionValidator ID="RegularExpressionValidator1"
runat="server"
ErrorMessage="You must enter an email address" Display="None"
ControlToValidate="TextBox1"
ValidationExpression="
\
w+([-+.’]
\
w+)*@

\
w+([ ]
\
w+)*
\
.
\
w+([ ]
\
w+)*"
>
<
/asp:RegularExpressionValidator
><
br /
>
<
asp:Button ID="Button1" runat="server" Text="Submit" /
>
<
/div
>
<
/form
>
<
/body
>
<
/html

>
This page has a single text box for the form, a Submit button and a RegularExpressionValidator control.
The RegularExpressionValidator control is built as you normally would, except you make use of the
Display
property and set it to
None
. You do not want the normal ASP.NET validation control to also
display its message, as it will collide with the one displayed with the ValidatorCalloutExtender control.
Although the
Display
property is set to
None
, you still use the
ErrorMessage
property to provide the
error message. Running this page produces the results presented in Figure 20-41.
Figure 20-41
ASP.NET AJAX Control Toolkit Server Controls
The next set of ASP.NET AJAX controls actually do not always extend other ASP.NET controls, but
instead, are controls themselves. The following sections detail these controls.
985
Evjen c20.tex V2 - 01/28/2008 3:13pm Page 986
Chapter 20: ASP.NET AJAX Control Toolkit
Accordion Control
The
Accordion
control gives you the ability to provide a series of collapsible panes to the end user. This
control is ideal when you have a lot of content to present in a limited space. The
Accordion
control is

a template control and contains panes represented as AccordionPane controls. Listing 20-35 shows an
Accordion control that contains two AccordionPane controls.
Listing 20-35: An Accordion control with two A ccordionPane controls
<
%@ Page Language="C#" %
>
<
%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit"
TagPrefix="cc1" %
>
<
html xmlns=" />>
<
head runat="server"
>
<
title
>
Accordion Control
<
/title
>
<
style type="text/css"
>
.titlebar
{
background-color:Blue;
color:White;
font-size:large;

font-family:Verdana;
border:solid 3px Black;
}
<
/style
>
<
/head
>
<
body
>
<
form id="form1" runat="server"
>
<
div
>
<
asp:ScriptManager ID="ScriptManager1" runat="server"
>
<
/asp:ScriptManager
>
<
cc1:Accordion ID="Accordion1" runat="server" HeaderCssClass="titlebar"
HeaderSelectedCssClass="titlebar"
>
<
Panes

>
<
cc1:AccordionPane runat="server"
>
<
Header
>
This is the first pane
<
/Header
>
<
Content
>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Donec accumsan lorem. Ut consectetuer tempus metus. Aenean tincidunt
venenatis tellus. Suspendisse molestie cursus ipsum. Curabitur ut
lectus. Nulla ac dolor nec elit convallis vulputate. Nullam pharetra
pulvinar nunc. Duis orci. Phasellus a tortor at nunc mattis congue.
Vestibulum porta tellus eu orci. Suspendisse quis massa. Maecenas
varius, erat non ullamcorper nonummy, mauris erat eleifend odio, ut
gravida nisl neque a ipsum. Vivamus facilisis. Cras viverra. Curabitur
ut augue eget dolor semper posuere. Aenean at magna eu eros tempor
pharetra. Aenean mauris.
<
/Content
>
<
/cc1:AccordionPane
>

986
Evjen c20.tex V2 - 01/28/2008 3:13pm Page 987
Chapter 20: ASP.NET AJAX Control Toolkit
<
cc1:AccordionPane runat="server"
>
<
Header
>
This is the second pane
<
/Header
>
<
Content
>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Donec accumsan lorem. Ut consectetuer tempus metus. Aenean tincidunt
venenatis tellus. Suspendisse molestie cursus ipsum. Curabitur ut
lectus. Nulla ac dolor nec elit convallis vulputate. Nullam pharetra
pulvinar nunc. Duis orci. Phasellus a tortor at nunc mattis congue.
Vestibulum porta tellus eu orci. Suspendisse quis massa. Maecenas
varius, erat non ullamcorper nonummy, mauris erat eleifend odio, ut
gravida nisl neque a ipsum. Vivamus facilisis. Cras viverra. Curabitur
ut augue eget dolor semper posuere. Aenean at magna eu eros tempor
pharetra. Aenean mauris.
<
/Content
>
<

/cc1:AccordionPane
>
<
/Panes
>
<
/cc1:Accordion
>
<
/div
>
<
/form
>
<
/body
>
<
/html
>
There is a single CSS class defined in the document and this class,
titlebar
,isusedasthevalueof
the
HeaderCssClass
and the
HeaderSelectedCssClass
properties. The Accordion control here contains
two AccordionPane controls. The subelements of the AccordionPane control are the
<

Header
> and the
<
Content
> elements. The items placed in the <
Header
> section will be in the clickable pane title, while
the items contained within the
<
Content
> section will slide out and be presented when the associated
header is selected.
Running this page produces the results illustrated here in Figure 20-42.
This figure shows a screenshot of each of the panes selected. Some of the more important properties are
described in the following list:
❑
AutoSize
— Defines how the control deals with its size expansion and shrinkage. The possible
values include
None
,
Fill
,and
Limit
.Thedefaultis
None
and when used, items below the con-
trol may move to make room for the control expansion. A value of
Fill
works with the

Height
property and the control w ill fill to the required
Height
. T his means that some of the panes may
have to grow to accommodate the space while other panes might have to shrink and include a
scrollbar to handle the limited space from the height restriction. A value of
Limit
also works
with the
Height
property and will never grow larger than this value. It is possible that the pane
might be smaller than the specified height.
❑
TransitionDuration
— The number o f millisec onds it takes to transition to another pane.
❑
FramesPerSecond
— The number of frames per second to use to transition to another pane.
❑
RequireOpenedPane
— Specifies that at least one pane is required to be open at all times. The
default setting of this property is
True
.Avalueof
False
means that all panes can be collapsed.
987