Introduction to Introduction to ASP.NET AJAX ASP.NET AJAX
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

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

on

  • 1,517 views

 

Statistics

Views

Total Views
1,517
Views on SlideShare
1,511
Embed Views
6

Actions

Likes
0
Downloads
61
Comments
0

1 Embed 6

http://www.slideshare.net 6

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Introduction to Introduction to ASP.NET AJAX ASP.NET AJAX Presentation 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