Upload
notonlymine
View
229
Download
0
Embed Size (px)
Citation preview
8/8/2019 ASP Net Ajax Intro Slides
1/37
Introduction toIntroduction toASP.NET AJAXASP.NET AJAX
Paul Litwin (Paul Litwin ([email protected]@deeptraining.com))Deep Training andDeep Training andFred Hutchinson Cancer Research CenterFred Hutchinson Cancer Research Center
8/8/2019 ASP Net Ajax Intro Slides
2/37
2 2007 Deep Training/ Superexpert Training
IntroductionIntroduction
AJAX enables you to pass informationAJAX enables you to pass informationbetween a Web browser and Web serverbetween a Web browser and Web serverwithout posting to the Web server.without posting to the Web server.
8/8/2019 ASP Net Ajax Intro Slides
3/37
3 2007 Deep Training/ Superexpert Training
Ingredients for AJAX BUZZIngredients for AJAX BUZZ
uu Nifty NameNifty NameAJAX = Asynchronous JavaScript and XMLAJAX = Asynchronous JavaScript and XML(Jesse James Garrett)(Jesse James Garrett)
uu Cross Browser SupportCross Browser Support
Internet Explorer, Firefox and OperaInternet Explorer, Firefox and Opera
uu Inspiring Sample ApplicationInspiring Sample Application
Google Suggest, Outlook Web Access, etc.Google Suggest, Outlook Web Access, etc.
8/8/2019 ASP Net Ajax Intro Slides
4/37
4 2007 Deep Training/ Superexpert Training
Ajax Framew orksAjax Framew orks
uu
DojoDojo www.DojoToolkit.www.DojoToolkit.orgorguu QooxdooQooxdoo www.Qooxdoo.orgwww.Qooxdoo.org
uu YUIYUI developer.Yahoo.com/yuideveloper.Yahoo.com/yui
uu GWTGWT Google Web ToolkitGoogle Web Toolkit
uu
Script#Script# ---- C# response to GWTC# response to GWTuu PrototypePrototype
uu Dean EdwardDean Edwards Bases Base
uu SarissaSarissa
uu
HijaxHijaxuu ScriptaculousScriptaculous
uu LollygagLollygag
uu ASP.NET AJAX ExtensionsASP.NET AJAX Extensions
8/8/2019 ASP Net Ajax Intro Slides
5/37
5 2007 Deep Training/ Superexpert Training
The TechnologyThe Technology
uu Internet ExplorerInternet ExplorerUsesUses Microsoft.XmlHttpMicrosoft.XmlHttpActiveX ObjectActiveX Object
(IE 7 uses intrinsic object)(IE 7 uses intrinsic object)
uu Firefox , Opera, SafariFirefox , Opera, Safari
UseUse XMLHttpRequestXMLHttpRequest Intrinsic BrowserIntrinsic BrowserObjectObject
8/8/2019 ASP Net Ajax Intro Slides
6/37
6 2007 Deep Training/ Superexpert Training
ASP .NET Ajax SupportASP .NET Ajax Support
uu ASP.NET AJAX ExtensionsASP.NET AJAX Extensionsll downloadable for VS 2005downloadable for VS 2005
ll built into VS 2008built into VS 2008
uu ASP.NET AJAX Control ToolkitASP.NET AJAX Control Toolkitll codeplexcodeplex projectproject
http://www.codeplex.com/AtlasControlToolkithttp://www.codeplex.com/AtlasControlToolkit
uu
ASP.NET FuturesASP.NET Futuresll unsupported previewunsupported preview
8/8/2019 ASP Net Ajax Intro Slides
7/37
7 2007 Deep Training/ Superexpert Training
ASP .NET AJAX ExtensionsASP .NET AJAX Extensions
uu ScriptManagerScriptManageruu ScriptManagerProxyScriptManagerProxy
uu UpdatePanelUpdatePanel
uu TimerTimer
uu UpdateProgessUpdateProgess
8/8/2019 ASP Net Ajax Intro Slides
8/37
8 2007 Deep Training/ Superexpert Training
ScriptManagerScriptManager
uu Injects two JavaScript scripts into pageInjects two JavaScript scripts into pagell MicrosoftAjax.jsMicrosoftAjax.js
nn base Ajax librarybase Ajax library
ll MicrosoftAjaxWebForms.jsMicrosoftAjaxWebForms.jsnn supports partial page renderingsupports partial page rendering
(UpdatePanel)(UpdatePanel)
uu ScriptManagerProxyScriptManagerProxy
ll used whenused when ScriptManagerScriptManager in Master pagein Master page
8/8/2019 ASP Net Ajax Intro Slides
9/37
9 2007 Deep Training/ Superexpert Training
UpdatePanel ControlUpdatePanel Control
uu The bigThe big kahunakahuna of ASP.NET Ajaxof ASP.NET Ajaxuu Controls placed inside of this controlControls placed inside of this control
support async calls (partial rendering)support async calls (partial rendering)
uu Hijacks postHijacks post--backs and reroutes them asbacks and reroutes them asasync callsasync calls
8/8/2019 ASP Net Ajax Intro Slides
10/37
10 2007 Deep Training/ Superexpert Training
UpdatePanel ControlUpdatePanel Control
uu Basic demo of the UpdatePanel controlBasic demo of the UpdatePanel controluu DemosDemos
ll Hello.aspxHello.aspx
ll CascadingDropDownNoAjax.aspxCascadingDropDownNoAjax.aspxll CasasdingDropDownAjax.aspxCasasdingDropDownAjax.aspx
8/8/2019 ASP Net Ajax Intro Slides
11/37
11 2007 Deep Training/ Superexpert Training
UpdatePanel PropertiesUpdatePanel Properties
uu ChildrenAsTriggersChildrenAsTriggersll boolbool which determines whether child controls willwhich determines whether child controls will
create async postcreate async post--backback
nn default=truedefault=true
uu UpdateModeUpdateModell always (default)always (default)
nn will update when any UpdatePanel on pagewill update when any UpdatePanel on pagedoes async postdoes async post--backback
ll conditionalconditional
nn only updated by child controls, triggers oronly updated by child controls, triggers orUpdate methodUpdate method
8/8/2019 ASP Net Ajax Intro Slides
12/37
12 2007 Deep Training/ Superexpert Training
TriggersTriggers
uu Sometimes you wish to trigger a async callSometimes you wish to trigger a async callfrom outside of an UpdatePanel controlfrom outside of an UpdatePanel control
uu Makes async calls more efficientMakes async calls more efficient
uu Two types of triggersTwo types of triggers
ll AysncAysnc postbackpostback
nn performs async postperforms async post--backback this is the one youthis is the one youwant to use 99% of timewant to use 99% of time
ll PostbackPostback
nn dondont use unless you want a sync postt use unless you want a sync post--backback
8/8/2019 ASP Net Ajax Intro Slides
13/37
13 2007 Deep Training/ Superexpert Training
Triggers DemoTriggers Demo
uu Demo of triggersDemo of triggersll Triggers.aspxTriggers.aspx
8/8/2019 ASP Net Ajax Intro Slides
14/37
14 2007 Deep Training/ Superexpert Training
Timer ControlTimer Control
uu PerformsPerforms window.setIntervalwindow.setInterval()()uu Can be used inside or outside ofCan be used inside or outside of
UpdatePanel controlUpdatePanel control
8/8/2019 ASP Net Ajax Intro Slides
15/37
15 2007 Deep Training/ Superexpert Training
Timer Control DemoTimer Control Demo
uu Timer.aspxTimer.aspx
8/8/2019 ASP Net Ajax Intro Slides
16/37
16 2007 Deep Training/ Superexpert Training
UpdateProgressUpdateProgress ControlControl
uu Displays progress during longDisplays progress during long--runningrunningasync callasync call
uu PropertiesProperties
ll DisplayAfterDisplayAfternn time in milliseconds to wait beforetime in milliseconds to wait before
displaying progress indicatordisplaying progress indicator
by default = 500 (half second)by default = 500 (half second)
ll DynamicLayoutDynamicLayout
nn display:nonedisplay:none oror display:hiddendisplay:hidden
llAssociatedUpdatePanelIdAssociatedUpdatePanelId
8/8/2019 ASP Net Ajax Intro Slides
17/37
17 2007 Deep Training/ Superexpert Training
UpdateProgressUpdateProgress ControlControl
uu Free site to create animated gifs forFree site to create animated gifs forprogress meters:progress meters:
ll http://www.ajaxload.info/http://www.ajaxload.info/
uu Examples ofExamples ofUpdateProgressUpdateProgress ControlControlll ShowUpdateProgress.aspxShowUpdateProgress.aspx
ll TriggersProgress.aspxTriggersProgress.aspx
8/8/2019 ASP Net Ajax Intro Slides
18/37
18 2007 Deep Training/ Superexpert Training
ServerServer--Side Page Execution Life CycleSide Page Execution Life Cycle
uu These events occur for both sync andThese events occur for both sync andasync postasync post--backsbacks
ll PreInitPreInit
ll
InitInitll LoadLoad
ll PreRenderPreRender
uu
ScriptManager.IsInAsyncPostBackScriptManager.IsInAsyncPostBackll Use to detect async postUse to detect async post--backback
8/8/2019 ASP Net Ajax Intro Slides
19/37
19 2007 Deep Training/ Superexpert Training
ClientClient --Side Page Execution Life CycleSide Page Execution Life Cycle
uu EventsEventsll initializeRequestinitializeRequest
ll beginRequestbeginRequest
ll pageLoadingpageLoadingll pageLoadedpageLoaded
ll endRequestendRequest
uu Canceling and aborting requestsCanceling and aborting requestsll useuse initializeRequestinitializeRequest event handlerevent handler
8/8/2019 ASP Net Ajax Intro Slides
20/37
20 2007 Deep Training/ Superexpert Training
Multiple AsyncMultiple Async PostbacksPostbacks
uu UpdatePanel doesnUpdatePanel doesnt support multiplet support multipleasyncasync postbackspostbacks
uu By default, last postback will abortBy default, last postback will abort
previousprevious postbackspostbacks
8/8/2019 ASP Net Ajax Intro Slides
21/37
8/8/2019 ASP Net Ajax Intro Slides
22/37
22 2007 Deep Training/ Superexpert Training
Performance ConsiderationsPerformance Considerations
uu ViewStateViewStateuu WholeWhole--page execution lifepage execution life--cyclecycle
executes unless you useexecutes unless you use
ScriptManager.IsInAsyncPostBackScriptManager.IsInAsyncPostBackpropertyproperty
uu Consider using pure clientConsider using pure client--side Ajaxside Ajax
8/8/2019 ASP Net Ajax Intro Slides
23/37
23 2007 Deep Training/ Superexpert Training
Handy Ajax Debugging ToolsHandy Ajax Debugging Tools
uu Fiddler (Fiddler (http://fiddler2.comhttp://fiddler2.com))ll works with IE, Firefox, etc.works with IE, Firefox, etc.
ll Tip: Add dot (.) afterTip: Add dot (.) after localhostlocalhost so that fiddlerso that fiddlersees the pagesees the page
nn E.g.,E.g., http://localhost.:8345/mypage.aspxhttp://localhost.:8345/mypage.aspx
uu Firebug (Firebug (https://addons.mozilla.org/enhttps://addons.mozilla.org/en--US/firefox/addon/1843US/firefox/addon/1843))
ll Firefox onlyFirefox only
8/8/2019 ASP Net Ajax Intro Slides
24/37
24 2007 Deep Training/ Superexpert Training
Performance DemosPerformance Demos
uu ViewStateEnabled.aspxViewStateEnabled.aspx andandViewStateDisabled.aspxViewStateDisabled.aspx
ll Use fiddler and SQL Profiler to see dataUse fiddler and SQL Profiler to see databeing passed aroundbeing passed around
ll See table on next slideSee table on next slide
8/8/2019 ASP Net Ajax Intro Slides
25/37
25 2007 Deep Training/ Superexpert Training
Measuring Bandwidth Usage withMeasuring Bandwidth Usage withFiddler: An ExampleFiddler: An Example
4,7862,4819,5497,71916,8707,693Savingunchangedchild record
3,8892,6188,9727,68617,9947,785Savingunchangedparent record
11,8132,13216,5527,71817,6547,922Selecting arecord
ResponseBytes
RequestBytes
ResponseBytes
RequestBytes
ResponseBytes
RequestBytes
Four UpdatePanel controlswith ViewState Disabled
Four UpdatePanel controlswith ViewState Enabled
No UpdatePanels;ViewState Enabled
Operation
8/8/2019 ASP Net Ajax Intro Slides
26/37
26 2007 Deep Training/ Superexpert Training
ASP.NET Ajax Toolk itASP.NET Ajax Toolk it
uu 34 Controls34 Controlsuu Updated every couple of months or soUpdated every couple of months or so
uu SourceSource--code availablecode available
uu A community projectA community projectll hosted onhosted on CodePlexCodePlex
ll Not an officiallyNot an officially--supported Microsoftsupported Microsoft
product (though Microsoft is heavilyproduct (though Microsoft is heavilyinvolved)involved)
8/8/2019 ASP Net Ajax Intro Slides
27/37
27 2007 Deep Training/ Superexpert Training
ASP.NET Ajax Toolk itASP.NET Ajax Toolk it
uu Most of toolkit controls areMost of toolkit controls are extenderextendercontrolscontrols
uu An extender is a control which extendsAn extender is a control which extendsthe functionality of another controlthe functionality of another control
uu VS 2008 integrates extender controlsVS 2008 integrates extender controlsinto IDE designerinto IDE designer
8/8/2019 ASP Net Ajax Intro Slides
28/37
28 2007 Deep Training/ Superexpert Training
Toolkit Controls (2007Toolkit Controls (2007--1111--19 release)19 release)uu AccordionAccordionuu AlwaysVisibleControlAlwaysVisibleControluu AnimationAnimationuu AutoCompleteAutoCompleteuu CalendarCalendaruu CascadingDropDownCascadingDropDownuu CollapsiblePanelCollapsiblePaneluu ConfirmButtonConfirmButtonuu
DragPanelDragPaneluu DropDownDropDownuu DropShadowDropShadowuu DynamicPopulateDynamicPopulateuu FilteredTextBoxFilteredTextBoxuu HoverMenuHoverMenu
uu ListSearchListSearchuu MaskedEditMaskedEdituu ModalPopupModalPopupuu MutuallyExclusiveCheckBoxMutuallyExclusiveCheckBox
uu NoBotNoBot
uu NumericUpDownNumericUpDown
uu PagingBulletedListPagingBulletedListuu PasswordStrengthPasswordStrength
uu PopupControlPopupControl
uu RatingRating
uu ReorderListReorderList
uu ResizableControlResizableControluu RoundedCornersRoundedCorners
uu SliderSlider
uu SlideShowSlideShow
uu TabsTabs
uu TextBoxWatermarkTextBoxWatermark
uu ToggleButtonToggleButton
uu UpdatePanelAnimationUpdatePanelAnimation
uu ValidatorCalloutValidatorCallout
8/8/2019 ASP Net Ajax Intro Slides
29/37
29 2007 Deep Training/ Superexpert Training
ToolkitToolkit
uu You can download VS 2005 and VS 2008You can download VS 2005 and VS 2008versions with or without source codeversions with or without source code
uu To add toolkit to toolboxTo add toolkit to toolbox
1.1. On toolbar, Add TabOn toolbar, Add Tab2.2. Choose ItemsChoose Items
3.3. BrowseBrowse totoSampleWebSiteSampleWebSite\\binbin\\AjaxControlToolkit.dllAjaxControlToolkit.dll
ll To get easy access to docsTo get easy access to docs
ll Point share toPoint share to SampleWebSiteSampleWebSite folderfolder
8/8/2019 ASP Net Ajax Intro Slides
30/37
30 2007 Deep Training/ Superexpert Training
ClientClient --Side AjaxSide Ajax
uu SOAP vs. JSONSOAP vs. JSONuu SOAP = Simple Object Access ProtocolSOAP = Simple Object Access Protocol
ll XML is not simple and not conciseXML is not simple and not concise
uu JSON = JavaScript Object NotationJSON = JavaScript Object Notationll lightweight datalightweight data--interchange formatinterchange format
ll lean and meanlean and mean
8/8/2019 ASP Net Ajax Intro Slides
31/37
31 2007 Deep Training/ Superexpert Training
ClientClient --Side AjaxSide Ajax
uu Calling services from the client using JSONCalling services from the client using JSONuu Web MethodsWeb Methods
ll Web servicesWeb services
ll Page methodsPage methodsuu Application ServicesApplication Services
llAuthentication serviceAuthentication service
ll Role service (VS 2008 only)Role service (VS 2008 only)ll Profile serviceProfile service
8/8/2019 ASP Net Ajax Intro Slides
32/37
32 2007 Deep Training/ Superexpert Training
Registering a Service ReferenceRegistering a Service Referencefor a Web Service Callfor a Web Service Call
8/8/2019 ASP Net Ajax Intro Slides
33/37
33 2007 Deep Training/ Superexpert Training
Calling Web Service from ClientCalling Web Service from Client
functionfunction pageLoadpageLoad()(){{QuotationService.QuotationService.GetQuote(getQuoteSuccessGetQuote(getQuoteSuccess,, getQuoteFailgetQuoteFail););
}}functionfunction getQuoteSuccess(resultgetQuoteSuccess(result)){{$$get("spanQuote").innerHTMLget("spanQuote").innerHTML = result;= result;
}}functionfunction getQuoteFail(errorgetQuoteFail(error)){{alert(error.get_messagealert(error.get_message());());
}}
[[ScriptServiceScriptService]]
public classpublic class QuotationServiceQuotationService :: System.Web.Services.WebServiceSystem.Web.Services.WebService{{
f
8/8/2019 ASP Net Ajax Intro Slides
34/37
34 2007 Deep Training/ Superexpert Training
Registering a Service ReferenceRegistering a Service Referencefor a Page Method Callfor a Page Method Call
8/8/2019 ASP Net Ajax Intro Slides
35/37
35 2007 Deep Training/ Superexpert Training
Calling Page Method from ClientCalling Page Method from Client
functionfunction pageLoadpageLoad()(){{PageMethods.PageMethods.GetQuote(getQuoteSuccessGetQuote(getQuoteSuccess,, getQuoteFailgetQuoteFail););
}}functionfunction getQuoteSuccess(resultgetQuoteSuccess(result)){{$$get("spanQuote").innerHTMLget("spanQuote").innerHTML = result;= result;
}}functionfunction getQuoteFail(errorgetQuoteFail(error)){{alert(error.get_messagealert(error.get_message());());
}}
[[System.Web.Services.WebMethodSystem.Web.Services.WebMethod ]]
public static stringpublic static string GetQuoteGetQuote()(){{
Calling Web Service fromCalling Web Service from
8/8/2019 ASP Net Ajax Intro Slides
36/37
36 2007 Deep Training/ Superexpert Training
Calling Web Service fromCalling Web Service fromClient ExampleClient Example
uu ShowQuoteService.aspxShowQuoteService.aspxll Illustrates use of both Page Method call andIllustrates use of both Page Method call and
Web Service call (toWeb Service call (to QuoteService.asmxQuoteService.asmx))from clientfrom client
8/8/2019 ASP Net Ajax Intro Slides
37/37
37 2007 Deep Training/ Superexpert Training
Thank You!Thank You!
uu Paul LitwinPaul Litwinll [email protected]@deeptraining.com
ll www.deeptraining.comwww.deeptraining.com
uu I will post the lecture demos afterI will post the lecture demos afterworkshop atworkshop at
ll
www.deeptraining.com/litwinwww.deeptraining.com/litwin