Your SlideShare is downloading. ×
Ajax control tool kit
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Ajax control tool kit


Published on

Published in: Technology
1 Like
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 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 ToolkitFollow this link 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=""><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 ToolkitExtenders 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.
  • 10. CollapsedText , ExpandedText andTextLabelID are used to title the Panel according to it’s state.
  • 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
  • 15. <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>
  • 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. 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
  • 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. TextBoxWatermarkExtender32/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. UpdatePanelAnimationExtender35 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.