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

1,208

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,208
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
62
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Introduction to ASP.NET AJAX Paul Litwin (paul@deeptraining.com ) Deep Training and Fred Hutchinson Cancer Research Center
  • 2. Introduction AJAX enables you to pass information between a Web browser and Web server without posting to the Web server. © 2007 Deep Training/Superexpert Training 2
  • 3. Ingredients for AJAX BUZZ u Nifty Name AJAX = Asynchronous JavaScript and XML (Jesse James Garrett) u Cross Browser Support Internet Explorer, Firefox and Opera u Inspiring Sample Application Google Suggest, Outlook Web Access, etc. © 2007 Deep Training/Superexpert Training 3
  • 4. Ajax Frameworks u Dojo – www.DojoToolkit.org u Qooxdoo – www.Qooxdoo.org u YUI – developer.Yahoo.com/yui u GWT – Google Web Toolkit u Script# -- C# response to GWT u Prototype u Dean Edward’s Base u Sarissa u Hijax u Scriptaculous u Lollygag u ASP.NET AJAX Extensions © 2007 Deep Training/Superexpert Training 4
  • 5. The Technology u Internet Explorer Uses Microsoft.XmlHttp ActiveX Object (IE 7 uses intrinsic object) u Firefox, Opera, Safari Use XMLHttpRequest Intrinsic Browser Object © 2007 Deep Training/Superexpert Training 5
  • 6. ASP.NET Ajax Support u ASP.NET AJAX Extensions l downloadable for VS 2005 l built into VS 2008 u ASP.NET AJAX Control Toolkit l codeplex project http://www.codeplex.com/AtlasControlToolkit u ASP.NET Futures l unsupported preview © 2007 Deep Training/Superexpert Training 6
  • 7. ASP.NET AJAX Extensions u ScriptManager u ScriptManagerProxy u UpdatePanel u Timer u UpdateProgess © 2007 Deep Training/Superexpert Training 7
  • 8. ScriptManager u Injects two JavaScript scripts into page l MicrosoftAjax.js n base Ajax library l MicrosoftAjaxWebForms.js n supports partial page rendering (UpdatePanel) u ScriptManagerProxy l used when ScriptManager in Master page © 2007 Deep Training/Superexpert Training 8
  • 9. UpdatePanel Control u The big kahuna of ASP.NET Ajax u Controls placed inside of this control support async calls (partial rendering) u Hijacks post-backs and reroutes them as async calls © 2007 Deep Training/Superexpert Training 9
  • 10. UpdatePanel Control u Basic demo of the UpdatePanel control u Demos l Hello.aspx l CascadingDropDownNoAjax.aspx l CasasdingDropDownAjax.aspx © 2007 Deep Training/Superexpert Training 10
  • 11. UpdatePanel Properties u ChildrenAsTriggers l bool which determines whether child controls will create async post -back n default=true u UpdateMode l always (default) n will update when any UpdatePanel on page does async post-back l conditional n only updated by child controls, triggers or Update method © 2007 Deep Training/Superexpert Training 11
  • 12. Triggers u Sometimes you wish to trigger a async call from outside of an UpdatePanel control u Makes async calls more efficient u Two types of triggers l Aysnc postback n performs async post -back – this is the one you want to use 99% of time l Postback n don ’t use unless you want a sync post -back © 2007 Deep Training/Superexpert Training 12
  • 13. Triggers Demo u Demo of triggers l Triggers.aspx © 2007 Deep Training/Superexpert Training 13
  • 14. Timer Control u Performs window.setInterval() u Can be used inside or outside of UpdatePanel control © 2007 Deep Training/Superexpert Training 14
  • 15. Timer Control Demo u Timer.aspx © 2007 Deep Training/Superexpert Training 15
  • 16. UpdateProgress Control u Displays progress during long-running async call u Properties l DisplayAfter n time in milliseconds to wait before displaying progress indicator – by default = 500 (half second) l DynamicLayout n display:none or display:hidden l AssociatedUpdatePanelId © 2007 Deep Training/Superexpert Training 16
  • 17. UpdateProgress Control u Free site to create animated gifs for progress meters: l http://www.ajaxload.info/ u Examples of UpdateProgress Control l ShowUpdateProgress.aspx l TriggersProgress.aspx © 2007 Deep Training/Superexpert Training 17
  • 18. Server-Side Page Execution Life Cycle u These events occur for both sync and async post-backs l PreInit l Init l Load l PreRender u ScriptManager.IsInAsyncPostBack l Use to detect async post-back © 2007 Deep Training/Superexpert Training 18
  • 19. Client-Side Page Execution Life Cycle u Events l initializeRequest l beginRequest l pageLoading l pageLoaded l endRequest u Canceling and aborting requests l use initializeRequest event handler © 2007 Deep Training/Superexpert Training 19
  • 20. Multiple Async Postbacks u UpdatePanel doesn’t support multiple async postbacks u By default, last postback will abort previous postbacks © 2007 Deep Training/Superexpert Training 20
  • 21. Client-Side Page Execution Life Cycle Demos u UpdatePanelCancel.aspx l demonstrates how to cancel last postback u UpdatePanelAbort.aspx l demonstrates how to cancel a pending postback © 2007 Deep Training/Superexpert Training 21
  • 22. Performance Considerations u ViewState u Whole-page execution life-cycle executes unless you use ScriptManager.IsInAsyncPostBack property u Consider using pure client-side Ajax © 2007 Deep Training/Superexpert Training 22
  • 23. Handy Ajax Debugging Tools u Fiddler (http://fiddler2.com) l works with IE, Firefox, etc. l Tip: Add dot (.) after localhost so that fiddler sees the page n E.g., http://localhost.:8345/mypage.aspx u Firebug (https://addons.mozilla.org/en- US/firefox/addon/1843) l Firefox only © 2007 Deep Training/Superexpert Training 23
  • 24. Performance Demos u ViewStateEnabled.aspx and ViewStateDisabled.aspx l Use fiddler and SQL Profiler to see data being passed around l See table on next slide © 2007 Deep Training/Superexpert Training 24
  • 25. Measuring Bandwidth Usage with Fiddler: An Example Operation No UpdatePanels; Four UpdatePanel controls Four UpdatePanel controls ViewState Enabled with ViewState Enabled with ViewState Disabled Request Response Request Response Request Response Bytes Bytes Bytes Bytes Bytes Bytes Selecting a 7,922 17,654 7,718 16,552 2,132 11,813 record Saving 7,785 17,994 7,686 8,972 2,618 3,889 unchanged parent record Saving 7,693 16,870 7,719 9,549 2,481 4,786 unchanged child record © 2007 Deep Training/Superexpert Training 25
  • 26. ASP.NET Ajax Toolkit u 34 Controls u Updated every couple of months or so u Source-code available u A community project l hosted on CodePlex l Not an officially-supported Microsoft product (though Microsoft is heavily involved) © 2007 Deep Training/Superexpert Training 26
  • 27. ASP.NET Ajax Toolkit u Most of toolkit controls are extender controls u An extender is a control which extends the functionality of another control u VS 2008 integrates extender controls into IDE designer © 2007 Deep Training/Superexpert Training 27
  • 28. Toolkit Controls (2007-11-19 release) u Accordion u NoBot u AlwaysVisibleControl u NumericUpDown u Animation u AutoComplete u PagingBulletedList u Calendar u PasswordStrength u CascadingDropDown u PopupControl u CollapsiblePanel u Rating u ConfirmButton u ReorderList u DragPanel u DropDown u ResizableControl u DropShadow u RoundedCorners u DynamicPopulate u Slider u FilteredTextBox u SlideShow u HoverMenu u ListSearch u Tabs u MaskedEdit u TextBoxWatermark u ModalPopup u ToggleButton u MutuallyExclusiveCheckBox u UpdatePanelAnimation u ValidatorCallout © 2007 Deep Training/Superexpert Training 28
  • 29. Toolkit u You can download VS 2005 and VS 2008 versions with or without source code u To add toolkit to toolbox 1. On toolbar, Add Tab 2. Choose Items … 3. Browse… to SampleWebSitebinAjaxControlToolkit.dll l To get easy access to docs l Point share to SampleWebSite folder © 2007 Deep Training/Superexpert Training 29
  • 30. Client-Side Ajax u SOAP vs. JSON u SOAP = Simple Object Access Protocol l XML is not simple and not concise u JSON = JavaScript Object Notation l lightweight data-interchange format l lean and mean © 2007 Deep Training/Superexpert Training 30
  • 31. Client-Side Ajax u Calling services from the client using JSON u Web Methods l Web services l Page methods u Application Services l Authentication service l Role service (VS 2008 only) l Profile service © 2007 Deep Training/Superexpert Training 31
  • 32. Registering a Service Reference for a Web Service Call <asp:ScriptManager ID="ScriptManager1" runat="server"> <Services> <asp:ServiceReference Path="~/Services/QuotationService.asmx" /> </Services> </asp:ScriptManager> © 2007 Deep Training/Superexpert Training 32
  • 33. Calling Web Service from Client [ScriptService] public class QuotationService : System.Web.Services.WebService {… <script type="text/ javascript"> function pageLoad() { QuotationService.GetQuote(getQuoteSuccess, getQuoteFail); } function getQuoteSuccess(result) { $get("spanQuote").innerHTML = result; } function getQuoteFail(error) { alert(error.get_message()); } </script> © 2007 Deep Training/Superexpert Training 33
  • 34. Registering a Service Reference for a Page Method Call <asp:ScriptManager ID="ScriptManager1" EnablePageMethods="true" runat="server /> © 2007 Deep Training/Superexpert Training 34
  • 35. Calling Page Method from Client [System.Web.Services.WebMethod ] public static string GetQuote() {… <script type="text/ javascript"> function pageLoad() { PageMethods.GetQuote(getQuoteSuccess, getQuoteFail); } function getQuoteSuccess(result) { $get("spanQuote").innerHTML = result; } function getQuoteFail(error) { alert(error.get_message()); } </script> © 2007 Deep Training/Superexpert Training 35
  • 36. Calling Web Service from Client Example u ShowQuoteService.aspx l Illustrates use of both Page Method call and Web Service call (to QuoteService.asmx) from client © 2007 Deep Training/Superexpert Training 36
  • 37. Thank You! u Paul Litwin l paul@deeptraining.com l www.deeptraining.com u I will post the lecture demos after workshop at l www.deeptraining.com/litwin © 2007 Deep Training/Superexpert Training 37

×