Professional ASP.NET 3.5 in C# and Visual Basic Part 102 pdf

Evjen c20.tex V2 - 01/28/2008 3:13pm Page 968
Chapter 20: ASP.NET AJAX Control Toolkit
You form a group of CheckBox controls by using the
Key
property. All the check boxes that you want in
one group need to have the same
Key
value. In the example is Listing 20-20, all the check boxes share a
Key
value of
MyCheckboxes
.
Running this page, results in a list of four check boxes. When you select one of the check boxes, a check
mark appears. Then, when you select another check box, first checkbox you selected gets deselected. The
best part is that you can even deselect what you have selected in the group, thereby selecting nothing in
the check box group.
NumericUpDownExtender
The NumericUpDownExtender control allows you to put some up/down indicators next to a TextBox
control that enable the end user to more easily control a selection.
A simple example of this is illustrated here in Listing 20-21.
Listing 20-21: Using the NumericUpDownExtender control
<
%@ Page Language="C#" %
>
<
%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit"
TagPrefix="cc1" %
>
<
html xmlns=" />>
<

head runat="server"
>
<
title
>
NumericUpDownExtender Control
<
/title
>
<
/head
>
<
body
>
<
form id="form1" runat="server"
>
<
div
>
<
asp:ScriptManager ID="ScriptManager1" runat="server"
>
<
/asp:ScriptManager
>
<
cc1:NumericUpDownExtender ID="NumericUpDownExtender1" runat="server"
TargetControlID="TextBox1" Width="150" Maximum="10" Minimum="1"

>
<
/cc1:NumericUpDownExtender
>
<
asp:TextBox ID="TextBox1" runat="server"
><
/asp:TextBox
>
<
/div
>
<
/form
>
<
/body
>
<
/html
>
The NumericUpDownExtender control here extends the TextBox control on the page. When using the
NumericUpDownExtender control, you have to specify the width of the control with the
Width
property.
Otherwise, you will see only the up and down arrow keys and not the text box area. In this case, the
Width
property is set to
150
(pixels). The

Maximum
and
Minimum
properties provide the range used by
the up and down indicators.
With a
Maximum
value setting of
10
and a
Minimum
value of
1
, the only range in the control will be 1
through 10. Running this page produces the results shown in Figure 20-29.
968
Evjen c20.tex V2 - 01/28/2008 3:13pm Page 969
Chapter 20: ASP.NET AJAX Control Toolkit
Figure 20-29
In addition to numbers as is shown with Listing 20-21, you can also use text as is illustrated here in
Listing 20-22.
Listing 20-22: Using characters instead of numbers with NumericUpDownExtender
<
cc1:NumericUpDownExtender ID="NumericUpDownExtender1" runat="server"
TargetControlID="TextBox1" Width="150"
RefValues="Blue;Brown;Green;Orange;Black;White"
>
<
/cc1:NumericUpDownExtender
>

In this case, the words are defined within the
RefValues
property (all separated with a semicolon). This
gives you the results presented in Figure 20-30.
Figure 20-30
PagingBulletedListExtender
The PagingBulletedListExtender control allows you to take long bulleted lists and easily apply alphabetic
paging to the list. For an example of this, Listing 20-23 will work off of the Customers table within the
Northwind database.
Listing 20-23: Paging a bulleted list from the Northwind database
<
%@ Page Language="C#" %
>
<
%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit"
TagPrefix="cc1" %
>
<
html xmlns=" />>
<
head runat="server"
>
<
title
>
PagingBulletedListExtender Control
<
/title
>
<

/head
>
<
body
>
<
form id="form1" runat="server"
>
<
div
>
<
asp:ScriptManager ID="ScriptManager1" runat="server"
>
<
/asp:ScriptManager
>
<
cc1:PagingBulletedListExtender ID="PagingBulletedListExtender1"
runat="server" TargetControlID="BulletedList1"
>
<
/cc1:PagingBulletedListExtender
>
<
asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="Data Source=.
\
SQLEXPRESS;
Continued

