ASP.NET AJAX Intro

unalaskaweepingInternet and Web Development

Jul 19, 2012 (5 years and 3 months ago)

382 views

Introduction to
Introduction to
ASP.NET AJAX
ASP.NET AJAX
Paul Litwin (
Paul Litwin (
paul@deeptraining.com
paul@deeptraining.com
)
)
Deep Training and
Deep Training and
Fred Hutchinson Cancer Research Center
Fred Hutchinson Cancer Research Center
2
©2007 Deep Training/Superexpert Training
Introduction
Introduction
AJAX enables you to pass information
AJAX enables you to pass information
between a Web browser and Web server
between a Web browser and Web server
without posting to the Web server.
without posting to the Web server.
3
©2007 Deep Training/Superexpert Training
Ingredients for AJAX BUZZ
Ingredients for AJAX BUZZ


Nifty Name
Nifty Name
AJAX = Asynchronous JavaScript and XML
AJAX = Asynchronous JavaScript and XML
(Jesse James Garrett)
(Jesse James Garrett)


Cross Browser Support
Cross Browser Support
Internet Explorer, Firefox and Opera
Internet Explorer, Firefox and Opera


Inspiring Sample Application
Inspiring Sample Application
Google Suggest, Outlook Web Access, etc.
Google Suggest, Outlook Web Access, etc.
4
©2007 Deep Training/Superexpert Training
Ajax Frameworks
Ajax Frameworks


Dojo
Dojo


www.DojoToolkit.
www.DojoToolkit.
org
org


Qooxdoo
Qooxdoo


www.Qooxdoo.org
www.Qooxdoo.org


YUI
YUI


developer.Yahoo.com/yui
developer.Yahoo.com/yui


GWT
GWT


Google Web Toolkit
Google Web Toolkit


Script#
Script#
--
--
C# response to GWT
C# response to GWT


Prototype
Prototype


Dean Edward
Dean Edward


s Base
s Base


Sarissa
Sarissa


Hijax
Hijax


Scriptaculous
Scriptaculous


Lollygag
Lollygag


ASP.NET AJAX Extensions
ASP.NET AJAX Extensions
5
©2007 Deep Training/Superexpert Training
The Technology
The Technology


Internet Explorer
Internet Explorer
Uses
Uses
Microsoft.XmlHttp
Microsoft.XmlHttp
ActiveX Object
ActiveX Object
(IE 7 uses intrinsic object)
(IE 7 uses intrinsic object)


Firefox, Opera, Safari
Firefox, Opera, Safari
Use
Use
XMLHttpRequest
XMLHttpRequest
Intrinsic Browser
Intrinsic Browser
Object
Object
6
©2007 Deep Training/Superexpert Training
ASP.NET Ajax Support
ASP.NET Ajax Support


ASP.NET AJAX Extensions
ASP.NET AJAX Extensions


downloadable for VS 2005
downloadable for VS 2005


built into VS 2008
built into VS 2008


ASP.NET AJAX Control Toolkit
ASP.NET AJAX Control Toolkit


codeplex
codeplex
project
project
http://www.codeplex.com/AtlasControlToolkit
http://www.codeplex.com/AtlasControlToolkit


ASP.NET Futures
ASP.NET Futures


unsupported preview
unsupported preview
7
©2007 Deep Training/Superexpert Training
ASP.NET AJAX Extensions
ASP.NET AJAX Extensions


ScriptManager
ScriptManager


ScriptManagerProxy
ScriptManagerProxy


UpdatePanel
UpdatePanel


Timer
Timer


UpdateProgess
UpdateProgess
8
©2007 Deep Training/Superexpert Training
ScriptManager
ScriptManager


Injects two JavaScript scripts into page
Injects two JavaScript scripts into page


MicrosoftAjax.js
MicrosoftAjax.js


base Ajax library
base Ajax library


MicrosoftAjaxWebForms.js
MicrosoftAjaxWebForms.js


supports partial page rendering
supports partial page rendering
(UpdatePanel)
(UpdatePanel)


ScriptManagerProxy
ScriptManagerProxy


used when
used when
ScriptManager
ScriptManager
in Master page
in Master page
9
©2007 Deep Training/Superexpert Training
UpdatePanel Control
UpdatePanel Control


The big
The big
kahuna
kahuna
of ASP.NET Ajax
of ASP.NET Ajax


Controls placed inside of this control
Controls placed inside of this control
support async calls (partial rendering)
support async calls (partial rendering)


Hijacks post
Hijacks post
-
-
backs and reroutes them as
backs and reroutes them as
async calls
async calls
10
©2007 Deep Training/Superexpert Training
UpdatePanel Control
UpdatePanel Control


Basic demo of the UpdatePanel control
Basic demo of the UpdatePanel control


Demos
Demos


Hello.aspx
Hello.aspx


