asp net ajax intro slides

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


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.


3/37


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.


4/37


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


5/37


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


6/37


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


7/37


ASP .NET AJAX ExtensionsASP .NET AJAX Extensions

uu ScriptManagerScriptManageruu ScriptManagerProxyScriptManagerProxy

uu UpdatePanelUpdatePanel

uu TimerTimer

uu UpdateProgessUpdateProgess


8/37


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


9/37


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


10/37


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


11/37


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


12/37


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


13/37


Triggers DemoTriggers Demo

uu Demo of triggersDemo of triggersll Triggers.aspxTriggers.aspx


14/37


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


15/37


Timer Control DemoTimer Control Demo

uu Timer.aspxTimer.aspx


16/37


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


17/37


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


18/37


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


19/37


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


20/37


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


21/37


22/37


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


23/37


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


24/37


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


25/37


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


26/37


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)


27/37


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


28/37


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


29/37


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


30/37


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


31/37


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


32/37


Registering a Service ReferenceRegistering a Service Referencefor a Web Service Callfor a Web Service Call


33/37


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


34/37


Registering a Service ReferenceRegistering a Service Referencefor a Page Method Callfor a Page Method Call


35/37


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


36/37


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


37/37


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

asp net ajax intro slides

Documents