ASP.NET AJAX ASP.NET AJAX ExtensionsExtensions

Richard SoetemanRichard Soeteman

rsoetemanrsoeteman@@detrio.nldetrio.nl

http://http://www.richardsoeteman.netwww.richardsoeteman.net

IntroductieIntroductie

AAsynchronous synchronous JJavascript avascript AAnd nd XXmlml Bedoeld voor een betere user Bedoeld voor een betere user

experienceexperience

FrameworksFrameworks Ajax.Net Ajax.Net AjaxiumAjaxium BitkraftBitkraft AnthemAnthem MagicAJAX.NET MagicAJAX.NET Asp.net AjaxAsp.net Ajax En nog vele andere….En nog vele andere….

Vergelijking: http://www.ajaxdiff.com/Vergelijking: http://www.ajaxdiff.com/

ASP.NET AJAX ASP.NET AJAX ArchitectuurArchitectuur

Microsoft AJAX Library

Browsers (IE, Firefox, Safari, others)Browsers (IE, Firefox, Safari, others)

Browser CompatibilityBrowser Compatibility

Asynchronous CommunicationsAsynchronous Communications

Script Core LibraryScript Core Library

Base Class LibraryBase Class Library

XHTML/CSSXHTML/CSS Client ScriptsClient Scripts

Client Server

ASP.NET 2.0

PageFramework andServer Controls

PageFramework andServer Controls

ApplicationServices

ApplicationServices

ASP.NET AJAX Extensions

AJAXServer Controls

AJAXServer Controls

AsynchronousCommunications

AsynchronousCommunications

ApplicationServices Bridge

ApplicationServices Bridge

ASPXASPX ASMXASMX

Client script Client script mogelijkhedenmogelijkheden

Nieuwe Javascript features…..Nieuwe Javascript features….. Browser onafhankelijkBrowser onafhankelijk

http://ajax.asp.net/docs/ClientReference/http://ajax.asp.net/docs/ClientReference/default.aspxdefault.aspx

ScriptmanagerScriptmanager

Het centrale control voor ASP.NET Het centrale control voor ASP.NET AJAX extensionsAJAX extensions

Wat doet het Scriptmanager control?Wat doet het Scriptmanager control? Veel….Veel….

EénEén Scriptmanager control per Scriptmanager control per paginapagina

Scriptmanager control Scriptmanager control voorbeeldvoorbeeld

<asp:ScriptManager ID="ScriptManager1" AllowCustomErrorsRedirect="true|false" AsyncPostBackErrorMessage="Async Error" AsyncPostBackTimeout="time in milliseconds" EnablePageMethods="true|false" EnablePartialRendering="true|false" EnableScriptGlobalization="true|false" EnableScriptLocalization="true|false" ScriptMode="Auto|Debug|Inherit|Release" ScriptPath="root custom javascript bestanden " runat="server" > <Scripts><!--Registreer Java Scripts hier--></Scripts> <Services><!--Registreer WebServices hier--></Services> <AuthenticationService Path="pad naar webservices"/> <ProfileService LoadProperties="properties"

Path="pad naar webservice" /></asp:ScriptManager>

Scriptmanager ProxyScriptmanager Proxy

Mogelijkheden om additionele Mogelijkheden om additionele webservices en client scripts te webservices en client scripts te registreren. registreren.

<asp:ScriptManagerProxy ID="ScriptManagerProxy1" runat="Server"> <Scripts><!--Additionele javascripts hier--></Scripts> <Services><!--Additionele webServices hier--></Services> <AuthenticationService Path="Pad naar additionele authenticatieService" /> <ProfileService LoadProperties="properties" Path="Pad naar additionele authenticatie service" /></asp:ScriptManagerProxy>

UpdatepanelUpdatepanel

Maakt partial-page postbacks Maakt partial-page postbacks mogelijk mogelijk

Geen kennis van Javascript vereistGeen kennis van Javascript vereist

Updatepanel voorbeeldUpdatepanel voorbeeld

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Always|Conditional" ChildrenAsTriggers="true|false" Rendermode="Block|Inline"> <ContentTemplate> <!--Content hier--> </ContentTemplate> <Triggers> <!--Triggers hier--> </Triggers></asp:UpdatePanel>

TriggersTriggers

AsyncPostBackTriggerAsyncPostBackTrigger PostBackTriggerPostBackTrigger

<asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate><!--Content hier--></ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="Button1" /> <asp:AsyncPostBackTrigger ControlID="TextBox1"

EventName="TextChanged" /> <asp:PostBackTrigger ControlID="Button2" /> </Triggers></asp:UpdatePanel>

Timer controlTimer control

Bedoeld voor periodieke updatesBedoeld voor periodieke updates

<asp:Timer ID="Timer1" runat="server“Interval="tijd in milliseconden" OnTick="Server side Tick event">

</asp:Timer>

UpdateprogressUpdateprogress

Indicatie dat een postback aan de Indicatie dat een postback aan de gang isgang is