CascadingDropDownNoAjax.aspx
CascadingDropDownNoAjax.aspx


CasasdingDropDownAjax.aspx
CasasdingDropDownAjax.aspx
11
©2007 Deep Training/Superexpert Training
UpdatePanel Properties
UpdatePanel Properties


ChildrenAsTriggers
ChildrenAsTriggers


bool
bool
which determines whether child controls will
which determines whether child controls will
create async post
create async post
-
-
back
back

default=true
default=true


UpdateMode
UpdateMode


always (default)
always (default)

will update when any UpdatePanel on page
will update when any UpdatePanel on page
does async post
does async post
-
-
back
back


conditional
conditional

only updated by child controls, triggers or
only updated by child controls, triggers or
Update method
Update method
12
©2007 Deep Training/Superexpert Training
Triggers
Triggers


Sometimes you wish to trigger a async call
Sometimes you wish to trigger a async call
from outside of an UpdatePanel control
from outside of an UpdatePanel control


Makes async calls more efficient
Makes async calls more efficient


Two types of triggers
Two types of triggers


Aysnc
Aysnc
postback
postback

performs async post
performs async post
-
-
back
back


this is the one you
this is the one you
want to use 99% of time
want to use 99% of time


Postback
Postback

don
don


t use unless you want a sync post
t use unless you want a sync post
-
-
back
back
13
©2007 Deep Training/Superexpert Training
Triggers Demo
Triggers Demo


Demo of triggers
Demo of triggers


Triggers.aspx
Triggers.aspx
14
©2007 Deep Training/Superexpert Training
Timer Control
Timer Control


Performs
Performs
window.setInterval
window.setInterval
()
()


Can be used inside or outside of
Can be used inside or outside of
UpdatePanel control
UpdatePanel control
15
©2007 Deep Training/Superexpert Training
Timer Control Demo
Timer Control Demo


Timer.aspx
Timer.aspx
16
©2007 Deep Training/Superexpert Training
UpdateProgress
UpdateProgress
Control
Control


Displays progress during long
Displays progress during long
-
-
running
running
async call
async call


Properties
Properties


DisplayAfter
DisplayAfter


time in milliseconds to wait before
time in milliseconds to wait before
displaying progress indicator
displaying progress indicator


by default = 500 (half second)
by default = 500 (half second)


DynamicLayout
DynamicLayout


display:none
display:none
or
or
display:hidden
display:hidden


AssociatedUpdatePanelId
AssociatedUpdatePanelId
17
©2007 Deep Training/Superexpert Training
UpdateProgress
UpdateProgress
Control
Control


Free site to create animated gifs for
Free site to create animated gifs for
progress meters:
progress meters:


http://www.ajaxload.info/
http://www.ajaxload.info/


Examples of
Examples of
UpdateProgress
UpdateProgress
Control
Control


ShowUpdateProgress.aspx
ShowUpdateProgress.aspx


TriggersProgress.aspx
TriggersProgress.aspx
18
©2007 Deep Training/Superexpert Training
Server
Server
-
-
Side Page Execution Life Cycle
Side Page Execution Life Cycle


These events occur for both sync and
These events occur for both sync and
async post
async post
-
-
backs
backs


PreInit
PreInit


Init
Init


Load
Load


PreRender
PreRender


ScriptManager.IsInAsyncPostBack
ScriptManager.IsInAsyncPostBack


Use to detect async post
Use to detect async post
-
-
back
back
19
©2007 Deep Training/Superexpert Training
Client
Client
-
-
Side Page Execution Life Cycle
Side Page Execution Life Cycle


Events
Events


initializeRequest
initializeRequest


beginRequest
beginRequest


pageLoading
pageLoading


pageLoaded
pageLoaded


endRequest
endRequest


Canceling and aborting requests
Canceling and aborting requests


use
use
initializeRequest
initializeRequest
event handler
event handler
20
©2007 Deep Training/Superexpert Training
Multiple Async
Multiple Async
Postbacks
Postbacks


UpdatePanel doesn
UpdatePanel doesn


t support multiple
t support multiple
async
async
postbacks
postbacks


By default, last postback will abort
By default, last postback will abort
previous
previous
postbacks
postbacks
21
©2007 Deep Training/Superexpert Training
Client
Client
-
-
Side Page Execution Life Cycle
Side Page Execution Life Cycle
Demos
Demos


UpdatePanelCancel.aspx
UpdatePanelCancel.aspx


demonstrates how to cancel last postback
demonstrates how to cancel last postback


UpdatePanelAbort.aspx
UpdatePanelAbort.aspx


demonstrates how to cancel a pending
demonstrates how to cancel a pending
postback
postback
22
©2007 Deep Training/Superexpert Training
Performance Considerations
Performance Considerations


ViewState
ViewState


