Ajax control tool kit

Ajax Control ToolKit
 The ASP.NET AJAX Control Toolkit
makes adding rich animations and
interactivity to a Web application easy.
 The Toolkit contains some controls that
have AJAX functionality and many
control extenders.
 The control extenders attach to
another control to enhance or “extend”
the control’s functionality

Ajax Control ToolKit
 The ASP.NET AJAX Control Toolkit
makes adding rich animations and
interactivity to a Web application easy.
 The Toolkit contains some controls
that have AJAX functionality and many
control extenders.
 The control extenders attach to
another control to enhance or “extend”
the control’s functionality

Installing Toolkit
Follow this link
http://www.asp.net/ajaxlibrary
 Right-click in the Toolbox and select
Add Tab and name the tab as you
want
 With the new tab in your
Toolbox, right-click the tab and select
Choose Items from the provided
menu.
 Select the AjaxControlToolkit.dll from

 Following shows what your ASP.NET
page looks like after the addition of a
single ASP.NET AJAX control to it
<%@ Page Language="C#" AutoEventWireup="true …….. %>
<%@ Register Assembly="AjaxControlToolkit"
Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 .......>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:toolkitscriptmanager ID="Toolkitscriptmanager1"
runat="server"></asp:toolkitscriptmanager>
</div>
</form>
</body>
</html>

ASP.NET AJAX Control Toolkit
Extenders
 Extenders are basically controls that
reach out and extend other controls.

AnimationExtender 03

 This control allows you to program
elements that can move around the page
based on specific end user triggers
 These events are:
◦ OnClick
◦ OnHoverOver
◦ OnHoverOut
◦ OnLoad
◦ OnMouseOver
◦ OnMouseOut

AutoCompleteExtender
 The AutoCompleteExtender control
enables you to help end users find
what they might be looking for when
they need to type in search terms
within a text box.

CalendarExtender 06

The CalendarExtender attaches to a
text box and pops up a calendar for
selecting a date
 PopupButtonID is ID of another
control, that will show the calendar if
clicked.
 The Format property specifies the
string format for the date input of the
text box

CollapsiblePanelExtender 07

 The CollapsiblePanelExtender server
control allows you to collapse one
control into another.
 The TargetControlID is shown when
the ExpandControlID is clicked or
hidden when the CollapseControlID is
clicked
 It can also be shown or hidden based
on a mouse hover if the AutoCollapse
and AutoExpand properties are set to
True.

CollapsedText , ExpandedText and
TextLabelID are used to title the Panel
according to it’s state.

<asp:ToolkitScriptManager ID="ToolkitScriptManager1"
runat="server">
</asp:ToolkitScriptManager>
<asp:Panel ID="Panel1" runat="server“
BackColor="#000066” ForeColor="White">
<asp:Label ID="Label2" runat="server"
Text="This is my title"></asp:Label>
<asp:Label ID="Label1“ runat="server“/>
</asp:Panel>
<asp:Panel ID="Panel2" runat="server"
Style="overflow: hidden;” Height="0"> Collapse
This is going to show or hide
</asp:Panel>
<asp:CollapsiblePanelExtender runat="server"
ID="CollapsiblePanelExtender1"
TargetControlID="Panel2" Collapsed="true"
ExpandControlID="Panel1"
CollapseControlID="Panel1"
CollapsedSize="1"
ExpandedSize="300"
CollapsedText="[Click to expand]" Text for Label1
ExpandedText="[Click to collapse]" depending
TextLabelID="Label1"
SuppressPostBack="true">
</asp:CollapsiblePanelExtender>

ColorPickerExtender 09

 The ColorPickerExtender control
quickly and easily extend something
like a TextBox control to a tool to
select color

ConfirmButtonExtender 10

 ConfirmButtonExtender allows you to
question the end user’s action and
reconfirm action, using a dialogbox .
 If the end user clicks OK then the
page will function normally as if the
dialog never occurred.
 If Cancel is clicked, the dialog will
disappear and the form will not be
submitted

ModalPopupExtender 11

 ModalPopupExtender server control
enables you to create your own
confirmation form. It points to another
control to use for the confirmation.
 User must work with the control
designated by the PopupControlID
before he can proceed.
 OkControlID and the CancelControlID
, along with OnOkScript and
OnCancelScript properties that will run
based on the user’s selection