969
Evjen c20.tex V2 - 01/28/2008 3:13pm Page 970
Chapter 20: ASP.NET AJAX Control Toolkit
AttachDbFilename=|DataDirectory|
\
NORTHWND.MDF;
Integrated Security=True;User Instance=True"
ProviderName="System.Data.SqlClient"
SelectCommand="SELECT [CompanyName] FROM [Customers]"
>
<
/asp:SqlDataSource
>
<
asp:BulletedList ID="BulletedList1" runat="server"
DataSourceID="SqlDataSource1" DataTextField="CompanyName"
DataValueField="CompanyName"
>
<
/asp:BulletedList
>
<
/div
>
<
/form
>
<
/body
>

<
/html
>
This code pulls all the
CompanyName
values from the Customers table of the Northwind database and
binds those values to the BulletList control on the page. Running this page gives you the results illus-
trated in Figure 20-31.
Figure 20-31
From this figure, you can see that the paging is organized alphabetically on the client side. Only the
letters for which there are values appear in the linked list of letters. Clicking any of the letters gives you
the items from the bulleted list that start with that character.
PopupControlExtender
The PopupControlExtender control allows you to create a popup for any control on your page. For
instance, you can completely mimic the CalendarExtender control that was presented earlier by creating
a popup containing a Calendar control off a TextBox control. Listing 20-24 mimics this behavior.
970
Evjen c20.tex V2 - 01/28/2008 3:13pm Page 971
Chapter 20: ASP.NET AJAX Control Toolkit
Listing 20-24: Creating a C alendarExtender control with PopupControlExtender
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 System.EventArgs)
PopupControlExtender1.Commit(Calendar1.SelectedDate.ToShortDateString())
End Sub
<
/script
>
<
html xmlns=" />>
<
head runat="server"
>
<
title
>
PopupControlExtender Control
<
/title
>
<
/head
>
<
body
>
<
form id="form1" runat="server"
>
<

div
>
<
asp:ScriptManager ID="ScriptManager1" runat="server"
>
<
/asp:ScriptManager
>
<
cc1:PopupControlExtender ID="PopupControlExtender1" runat="server"
TargetControlID="TextBox1" PopupControlID="UpdatePanel1" OffsetY="25"
>
<
/cc1:PopupControlExtender
>
<
asp:TextBox ID="TextBox1" runat="server"
><
/asp:TextBox
>
<
asp:UpdatePanel ID="UpdatePanel1" runat="server"
>
<
ContentTemplate
>
<
asp:Calendar ID="Calendar1" runat="server" BackColor="White"
BorderColor="White" BorderWidth="1px" Font-Names="Verdana"
Font-Size="9pt" ForeColor="Black" Height="190px"

NextPrevFormat="FullMonth" Width="350px"
OnSelectionChanged="Calendar1_SelectionChanged"
>
<
SelectedDayStyle BackColor="#333399" ForeColor="White" /
>
<
TodayDayStyle BackColor="#CCCCCC" /
>
<
OtherMonthDayStyle ForeColor="#999999" /
>
<
NextPrevStyle Font-Bold="True" Font-Size="8pt"
ForeColor="#333333" VerticalAlign="Bottom" /
>
<
DayHeaderStyle Font-Bold="True" Font-Size="8pt" /
>
<
TitleStyle BackColor="White" BorderColor="Black"
BorderWidth="4px" Font-Bold="True" Font-Size="12pt"
ForeColor="#333399" /
>
<
/asp:Calendar
>
<
/ContentTemplate
>

<
/asp:UpdatePanel
>
<
/div
>
<
/form
>
<
/body
>
<
/html
>
Continued
971
Evjen c20.tex V2 - 01/28/2008 3:13pm Page 972
Chapter 20: ASP.NET AJAX Control Toolkit
C#
<
%@ Page Language="C#" %
>
<
%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit"
TagPrefix="cc1" %
>
<
script runat="server"
>

protected void Calendar1_SelectionChanged(object sender, EventArgs e)
{
PopupControlExtender1.Commit(Calendar1.SelectedDate.ToShortDateString());
}
<
/script
>
When running this page, you get a single text box on the page. Click within the text box and a pop-up
calendar appears so you can select a date that will be populated back into the text box (as illustrated in
Figure 20-32).
Figure 20-32
You will want to place your popup control within an ASP.NET AJAX UpdatePanel control and to pass the
value from the popup control back to the target control (the TextBox1 control), so you use the
Commit()
method:
PopupControlExtender1.Commit(Calendar1.SelectedDate.ToShortDateString())
ResizableControlExtender
The ResizableControlExtender control allows you to take a Panel control and give end users the ability to
grab a handle and change the size of the element (smaller or bigger). Anything you put inside the
Panel
972
Evjen c20.tex V2 - 01/28/2008 3:13pm Page 973
Chapter 20: ASP.NET AJAX Control Toolkit
control will then change in size depending on how the end user extends the item. For this to work, you
have to create a handle for the e nd user to use. Listing 20-25 shows you how t o use ResizableControl-
Extender with an image.
Listing 20-25: Using the ResizableControlExtender control with an image
<
%@ Page Language="C#" %
>

