ASP.NET AJAX Extensions Richard Soeteman

Introductie Asynchronous Javascript And Xml Asynchronous Javascript And Xml Bedoeld voor een betere user experience Bedoeld voor een betere user experience

Frameworks Ajax.Net Ajax.Net Ajaxium Ajaxium Bitkraft Bitkraft Anthem Anthem MagicAJAX.NET MagicAJAX.NET Asp.net Ajax Asp.net Ajax En nog vele andere…. En nog vele andere…. Vergelijking:

ASP.NET AJAX Architectuur Microsoft AJAX Library Browsers (IE, Firefox, Safari, others) Browser Compatibility Asynchronous Communications Script Core Library Base Class Library XHTML/CSS Client Scripts ClientServer ASP.NET 2.0 Page Framework and Server Controls Page Framework and Server Controls Application Services Application Services ASP.NET AJAX Extensions AJAX Server Controls AJAX Server Controls Asynchronous Communications Asynchronous Communications Application Services Bridge Application Services Bridge ASPX ASMX

Client script mogelijkheden Nieuwe Javascript features….. Nieuwe Javascript features….. Browser onafhankelijk Browser onafhankelijkhttp://ajax.asp.net/docs/ClientReference/default.aspx

Scriptmanager Het centrale control voor ASP.NET AJAX extensions Het centrale control voor ASP.NET AJAX extensions Wat doet het Scriptmanager control? Wat doet het Scriptmanager control? Veel…. Veel…. Eén Scriptmanager control per pagina Eén Scriptmanager control per pagina

Scriptmanager control voorbeeld <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" > <ProfileService LoadProperties="properties" Path="pad naar webservice" />

Scriptmanager Proxy Mogelijkheden om additionele webservices en client scripts te registreren. Mogelijkheden om additionele webservices en client scripts te registreren. <AuthenticationService Path="Pad naar additionele authenticatieService" /> <ProfileService LoadProperties="properties" Path="Pad naar additionele authenticatie service" />

Updatepanel Maakt partial-page postbacks mogelijk Maakt partial-page postbacks mogelijk Geen kennis van Javascript vereist Geen kennis van Javascript vereist

Updatepanel voorbeeld <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Always|Conditional" ChildrenAsTriggers="true|false" Rendermode="Block|Inline">

Triggers AsyncPostBackTrigger AsyncPostBackTrigger PostBackTrigger PostBackTrigger <asp:AsyncPostBackTrigger ControlID="TextBox1" EventName="TextChanged" />

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

Updateprogress Indicatie dat een postback aan de gang is Indicatie dat een postback aan de gang is Middels client script postback onderbreken Middels client script postback onderbreken

Updateprogress voorbeeld <asp:UpdateProgress ID="UpdateProgress1" Runat="Server" DisplayAfter="Tijd in ms" AssociatedUpdatePanelID="UpdatePanelID" DynamicLayout="true|false">

Demo

Integratie met Webservices Webmethods middels een Javascript proxy Webmethods middels een Javascript proxy Built in Webservices: Built in Webservices: Authenticatie service Authenticatie service Profile service Profile service

Ajax Enabled Webservice web.config configureren voor script proxies web.config configureren voor script proxies ScriptService attribuut toevoegen aan webservice ScriptService attribuut toevoegen aan 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 Client Webservice registreren bij de Scriptmanager Webservice registreren bij de Scriptmanager Javascript code voor aanroep webservice Javascript code voor aanroep webservice 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 Methods Aanroepen van static server-side methods vanuit client script. Aanroepen van static server-side methods vanuit client script.

Demo

Toekomstige functionaliteit Ondersteuning voor WebParts Ondersteuning voor WebParts XML-Script. XML-Script. Javascript intellisense support in Visual Studio Javascript intellisense support in Visual Studio WCF support voor webservices WCF support voor webservices Ondersteuning voor browsers back button-history Ondersteuning voor browsers back button-history Data Controls Data Controls Silverlight ondersteuning Silverlight ondersteuning Ondersteuning voor Dynamic Languages (Iron Python/ Managed JScript Ondersteuning voor Dynamic Languages (Iron Python/ Managed JScript

Resources Asp.net Ajax Homepage: Asp.net Ajax Homepage: Control Toolkit: Control Toolkit: Asp.net Ajax Documentatie: Asp.net Ajax Documentatie: Toekomstige functionaliteit: Toekomstige functionaliteit: Json Homepage: Json Homepage: Ajax Patterns: Ajax Patterns: Library Cheat sheets: Library Cheat sheets: ASP.Net AJAX tutorials: ASP.Net AJAX tutorials: Blog Scott Guthrie: Blog Scott Guthrie: Nikhil Kothari's weblog: Nikhil Kothari's weblog: Brad Abrahams weblog: Brad Abrahams weblog: Fredrik Normén's weblog: Fredrik Normén's weblog:

Vragen?

Bedankt! Richard Soeteman