<asp:ConfirmButtonExtender ID="ConfirmButtonExtender1"
runat="server" TargetControlID="Button1"
DisplayModalPopupID="ModalPopupExtender1">
</asp:ConfirmButtonExtender>
<asp:ModalPopupExtender ID="ModalPopupExtender1"
runat="server"
CancelControlID="ButtonNo" OkControlID="ButtonYes"
PopupControlID="Panel1"
TargetControlID="Button1">
</asp:ModalPopupExtender>
<asp:Button ID="Button1" runat="server" Text="Button" />
<asp:Panel ID="Panel1" runat="server"
style="display:none; background-color:White; width:200;
border-width:2px; border-color:Black; border-style:solid;
padding:20px;">
Are you sure you wanted to click this button?<br />
<asp:Button ID="ButtonYes" runat="server" Text="Yes" />
<asp:Button ID="ButtonNo" runat="server" Text="No" />
</asp:Panel>
</div>
</form>
</body>
</html>

DragPanelExtender 12

 The DragPanelExtender enables you to
deﬁne areas where end users can move
elements around the page as they want
 First is to create a <div> area on the
page that is large enough to drag the
item around in.
 Then specify the drag handle and
another control that will follow the drag
handle around

DropDownExtender 13

 The DropDownExtender control allows
you provide a drop-down list of options
below a control
 TargetControlID property defines the
control that becomes the initiator of the
drop-down list.
 DropDownControlID property defines
the element on the page that will be
used for the drop-down items that
appear below the control

DropShadowExtender 14/15

 The DropShadowExtender allows you
to add a DropShadow effect to an
ASP.NET panel or image on the page.
 Set the TargetControlID, you can then
control the Width and Opacity, and
Rounded corner effect.
 Set TrackPosition property to True to
indicate that JavaScript should run to
track the panel and update the
DropShadow as needed.

FilteredTextBoxExtender 18

 The FilteredTextBoxExtender control
works off a TextBox control to specify
the types of characters the end user
can input into the control.
 The FilterType property can be set to
Custom, LowercaseLetters, Numbers,
and UppercaseLetters

FilterMode property can be set to
ValidChars or InvalidChars value.
 The ValidChars and InvalidChars
property can be used to define it

HoverMenuExtender 19

 The HoverMenuExtender control
allows you to make a hidden control
appear on the screen when the end
user hovers on another control.
 PopDelay property is used for delay.
 The OffsetX and OffsetY properties
specify the location of the pop-up
based on the targeted control

ListSearchExtender 20

 This extender allows you to provide
search capabilities through large
collections that are located in either of
these controls
 You can customize the text that
appears at the top of the control with
the PromptCssClass, PromptPosition,
and PromptText properties.

MaskedEditExtender
 The MaskedEditExtender control is
similar to the FilteredTextBoxExtender
control ,but it takes the process one
step further by providing end users with
a template within the text box for them
to follow
 The MaskType property supplies the
type of mask or filter to place on the
text box and can be
None, Date, DateTime, Number, or
Time

 The Mask property provides the mask
 Mask Chars are :
◦ 9 — Only a numeric character
◦ L — Only a letter
◦ $ — Only a letter or a space
◦ C — Only a custom character (case
sensitive)
◦ A — Only a letter or a custom character
◦ N — Only a numeric or custom character
◦ ? — Any character

MaskedEditValidator
 This control uses the ControlExtender
property to associate itself with the
MaskedEditExtender control and uses
the ControlToValidate property to watch
a speciﬁc control on the form
<asp:MaskedEditValidator ID="MaskedEditValidator1"
runat="server"
ControlExtender="MaskedEditExtender1"
ControlToValidate="TextBox1"
IsValidEmpty="False"
EmptyValueMessage="A three digit number is required!"
Display="Dynamic">
</asp:MaskedEditValidator>

MutuallyExclusiveCheckBoxExten
der 22

 This control is used for when you need to
offer a list of check boxes that behave as if
they are radio buttons.
 You cannot associate
MutuallyExclusiveCheckBoxExtender
control with a CheckBoxList control
 The check boxes needs to be laid out with
CheckBox controls
 You need to have one
MutuallyExclusiveCheckBoxExtender
control for each CheckBox control on the
page.
 Use the Key property to group CheckBox
controls

NumericUpDownExtender 23

 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
 You must set the Width
property, otherwise, you will see only
the up and down arrow keys

 You can set the limit with a Maximum
value and a Minimum value
 You can use text by using refValues
property
<asp:NumericUpDownExtender
ID="NumericUpDownExtender1" runat="server"
TargetControlID="TextBox1" Width="150"
RefValues="Blue;Brown;Green;Orange;Black;White">
</asp:NumericUpDownExtender>

PagingBulletedListExtender 25

 The PagingBulletedListExtender
control allows you to take long
bulleted lists and easily apply
alphabetic paging to the list

PopupControlExtender 26

 The PopupControlExtender control
allows you to create a pop-up for any
control on your page.
 Pass the value from the pop-up
control back to the target control using
the Commit() method:
PopupControlExtender1.Commit(
Calendar1.SelectedDate.ToShortDateString())

ResizableControlExtender 27

 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.
 Anything you put inside the Panel control
will then change in size depending on how
the end user extends the item.
 You also need to create a handle for the
