asp.net ajax extensions richard soeteman [email protected]
TRANSCRIPT
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
[email protected]@detrio.nl
http://http://www.richardsoeteman.netwww.richardsoeteman.net