<
%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit"
TagPrefix="cc1" %
>
<
html xmlns=" />>
<
head runat="server"
>
<
title
>
ResizableControlExtender Control
<
/title
>
<
style type="text/css"
>
.handle
{
width:10px;
height:10px;
background-color:Black;
}
.resizable
{
border-style:solid;
border-width:2px;
border-color:Black;

}
<
/style
>
<
/head
>
<
body
>
<
form id="form1" runat="server"
>
<
div
>
<
asp:ScriptManager ID="ScriptManager1" runat="server"
>
<
/asp:ScriptManager
>
<
cc1:ResizableControlExtender ID="ResizableControlExtender1" runat="server"
TargetControlID="Panel1" HandleCssClass="handle"
ResizableCssClass="resizable"
>
<
/cc1:ResizableControlExtender
>

<
asp:Panel ID="Panel1" runat="server" Width="300" Height="225"
>
<
asp:Image ID="Image1" runat="server" ImageUrl="Images/Garden.jpg"
style="width:100%; height:100%"/
>
<
/asp:Panel
>
<
/div
>
<
/form
>
<
/body
>
<
/html
>
In this example, the ResizableControlExtender control depends upon CSS to create the handle for the
endusertograbtoresizethe
Panel
control. The
TargetControlID
property points to the control to be
resized.
There are two CSS references in the ResizableContro lExtender control. One deals with the control as it

sits on the screen with no end user interaction. This is really to show the end user that there is an ability
973
Evjen c20.tex V2 - 01/28/2008 3:13pm Page 974
Chapter 20: ASP.NET AJAX Control Toolkit
to resize the element. This is done through the
HandleCssClass
property. The value o f t his property
points to the CSS class
handle
contained within the same file. The second CSS reference deals with the
control as it is clicked and held (when the end user does not let up with the mouse click performed). This
one is done with the
ResizableCssClass
property. The value of this property points t o the CSS class
resizable
.
When compiled and run, the code should generate the same page presented in Figure 20-33.
Figure 20-33
You can see in the top screenshot how the image looks when there is no end user interaction. In this case,
there is a black square (as defined by the CSS) in the lower-right corner of the image. The screenshot on
the bottom shows what happens when the end user grabs the handle and starts changing the shape
of the image.
974
Evjen c20.tex V2 - 01/28/2008 3:13pm Page 975
Chapter 20: ASP.NET AJAX Control Toolkit
RoundedCornersExtender
The RoundedCornersExtender control allows you to put rounded corners on the elements on your page.
As with the ResizableControlExtender control, you put the element you are interested in working with
inside of a Panel control. Listing 20-26 shows this done with a Login server control.
Listing 20-26: Rounding the c orners of the Panel control containing a Login server

control
<
%@ Page Language="C#" %
>
<
%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit"
TagPrefix="cc1" %
>
<
html xmlns=" />>
<
head runat="server"
>
<
title
>
RoundedCornersExtender Control
<
/title
>
<
/head
>
<
body
>
<
form id="form1" runat="server"
>
<

div
>
<
asp:ScriptManager ID="ScriptManager1" runat="server"
>
<
/asp:ScriptManager
>
<
cc1:RoundedCornersExtender ID="RoundedCornersExtender1" runat="server"
TargetControlID="Panel1"
>
<
/cc1:RoundedCornersExtender
>
<
asp:Panel ID="Panel1" runat="server" Width="250px"
HorizontalAlign="Center" BackColor="Orange"
>
<
asp:Login ID="Login1" runat="server"
>
<
/asp:Login
>
<
/asp:Panel
>
<
/div