Whole
Whole
-
-
page execution life
page execution life
-
-
cycle
cycle
executes unless you use
executes unless you use
ScriptManager.IsInAsyncPostBack
ScriptManager.IsInAsyncPostBack
property
property


Consider using pure client
Consider using pure client
-
-
side Ajax
side Ajax
23
©2007 Deep Training/Superexpert Training
Handy Ajax Debugging Tools
Handy Ajax Debugging Tools


Fiddler (
Fiddler (
http://fiddler2.com
http://fiddler2.com
)
)


works with IE, Firefox, etc.
works with IE, Firefox, etc.


Tip: Add dot (.) after
Tip: Add dot (.) after
localhost
localhost
so that fiddler
so that fiddler
sees the page
sees the page


E.g.,
E.g.,
http://localhost.:8345/mypage.aspx
http://localhost.:8345/mypage.aspx


Firebug (
Firebug (
https://addons.mozilla.org/en
https://addons.mozilla.org/en
-
-
US/firefox/addon/1843
US/firefox/addon/1843
)
)


Firefox only
Firefox only
24
©2007 Deep Training/Superexpert Training
Performance Demos
Performance Demos


ViewStateEnabled.aspx
ViewStateEnabled.aspx
and
and
ViewStateDisabled.aspx
ViewStateDisabled.aspx


Use fiddler and SQL Profiler to see data
Use fiddler and SQL Profiler to see data
being passed around
being passed around


See table on next slide
See table on next slide
25
©2007 Deep Training/Superexpert Training
Measuring Bandwidth Usage with
Measuring Bandwidth Usage with
Fiddler: An Example
Fiddler: An Example
4,7862,4819,5497,71916,8707,693Saving
unchanged
child record
3,8892,6188,9727,68617,9947,785Saving
unchanged
parent record
11,8132,13216,5527,71817,6547,922Selecting a
record
Response
Bytes
Request
Bytes
Response
Bytes
Request
Bytes
Response
Bytes
Request
Bytes
Four UpdatePanel controls
with ViewState Disabled
Four UpdatePanel controls
with ViewState Enabled
No UpdatePanels;
ViewState Enabled
Operation
26
©2007 Deep Training/Superexpert Training
ASP.NET Ajax Toolkit
ASP.NET Ajax Toolkit


34 Controls
34 Controls


Updated every couple of months or so
Updated every couple of months or so


Source
Source
-
-
code available
code available


A community project
A community project


hosted on
hosted on
CodePlex
CodePlex


Not an officially
Not an officially
-
-
supported Microsoft
supported Microsoft
product (though Microsoft is heavily
product (though Microsoft is heavily
involved)
involved)
27
©2007 Deep Training/Superexpert Training
ASP.NET Ajax Toolkit
ASP.NET Ajax Toolkit


Most of toolkit controls are
Most of toolkit controls are
extender
extender
controls
controls


An extender is a control which extends
An extender is a control which extends
the functionality of another control
the functionality of another control


VS 2008 integrates extender controls
VS 2008 integrates extender controls
into IDE designer
into IDE designer
28
©2007 Deep Training/Superexpert Training
Toolkit Controls (2007
Toolkit Controls (2007
-
-
11
11
-
-
19 release)
19 release)

Accordion
Accordion

AlwaysVisibleControl
AlwaysVisibleControl

Animation
Animation

AutoComplete
AutoComplete

Calendar
Calendar

CascadingDropDown
CascadingDropDown

CollapsiblePanel
CollapsiblePanel

ConfirmButton
ConfirmButton

DragPanel
DragPanel

DropDown
DropDown

DropShadow
DropShadow

DynamicPopulate
DynamicPopulate

FilteredTextBox
FilteredTextBox

HoverMenu
HoverMenu

ListSearch
ListSearch

MaskedEdit
MaskedEdit

ModalPopup
ModalPopup

MutuallyExclusiveCheckBox
MutuallyExclusiveCheckBox

NoBot
NoBot

NumericUpDown
NumericUpDown

PagingBulletedList
PagingBulletedList

PasswordStrength
PasswordStrength

PopupControl
PopupControl

Rating
Rating

ReorderList
ReorderList

ResizableControl
ResizableControl

RoundedCorners
RoundedCorners

Slider
Slider

SlideShow
SlideShow

Tabs
Tabs

TextBoxWatermark
TextBoxWatermark

ToggleButton
ToggleButton

UpdatePanelAnimation
UpdatePanelAnimation

ValidatorCallout
ValidatorCallout
29
©2007 Deep Training/Superexpert Training
Toolkit
Toolkit


You can download VS 2005 and VS 2008
You can download VS 2005 and VS 2008
versions with or without source code
versions with or without source code


To add toolkit to toolbox
To add toolkit to toolbox
1.
1.
On toolbar, Add Tab
On toolbar, Add Tab
2.
2.
Choose Items
Choose Items


