0
Introduction to
ASP.NET AJAX

Paul Litwin (paul@deeptraining.com )
Deep Training and
Fred Hutchinson Cancer Research Center
Introduction
  AJAX enables you to pass information
  between a Web browser and Web server
  without posting to the Web se...
Ingredients for AJAX BUZZ
u   Nifty Name
    AJAX = Asynchronous JavaScript and XML
    (Jesse James Garrett)


u   Cross ...
Ajax Frameworks
u   Dojo – www.DojoToolkit.org
u   Qooxdoo – www.Qooxdoo.org
u   YUI – developer.Yahoo.com/yui
u   GWT – G...
The Technology
u   Internet Explorer
    Uses Microsoft.XmlHttp ActiveX Object
    (IE 7 uses intrinsic object)


u   Fire...
ASP.NET Ajax Support
u   ASP.NET AJAX Extensions
    l downloadable for VS 2005
    l built into VS 2008

u   ASP.NET AJAX...
ASP.NET AJAX Extensions
u   ScriptManager
u   ScriptManagerProxy
u   UpdatePanel
u   Timer
u   UpdateProgess




        ©...
ScriptManager
u   Injects two JavaScript scripts into page
    l MicrosoftAjax.js
      n base Ajax library

    l Microso...
UpdatePanel Control
u   The big kahuna of ASP.NET Ajax
u   Controls placed inside of this control
    support async calls ...
UpdatePanel Control
u   Basic demo of the UpdatePanel control
u   Demos
    l Hello.aspx
    l CascadingDropDownNoAjax.asp...
UpdatePanel Properties
u   ChildrenAsTriggers
    l   bool which determines whether child controls will
        create asy...
Triggers
u   Sometimes you wish to trigger a async call
    from outside of an UpdatePanel control
u   Makes async calls m...
Triggers Demo
u   Demo of triggers
    l   Triggers.aspx




            © 2007 Deep Training/Superexpert Training   13
Timer Control
u   Performs window.setInterval()
u   Can be used inside or outside of
    UpdatePanel control




         ...
Timer Control Demo
u   Timer.aspx




         © 2007 Deep Training/Superexpert Training   15
UpdateProgress Control
u   Displays progress during long-running
    async call
u   Properties
    l DisplayAfter
       n...
UpdateProgress Control
u   Free site to create animated gifs for
    progress meters:
    l   http://www.ajaxload.info/
u ...
Server-Side Page Execution Life Cycle

u   These events occur for both sync and
    async post-backs
    l PreInit
    l I...
Client-Side Page Execution Life Cycle

u   Events
    l initializeRequest
    l beginRequest
    l pageLoading
    l pageL...
Multiple Async Postbacks

u   UpdatePanel doesn’t support multiple
    async postbacks
u   By default, last postback will ...
Client-Side Page Execution Life Cycle
Demos
u   UpdatePanelCancel.aspx
    l   demonstrates how to cancel last postback
u ...
Performance Considerations
u   ViewState
u   Whole-page execution life-cycle
    executes unless you use
    ScriptManager...
Handy Ajax Debugging Tools
u   Fiddler (http://fiddler2.com)
    l works with IE, Firefox, etc.
    l Tip: Add dot (.) aft...
Performance Demos
u   ViewStateEnabled.aspx and
    ViewStateDisabled.aspx
    l Use fiddler and SQL Profiler to see data
...
Measuring Bandwidth Usage with
  Fiddler: An Example
Operation       No UpdatePanels;         Four UpdatePanel controls   ...
ASP.NET Ajax Toolkit
u   34 Controls
u   Updated every couple of months or so
u   Source-code available
u   A community pr...
ASP.NET Ajax Toolkit
u   Most of toolkit controls are extender
    controls
u   An extender is a control which extends
   ...
Toolkit Controls (2007-11-19 release)
u   Accordion                      u    NoBot
u   AlwaysVisibleControl           u  ...
Toolkit
u   You can download VS 2005 and VS 2008
    versions with or without source code
u   To add toolkit to toolbox
  ...
Client-Side Ajax
u   SOAP vs. JSON
u   SOAP = Simple Object Access Protocol
    l   XML is not simple and not concise
u   ...
Client-Side Ajax
u   Calling services from the client using JSON
u   Web Methods
    l Web services
    l Page methods

u ...
Registering a Service Reference
for a Web Service Call
<asp:ScriptManager ID="ScriptManager1"
 runat="server">
  <Services...
Calling Web Service from Client
[ScriptService]
public class QuotationService : System.Web.Services.WebService
{…


<scrip...
Registering a Service Reference
for a Page Method Call
<asp:ScriptManager ID="ScriptManager1"
 EnablePageMethods="true"
 r...
Calling Page Method from Client
[System.Web.Services.WebMethod ]
public static string GetQuote()
{…


<script type="text/ ...
Calling Web Service from
Client Example
u   ShowQuoteService.aspx
    l   Illustrates use of both Page Method call and
   ...
Thank You!
u   Paul Litwin
    l paul@deeptraining.com
    l www.deeptraining.com



u   I will post the lecture demos aft...
Upcoming SlideShare
Loading in...5
×

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

1,221

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,221
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
62
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Introduction to Introduction to ASP.NET AJAX ASP.NET AJAX"

  1. 1. Introduction to ASP.NET AJAX Paul Litwin (paul@deeptraining.com ) Deep Training and Fred Hutchinson Cancer Research Center
  2. 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. 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. 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. 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. 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. 7. ASP.NET AJAX Extensions u ScriptManager u ScriptManagerProxy u UpdatePanel u Timer u UpdateProgess © 2007 Deep Training/Superexpert Training 7
  8. 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. 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. 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. 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. 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. 13. Triggers Demo u Demo of triggers l Triggers.aspx © 2007 Deep Training/Superexpert Training 13
  14. 14. Timer Control u Performs window.setInterval() u Can be used inside or outside of UpdatePanel control © 2007 Deep Training/Superexpert Training 14
  15. 15. Timer Control Demo u Timer.aspx © 2007 Deep Training/Superexpert Training 15
  16. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×