end user to work from in pulling or
contracting the item.

 Use the HandleCssClass property to
specify the style information about the
appearance of the handle
 The ResizableCssClass property refers
to style information shown while the
panel is being altered.
 The control also exposes events that
are raised that you can attach code to in
order to react to the panel being
resized:
OnClientResizeBegin, OnClientResizing
, and ﬁnally OnClientResize.

RoundedCornersExtender 28

 The RoundedCornersExtender control
allows you to put rounded corners on
the elements on your page
 You can even choose the 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 29

 This control gives you the ability to
create a slider control that allows the
end user to select a range of numbers
using a mouse instead of typing in the
number
 Adding a Label control to the page
and adding a BoundControlID
property gives you the signifier to tell
user what value they have selected

Some useful properties :
 Decimal: Allows you to specify the number
of decimals the result should take.
 HandleCssClass: The CSS class that you
are using to design the handle.
 HandleImageUrl: The image ﬁle you are
using to represent the handle.
 Length: The length of the slider in pixels.
The default value is 150.
 Maximum: Minimum: Range
 Orientation: Horizontal and Vertical.
 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

SlideShowExtender 30

 The SlideShowExtender control allows
you to put an image slideshow in the
browser
 The SlideShowExtender has a server-
side method called GetSlides() to call
for the photos.
 It returns an array of Slide objects that
require the location of the object, the
title, and the description.

TextBoxWatermarkExtender
32/33

 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.
 To apply some style to the content that
you use as a watermark, you can use
the WatermarkCssClass property.

ToggleButtonExtender 34

 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.
 This control allows you to specify
images for checked, unchecked, and
disabled statuses.

UpdatePanelAnimationExtende
r35

 The UpdatePanelAnimationExtender
control allows you to apply an
animation to a Panel control for two
specific events, OnUpdating event and
OnUpdated event.
 You can then use the animation
framework provided by ASP.NET AJAX
to change the page’s style based on
thesetwo events.

ValidatorCalloutExtender 36

 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

Accordion Control 37

 The Accordion control is used to specify
a set of panes
 Each pane is made up of a header
template and a content template.
 The header templates of all panes are
always visible, whereas only one content
template is visible.
 The user selects which pane to view by
clicking on the header. The content from
the previously active pane is hidden from
view, and the content of the newly
selected pane is displayed instead.

 Set the FadeTransitions property to
True and then you can set the
TransitionDuration and
FramesPerSecond values to provide
fade effect. The default values are 250
milliseconds and 40 frames per second,
respectively.
 The SelectedIndex property lets you
declaratively and programmatically
control which pane to show.

 When the AutoSize property is set to
Limit, the size is restricted to the Height
value. The active pane will display
scrollbars if the content is larger than the
space available.
 The other possible value is Fill, which will
result in expanding a pane if the content is
not large enough to satisfy the Height
value provided
 RequireOpenedPane properety speciﬁes
that at least one pane is required to be
open at all times. A value of False means
that all panes can be collapsed.

NoBot Control
 CutoffMaximumInstances is the number
of times the end user is allowed to try to
submit the form within the number of
seconds specified by the
CutoffWindowSeconds property.
 The ResponseMinimumDelaySeconds
property defines the minimum number of
seconds the end user has to submit the
form.
 The OnGenerateChallengeAndResponse
property allows you to define the server-
side method that works with the challenge
and allows you to provide a response

PasswordStrength Control 41

 The PasswordStrength control allows
you to check the contents of a password
in a TextBox control and validate its
strength.
 Some of the important properties to work
with here include
◦ MinimumLowerCaseCharacters,
◦ MinimumNumericCharacters,
◦ MinimumSymbolCharacters,
◦ MinimumUpperCaseCharacters,
◦ PreferredPasswordLength.

Rating Control 42!

 The Rating control gives your end
users the ability to view and set
ratings
 You have control over the number of
ratings, the look of the filled ratings,
the look of the empty ratings

TabContainer Control 43

 The TabContainer and TabPanel controls
make presenting the familiar tabbed UI
easy.
 It allows you to attach a server event
called the ActiveTabChanged event, which
is ﬁred during a Postback if the active tab
has changed.
 You can also use the
OnClientActiveTabChanged event to have
your JavaScript event triggered
 The ScrollBars property lets you designate
whether scrollbars should be
Horizontal, Vertical, Both, None, or set to

 The TabPanel control has a
<HeaderTemplate> for the tab and a
<ContentTemplate> for the body.
 OnClientClick event will be triggered
when the tab is selected called.
 You can disable tabs programmatically
in JavaScript in the browser by setting
the Enabled property to False.

Ajax control tool kit

Recommended

More Related Content

What's hot (20)

Similar to Ajax control tool kit (20)

Recently uploaded (20)

Ajax control tool kit