Ajax Tips & Tricks

1. Ajax Tips & Tricks Gill Cleeren Microsoft Regional Director MVP ASP.NETOrdina .net software architect

2. About Gill... • .net architect Ordina (www.ordina.be) • Microsoft Regional Director (www.theregion.com) • MVP ASP.net • Writing: • .net magazine • Blogs • MSDN • Speaking: • TechDays • Usergroups(Visug, Biwug, Besug) • Ineta speaker • Blog: www.snowball.be • Email: gill.cleeren@ordina.be • Twitter: gillcleeren / MSN: gillcleeren@hotmail.com

3. I present you... the tips • Creating a custom extender in ASP.NET Ajax • Managing the history client and server side • Using ASP.NET authentication in Ajax • Adding controls dynamically using Ajax UpdatePanel • Localization in ASP.NET Ajax • No bots on my site! • Slide that data! • Animations in Ajax

4. 1 Creating a custom extender in ASP.NET Ajax

5. Creating a custom extender • Derives from System.Web.UI.ExtenderControl • Used to add functionality to existing control • Encapsulate behavior in an extender • ASP.NET Ajax Control toolkit is great example • You can create your own!

6. Creating acustom extenderin ASP.NET Ajax Demo

7. 2 Managing the historyclient side and server side

8. Managing the history client and server side • Without Ajax, postbacks are seen by the browser • Ajax/JS brought more functionality to the same page • Impossible for a browser to know what should be kept as a history point • Users may want to undo work done on a page instead of navigating back to previous page • Ajax History can solve this

9. Ajax history • ScriptManager includes, thanks to Ajax history... • Three properties: • EnableHistory • EnableSecureHistoryState • IsNavigating • One method: AddHistoryPoint • One event: Navigate

10. Managing the historyclient sideand server side Demo

11. 3 Using ASP.NET authentication in Ajax

12. Using ASP.NET authentication and profiling in Ajax • ASP.NET Ajax contains Authentication Service • Called through JavaScript proxy • Available in Sys.Services namespace • Will use ASP.NET defaults if not otherwise configured • Authentication, Profiling, Roles... are supported • Each through a seperate service

13. Authentication and the Authentication service • Recap: what is authentication? • Most used is Forms authentication • In Ajax, exposed through service • Allows user to receive cookie • Compatible with normal authentication • Nothing will be broken if you introduce this in your applications

14. Profiling and the Profiling Service • Recap: what is Profiling? • In Ajax, exposed through service • Allows storage of user data based on membership as provided by the Authentication service • Compatible with ASP.NET profile info

15. Using ASP.NET authenticationin Ajax Demo

16. 4 Adding controlsdynamicallyusing Ajax UpdatePanel

17. 4. Adding controls dynamically using Ajax UpdatePanel

18. Adding controlsdynamicallyusing Ajax UpdatePanel Demo

19. 5 Localization in ASP.NET Ajax

20. Localization in Ajax • Broken down into two features • Script Globalization • Script Localization • Corresponds to how ASP.NET Localization is split • Script Globalization = CurrentCulture • Responsible for formatting dates and numbers • Script Localization = CurrentUICulture • Responsible for providing localized strings

21. Script Globalization • Provides features to parse and format dates using the local and invariant cultures • Enabling Script Globalization • Controlled by the ScriptManager • <asp:ScriptManagerEnableScriptGlobalization="True“ • Default is disabled • Without Script Globalization enabled, invariant and local methods work the same

22. Script Globalization • Examples: • date.localeFormat(formatString); • Date.parseLocale (string); • Date.parseLocale(“25/12/2008”);  Dec 25, 2008 • Date.parseInvariant (string); • Date.parseInvariant (“12/25/2008”);

23. Script Localization • Purpose: To provided localized strings • Two Models • Embedded-Resource • Combine localized resources with an embedded JS file at runtime to produce a localized version of that file • Similar to Resource Management in ASP.NET • Static-file • Replace the entire JS file with a localized version

24. Static file • Enabling Script Localization • ScriptManager is in Control • <asp:ScriptManagerEnableScriptLocalization="true" • Enabled by default

25. Embedded Model • Used for Controls • Create a single JS file • Create localized resource files • Associate resource file to JS file • ScriptResource attribute in assembly.cs • [assembly:ScriptResource(JSFileName, ResourceFileName, ClientName] • [assembly: ScriptResource( • "Localization.Controls.ClientScript.CurrencyTextBox.js", • "Localization.Controls.ClientResources.CurrencyTextBox", • "CurrencyTextBox.Res")] • ASP.NET AJAX embeds resource file into JS file at runtime

26. Localization inASP.NET Ajax Demo

27. 6 No bots on my site!

28. Securing your applications with the Ajax NoBot control • Provides CAPTCHA-like bot/spam prevention without requiring any user interaction • Can be passed-by however (not 100% fool-proof) • Completely invisible • OK for small apps

29. Some NoBot capabilities • Perform a JavaScript calculation • OnGenerateChallengeAndResponse • Enforce a delay • ResponseMinimumDelaySeconds • Accept only number of requests of certain IP in specific amount of time • CutoffWindowSeconds • CutoffMaximumInstances

30. No bots on my site! Demo

31. 7 Slide that data!

32. Using the Slider • Slider extender extends a TextBox • Allows selection out of a finite range • Can be set to allow only selection of specific values • GridViews know the amount of pages they have • Why not combine these 2?

33. Slide that data! Demo

34. 8 Animations in Ajax

35. Animations in Ajax • ACT contains powerful animation framework • Implemented in JavaScript as an ASP.NET AJAX class hierarchy • To be invoked via JS by calling the Animation's play method • Quite difficult • Also possible to declare animations from XML • Extenders with animation support expose events (ex. OnClick) that can be associated with an XML animation • Simply sepcify animations you want to happen

36. Example <ajaxToolkit:AnimationExtender id="MyExtender" runat="server" TargetControlID="MyPanel"> <Animations> <OnClick> <FadeOut Duration=".5" Fps="20" /> </OnClick> </Animations> </ajaxToolkit:AnimationExtender>

37. Animations in Ajax • Each event can only have 1 XML child node • Each animation corresponds to a JavaScript class • FadeIn maps to AjaxControlToolkit.Animation.FadeInAnimation • Name of animation is class name • XML attributes map to properties <Resize Width="200" Height="300" Unit="px" />

38. I want more than 1 animation! • Possible with Parallel and Sequence animation • Parallel: run simultaneously • Sequence: run one after the other <Sequence> <Pulse Duration=".1" /> <Parallel Duration=".5" Fps="30"> <FadeOut /> <Scale ScaleFactor="5" Unit="px" Center="true" ScaleFont="true" FontUnit="pt" /> </Parallel> </Sequence>

39. Me, I want action! • Actions perform an instantaneous operation • Sometimes useful for polishing an animation • Types: • EnableAction • StyleAction • HideAction

40. Animations in Ajax Demo

41. Ajax Tips & Tricks Gill Cleeren Microsoft Regional Director MVP ASP.NETOrdina .net software architect