Your SlideShare is downloading. ×
Introduction to Introduction to ASP.NET AJAX Toolkit ASP.NET ...
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

Introduction to Introduction to ASP.NET AJAX Toolkit ASP.NET ...


Published on

1 Comment
1 Like
  • Very informative slides. Its really helpful for me and helped me lot to complete my task. Thanks for sharing with us. I have found another nice post with wonderful explanation on Ajax Toolkit in ASP.Net, please check out that post link...

    It might be useful for you.
    Thanks everyone for your precious post.
    Are you sure you want to  Yes  No
    Your message goes here
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. Introduction to ASP.NET AJAX Toolkit Paul Litwin ( Collaborative Data Services Fred Hutchinson Cancer Research Center
  • 2. Next CDS Brownbag Scheduled for Wed, April 16, 11:30 Topic and speaker not yet chosen 2
  • 3. ASP.NET Ajax Toolkit 34 Controls Updated every couple of months or so Source-code available A community project hosted on CodePlex Not an officially-supported Microsoft product (though Microsoft is heavily involved) 3
  • 4. ASP.NET Ajax Toolkit Most of toolkit controls are extender controls An extender is a control which extends the functionality of another control VS 2008 integrates extender controls into IDE designer 4
  • 5. Toolkit Controls (v 1.0.20229 & 3.5.20229) Accordion NoBot AlwaysVisibleControl NumericUpDown Animation AutoComplete PagingBulletedList Calendar PasswordStrength CascadingDropDown PopupControl CollapsiblePanel Rating ConfirmButton DragPanel ReorderList DropDown ResizableControl DropShadow RoundedCorners DynamicPopulate Slider FilteredTextBox SlideShow HoverMenu ListSearch Tabs MaskedEdit TextBoxWatermark ModalPopup ToggleButton MutuallyExclusiveCheckBox UpdatePanelAnimation ValidatorCallout 5
  • 6. Toolkit Tip You can download VS 2005 and VS 2008 versions with or without source code To add toolkit to toolbox 1. On toolbar, Add Tab 2. Choose Items… 3. Browse… to SampleWebSitebinAjaxControlToolkit.dll To get easy access to docs Point share to SampleWebSite folder 6
  • 7. Toolkit: Animation (1 of 3) <ajaxToolkit: AnimationExtender TargetControlId=“ControlToExtend”> <Animations> <triggers> <animation action/> </triggers> Triggers: OnLoad, OnClick, OnMouseOver, OnMouseOut, OnHoverOver, OnHoverOut Animation Actions: can be single animation or Parallel or Sequence 7
  • 8. Toolkit: Animation (2 of 3) Lots of Animations to Choose from, including… FadeIn FadeOut Pulse Color Move Resize Scale Actions ( ~ immediate animations) Enable Hide Opacity Script 8
  • 9. Toolkit: Animation Example (3 of 3) Animation.aspx 9
  • 10. Toolkit: AutoComplete (1 of 2) <ajaxToolkit: AutoCompleteExtender TargetControlId=“ControlToExtend” ServiceMethod=“WebServiceMethod” CompletionCount=# MinimumPrefixLength=#/> ServiceMethod Can be page method or web service (if using web service need to also specify ServicePath) [System.Web.Services.WebMethod] [System.Web.Services.WebMethod] public static string[] WSMethod( string WSMethod( prefixText, int count) prefixText, 10
  • 11. Toolkit: AutoComplete Example (2 of 2) AutoComplete.aspx Uses PageMethod to supply list 11
  • 12. Toolkit: DragPanel (1 of 1) Add “draggability” to your panels <ajax:DragPanelExtender TargetControlId=“panel to drag” DragHandleId=“control inside of panel which will serve as drag handle” Example: DragPanel.aspx 12
  • 13. Toolkit: Filtered TextBox (1 of 2) Allows you to filter legal characters for a TextBox Overlaps functionality of MaskedEdit extender <ajaxToolkit: FilteredTextBoxExtender TargetControlId=“textbox to extend” FilterType=“filter” ValidChars=“for custom filter” InvalidChars=“for custom filter” FilterType can be Numbers, LowercaseLetters, UppercaseLetters, Custom 13
  • 14. Toolkit: Filtered Example (2 of 2) FilteredTextBox.aspx 14
  • 15. Toolkit: ListSearch (1 of 1) Overlaps AutoComplete functionality Provides ability to type multiple characters to do incremental search within a ListBox or DropDownList control <ajaxToolkit:ListSearchExtender TargetControlID="ControlToExtend“ PromptText=“prompt text” Example: ListSearch.aspx 15
  • 16. Toolkit: MaskedEdit (1 of 2) Provides input mask and optional validator to TextBox controls <ajax:MaskedEditExtender TargetControlID="txtSSN“ Mask="9{3}-9{2}-9{4}" ErrorTooltipEnabled="true“ MessageValidatorTip="true“ /> <ajax:maskededitvalidator ControlToValidate="txtSSN“ ControlExtender="meeSSN" Display="Dynamic“ IsValidEmpty="false" EmptyValueMessage="SSN is a required field.“ EmptyValueBlurredText="*" /> 16
  • 17. Toolkit: MaskedEdit Example (2 of 2) MaskedEdit.aspx 17
  • 18. Toolkit: ModalPopup (1 of 1) Displays content in a modal manner which prevents user from interacting with page until the popup is put away. <cc1:modalpopupextender TargetControlID="lbFeedback" PopupControlID="pnlFeedback" BackgroundCssClass="modalBackground" OkControlID="cmdOk" CancelControlID="cmdCancel" DropShadow="true" /> Example: ModalPopup.aspx 18
  • 19. Toolkit: SlideShow (1 of 4) Extends Image controls to create slide show of images Requires a web method (page method or web service) to provide image list 19
  • 20. Toolkit: SlideShow (2 of 4) <ajaxToolkit:SlideShowExtender TargetControlID="Image1" SlideShowServiceMethod="GetSlides" AutoPlay="true" ImageTitleLabelID="imageTitle" ImageDescriptionLabelID="imageDescription" NextButtonID="nextButton" PlayButtonText="Play" StopButtonText="Stop" PreviousButtonID="prevButton" PlayButtonID="playButton" Loop="true" /> 20
  • 21. Toolkit: SlideShow (3 of 4) SlideShowServiceMethod [System.Web.Services.WebMethod] [System.Web.Script.Services.ScriptMethod] public static AjaxControlToolkit.Slide[] GetSlides() { return new AjaxControlToolkit.Slide[] { } 21
  • 22. Toolkit: SlideShow Examples (4 of 4) SlideShow.aspx SlideShow2.aspx 22
  • 23. Toolkit: UpdatePanel Animation (1 of 3) Let’s you use the Animation framework of the Toolkit to provide a “cooler” set of animations than are supplied by the UpdateProgress control 23
  • 24. Toolkit: UpdatePanel Animation (2 of 3) <ajaxToolkit: UpdatePanelAnimationExtender TargetControlId=“UpdatePanelToExtend”> <Animations> <triggers> <animation action/> </triggers> Triggers: OnUpdating and OnUpdated Animation Actions: same as for AnimationExtender 24
  • 25. Toolkit: UpdatePanel Animation Example (3 of 3) UpdatePanelAnimation.aspx 25
  • 26. Thank You! Paul Litwin I will post the lecture demos after workshop at 26