>
<
/form
>
<
/body
>
<
/html
>
Here, the RoundedCornersExtender control simply points to the Panel control with the
Target-
ControlID
property. This Panel control has a background color of orange to show that the corners are
indeed rounded. The result of this bit of code is illustrated in Figure 20-34.
Figure 20-34
You can control the degree of the rounded corners using the
Radius
property of the RoundedCorner-
sExtender control. By default, this property is set to a value of
5
. You can even go as far as choosing the
975
Evjen c20.tex V2 - 01/28/2008 3:13pm Page 976
Chapter 20: ASP.NET AJAX Control Toolkit
corners that you want to round using the
Corners
property. The possible values of the
Corners
property

include
All
,
Bottom
,
BottomLeft
,
BottomRight
,
Left
,
None
,
Right
,
Top
,
TopLeft
,and
TopRight
.
SliderExtender
The SliderExtender control actually extends a TextBox control to make it look like nothing it normally
does. This ASP.NET AJAX control gives you the ability to create a true slider control that allows the end
user to select a range of numbers using a mouse instead typing in the number. Listing 20-27 shows a
simple example of using the slider.
Listing 20-27: Using the SliderExtender c ontrol
<
%@ Page Language="C#" %
>

<
%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit"
TagPrefix="cc1" %
>
<
html xmlns=" />>
<
head runat="server"
>
<
title
>
SliderExtender Control
<
/title
>
<
/head
>
<
body
>
<
form id="form1" runat="server"
>
<
div
>
<
asp:ScriptManager ID="ScriptManager1" runat="server"

>
<
/asp:ScriptManager
>
<
cc1:SliderExtender ID="SliderExtender1" runat="server"
TargetControlID="TextBox1"
>
<
/cc1:SliderExtender
>
<
asp:TextBox ID="TextBox1" runat="server"
><
/asp:TextBox
>
<
/div
>
<
/form
>
<
/body
>
<
/html
>
This little bit of code to tie a SliderExtender control to a typical TextBox control is simple a nd produces
the result presented in Figure 20-35.

Figure 20-35
This is fine, but it is hard for the end users to tell what number they are selecting. Therefore, you might
find it better to give a signifier to the end user. Adding a Label control to the page (called
Label1
)and
changing the SliderExtender control to include a
BoundControlID
property gives you this result. The
code for this change is presented here:
<
cc1:SliderExtender ID="SliderExtender1" runat="server" TargetControlID="TextBox1"
BoundControlID="Label1"
>
<
/cc1:SliderExtender
>
976
Evjen c20.tex V2 - 01/28/2008 3:13pm Page 977
Chapter 20: ASP.NET AJAX Control Toolkit
This small change produces see the result (with the appropriate Label control on the page) shown in
Figure 20-36.
Figure 20-36
Now when the end users slide the handle on the slider, they see the number that they are working with
quite easily. Some of the following properties are available to the SliderExtender control.
❑
Decimal —
Allows you to specify the number of decimals the result should take. The more
decimals you have, the more unlikely the end user will be able to pick an exact number.
❑
HandleCssClass —

The CSS class that you are using the design the handle.
❑
HandleImageUrl —
The image file you are using to represent the handle.
❑
Length —
The length of the slider in pixels. The default value is
150
.
❑
Maximum —
The maximum number represented in the slider. The default value is
100
.
❑
Minimum —
The minimum number represented in the slider. The default value is
0
.
❑
Orientation
— The orientation of the slider. The possible values include
Horizontal
and
Vertical
. The default value is
Horizontal
.
❑
RailCssClass

— The CSS class that you are using to design the rail of the slider.
❑
ToolTipText
— The ToolTip when the end user hovers over the slider. Using
0
within the text
provides the means show the end user the position the slider is currently in.
SlideShowExtender
The SlideShowExtender control allows you to put an image slideshow in the browser. The slideshow
controls allow the end user to move to the next or previous images as well as simply play the images
as a slideshow with a defined wait between each image. Listing 20-28 shows an example of creating a
slideshow.
Listing 20-28: Creating a slideshow with three images
.ASPX
<
%@ Page Language="VB" AutoEventWireup="true" CodeFile="SlideShowExtender.aspx.vb"
Inherits="SlideShowExtender" %
>
<
%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit"
TagPrefix="cc1" %
>
<
html xmlns=" />>
<
head runat="server"
>
Continued
977