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 server.

© 2007 Deep Training/Superexpert Training 2

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

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
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

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

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

© 2007 Deep Training/Superexpert Training 7

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

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

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

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

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

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

© 2007 Deep Training/Superexpert Training 14

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 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
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

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

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

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

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

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

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

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

 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

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

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

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
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
SampleWebSite\bin\AjaxControlToolkit.dll
l To get easy access to docs
l Point share to SampleWebSite folder

© 2007 Deep Training/Superexpert Training 29

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

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

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

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
Registering a Service Reference
for a Page Method Call
<asp:ScriptManager ID="ScriptManager1"
EnablePageMethods="true"
runat="server />

© 2007 Deep Training/Superexpert Training 34

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
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

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