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 ToolKitThe 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 the download folder

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 ExtendersExtenders 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

AutoCompleteExtenderThe 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"> 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]" ExpandedText="[Click to collapse]" TextLabelID="Label1" SuppressPostBack="true"></asp:CollapsiblePanelExtender>

Text for Label1 depending

Collapse

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 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

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.

MaskedEditExtenderThe 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

MaskedEditValidatorThis 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>

MutuallyExclusiveCheckBoxExtender 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 finally 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 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

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.

UpdatePanelAnimationExtender 35

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 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.

NoBot ControlCutoffMaximumInstances 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 based on the challenge.

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 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 Auto

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

Technology

Transcript of Ajax control tool kit