What's New in Teams Calling, Meetings and Devices March 2024
Ajax control tool kit
1. 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
2. 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
3. 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
4. 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>
5. ASP.NET AJAX Control Toolkit
Extenders
Extenders are basically controls that
reach out and extend other controls.
6. 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
7. 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.
8. 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
9. 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.
11. <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>
12. ColorPickerExtender 09
The ColorPickerExtender control
quickly and easily extend something
like a TextBox control to a tool to
select color
13. 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
14. 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
16. DragPanelExtender 12
The DragPanelExtender enables you to
define 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
17. 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
18. 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.
19. 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
20. FilterMode property can be set to
ValidChars or InvalidChars value.
The ValidChars and InvalidChars
property can be used to define it
21. 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
22. 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.
23. 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
24. 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
25. MaskedEditValidator
This control uses the ControlExtender
property to associate itself with the
MaskedEditExtender control and uses
the ControlToValidate property to watch
a specific 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>
26. 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
27. 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
28. 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>
29. PagingBulletedListExtender 25
The PagingBulletedListExtender
control allows you to take long
bulleted lists and easily apply
alphabetic paging to the list
30. 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())
31. 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.
32. 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 finally OnClientResize.
33. 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.
34. 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
35. 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 file 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
36. 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.
37. 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.
38. 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.
39. 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.
40. 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
41. 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.
42. 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.
43. 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 specifies
that at least one pane is required to be
open at all times. A value of False means
that all panes can be collapsed.
44. 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
45. 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.
46. 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
47. 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 fired 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
48. 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.