3.
3.
Browse
Browse


to
to
SampleWebSite
SampleWebSite
\
\
bin
bin
\
\
AjaxControlToolkit.dll
AjaxControlToolkit.dll


To get easy access to docs
To get easy access to docs


Point share to
Point share to
SampleWebSite
SampleWebSite
folder
folder
30
©2007 Deep Training/Superexpert Training
Client
Client
-
-
Side Ajax
Side Ajax


SOAP vs. JSON
SOAP vs. JSON


SOAP = Simple Object Access Protocol
SOAP = Simple Object Access Protocol


XML is not simple and not concise
XML is not simple and not concise


JSON = JavaScript Object Notation
JSON = JavaScript Object Notation


lightweight data
lightweight data
-
-
interchange format
interchange format


lean and mean
lean and mean
31
©2007 Deep Training/Superexpert Training
Client
Client
-
-
Side Ajax
Side Ajax


Calling services from the client using JSON
Calling services from the client using JSON


Web Methods
Web Methods


Web services
Web services


Page methods
Page methods


Application Services
Application Services


Authentication service
Authentication service


Role service (VS 2008 only)
Role service (VS 2008 only)


Profile service
Profile service
32
©2007 Deep Training/Superexpert Training
Registering a Service Reference
Registering a Service Reference
for a Web Service Call
for a Web Service Call
<
<
asp:ScriptManager
asp:ScriptManager
ID="ScriptManager1"
ID="ScriptManager1"
runat
runat
="server">
="server">
<Services>
<Services>
<
<
asp:ServiceReference
asp:ServiceReference
Path="~/Services/
Path="~/Services/
QuotationService.asmx
QuotationService.asmx
" />
" />
</Services>
</Services>
</
</
asp:ScriptManager
asp:ScriptManager
>
>
33
©2007 Deep Training/Superexpert Training
Calling Web Service from Client
Calling Web Service from Client
<script type="text/
<script type="text/
javascript
javascript
">
">
function
function
pageLoad
pageLoad
()
()
{
{
QuotationService.
QuotationService.
GetQuote(getQuoteSuccess
GetQuote(getQuoteSuccess
,
,
getQuoteFail
getQuoteFail
);
);
}
}
function
function
getQuoteSuccess(result
getQuoteSuccess(result
)
)
{
{
$
$
get("spanQuote").innerHTML
get("spanQuote").innerHTML
= result;
= result;
}
}
function
function
getQuoteFail(error
getQuoteFail(error
)
)
{
{
alert(error.get_message
alert(error.get_message
());
());
}
}
</script>
</script>
[
[
ScriptService
ScriptService
]
]
public class
public class
QuotationService
QuotationService
:
:
System.Web.Services.WebService
System.Web.Services.WebService
{
{


34
©2007 Deep Training/Superexpert Training
Registering a Service Reference
Registering a Service Reference
for a Page Method Call
for a Page Method Call
<
<
asp:ScriptManager
asp:ScriptManager
ID="ScriptManager1"
ID="ScriptManager1"
EnablePageMethods
EnablePageMethods
="true"
="true"
runat
runat
="server />
="server />
35
©2007 Deep Training/Superexpert Training
Calling Page Method from Client
Calling Page Method from Client
<script type="text/
<script type="text/
javascript
javascript
">
">
function
function
pageLoad
pageLoad
()
()
{
{
PageMethods.
PageMethods.
GetQuote(getQuoteSuccess
GetQuote(getQuoteSuccess
,
,
getQuoteFail
getQuoteFail
);
);
}
}
function
function
getQuoteSuccess(result
getQuoteSuccess(result
)
)
{
{
$
$
get("spanQuote").innerHTML
get("spanQuote").innerHTML
= result;
= result;
}
}
function
function
getQuoteFail(error
getQuoteFail(error
)
)
{
{
alert(error.get_message
alert(error.get_message
());
());
}
}
</script>
</script>
[
[
System.Web.Services.WebMethod
System.Web.Services.WebMethod
]
]
public static string
public static string
GetQuote
GetQuote
()
()
{
{


36
©2007 Deep Training/Superexpert Training
Calling Web Service from
Calling Web Service from
Client Example
Client Example


ShowQuoteService.aspx
ShowQuoteService.aspx


Illustrates use of both Page Method call and
Illustrates use of both Page Method call and
Web Service call (to
Web Service call (to
QuoteService.asmx
QuoteService.asmx
)
)
from client
from client
37
©2007 Deep Training/Superexpert Training
Thank You!
Thank You!


Paul Litwin
Paul Litwin


paul@deeptraining.com
paul@deeptraining.com


www.deeptraining.com
www.deeptraining.com


I will post the lecture demos after
I will post the lecture demos after
workshop at
workshop at


www.deeptraining.com/litwin
www.deeptraining.com/litwin