Middels client script postback Middels client script postback onderbrekenonderbreken

Updateprogress Updateprogress voorbeeldvoorbeeld

<asp:UpdateProgress

ID="UpdateProgress1"

Runat="Server"

DisplayAfter="Tijd in ms"

AssociatedUpdatePanelID="UpdatePanelID"

DynamicLayout="true|false">

<ProgressTemplate>

</ProgressTemplate>

</asp:UpdateProgress>

DemoDemo

Integratie met Integratie met WebservicesWebservices

Webmethods middels een Javascript Webmethods middels een Javascript proxy proxy

Built in Webservices:Built in Webservices: Authenticatie serviceAuthenticatie service Profile serviceProfile service

Ajax Enabled WebserviceAjax Enabled Webservice

web.config configureren voor script web.config configureren voor script proxiesproxies

ScriptService attribuut toevoegen ScriptService attribuut toevoegen aan webserviceaan webservice

[System.Web.Script.Services.ScriptService] public class CodeCampService : System.Web.Services.WebService { [WebMethod] public string SessionsInTrack(string input) { ………………………

[System.Web.Script.Services.ScriptService] public class CodeCampService : System.Web.Services.WebService { [WebMethod] public string SessionsInTrack(string input) { ………………………

Ajax Enabled Webservice Ajax Enabled Webservice ClientClient

Webservice registreren bij de Webservice registreren bij de ScriptmanagerScriptmanager

Javascript code voor aanroep Javascript code voor aanroep webservicewebservice

function Button1_onclick() { CodeCampDemo.CodeCampService.SomeMethod( someVar, OnLookupComplete, OnError);}function OnLookupComplete(result){ var res = $get("ResultLabel"); res.innerHTML = result ;}function OnError(error){ alert('Fout: ' + error.get_message());}

function Button1_onclick() { CodeCampDemo.CodeCampService.SomeMethod( someVar, OnLookupComplete, OnError);}function OnLookupComplete(result){ var res = $get("ResultLabel"); res.innerHTML = result ;}function OnError(error){ alert('Fout: ' + error.get_message());}

Page MethodsPage Methods

Aanroepen van static server-side Aanroepen van static server-side methods vanuit client script.methods vanuit client script.

DemoDemo

Toekomstige Toekomstige functionaliteitfunctionaliteit

Ondersteuning voor WebPartsOndersteuning voor WebParts XML-Script. XML-Script. Javascript intellisense support in Visual Javascript intellisense support in Visual

StudioStudio WCF support voor webservicesWCF support voor webservices Ondersteuning voor browsers back button-Ondersteuning voor browsers back button-

historyhistory Data ControlsData Controls Silverlight ondersteuningSilverlight ondersteuning Ondersteuning voor Dynamic Languages Ondersteuning voor Dynamic Languages

(Iron Python/ Managed JScript(Iron Python/ Managed JScript

ResourcesResources Asp.net Ajax Homepage: http://ajax.asp.net/Asp.net Ajax Homepage: http://ajax.asp.net/ Control Toolkit: http://www.codeplex.com/AtlasControlToolkit/Control Toolkit: http://www.codeplex.com/AtlasControlToolkit/ Asp.net Ajax Documentatie: http://ajax.asp.net/docs/Asp.net Ajax Documentatie: http://ajax.asp.net/docs/ Toekomstige functionaliteit: http://quickstarts.asp.net/futures/Toekomstige functionaliteit: http://quickstarts.asp.net/futures/ Json Homepage: Json Homepage: http://http://www.json.orgwww.json.org// Ajax Patterns: http://ajaxpatterns.org/Ajax Patterns: http://ajaxpatterns.org/ Library Cheat sheets: Library Cheat sheets:

http://aspnetresources.com/blog/ms_ajax_cheat_sheets_batch1http://aspnetresources.com/blog/ms_ajax_cheat_sheets_batch1.aspx.aspx

ASP.Net AJAX tutorials: ASP.Net AJAX tutorials: http://www.softsteel.co.uk/tutorials/aspnetajaxhttp://www.softsteel.co.uk/tutorials/aspnetajax

Blog Scott Guthrie: http://weblogs.asp.net/scottgu/Blog Scott Guthrie: http://weblogs.asp.net/scottgu/ Nikhil Kothari's weblog: http://www.nikhilk.net/Nikhil Kothari's weblog: http://www.nikhilk.net/ Brad Abrahams weblog: http://blogs.msdn.com/brada/Brad Abrahams weblog: http://blogs.msdn.com/brada/ Fredrik Normén's weblog: http://fredrik.nsquared2.com/Fredrik Normén's weblog: http://fredrik.nsquared2.com/

Vragen?Vragen?

Bedankt!Bedankt!

Richard SoetemanRichard Soeteman

rsoeteman@detrio.nlrsoeteman@detrio.nl

http://http://www.richardsoeteman.netwww.richardsoeteman.net