Learn ASP.NET AJAX in 5 Minutes

5,247 views

Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Learn ASP.NET AJAX in 5 Minutes

  1. 1. Learn ASP.NET AJAX in 5 Minutes ©Mohamed ATHIMNI [email_address] 02/2012 – Version 1.0.0 Learn ASP.NET AJAX in 5 Minutes
  2. 2. Basic OOP Programming Using ASP.NET AJAX Learn ASP.NET AJAX in 5 Minutes
  3. 3. 1. Declaring Namespaces <ul><li>Type.registerNamespace (‘Athimni.ASP.Net.AJAX’); </li></ul>Learn ASP.NET AJAX in 5 Minutes
  4. 4. 2. Checking For Namespaces <ul><li>Type.isNamespace (‘Athimni.ASP.Net.AJAX’); </li></ul><ul><li>Return true / false </li></ul>Learn ASP.NET AJAX in 5 Minutes
  5. 5. 3. Declaring Classes <ul><li>Athimni.ASP.Net.AJAX.PersonClass = function (FirstName, LastName) { </li></ul><ul><ul><li>this.m_FirstName = FirstName; </li></ul></ul><ul><ul><li>this.m_LastName = LastName; </li></ul></ul><ul><li>} </li></ul><ul><li>Athimni.ASP.Net.AJAX.PersonClass .prototype = { </li></ul><ul><ul><li>GetFirstName: function () { </li></ul></ul><ul><ul><ul><li>return this.m_FirstName; </li></ul></ul></ul><ul><ul><li>}, </li></ul></ul><ul><ul><li>GetLastName: function() { </li></ul></ul><ul><ul><ul><li>return this.m_LastName; </li></ul></ul></ul><ul><ul><li>} </li></ul></ul><ul><li>} </li></ul><ul><li>Athimni.ASP.Net.AJAX.PersonClass .registerClass (‘Athimni.ASP.Net.AJAX.PersonClass’); </li></ul>Learn ASP.NET AJAX in 5 Minutes
  6. 6. 4. Using Classes <ul><li>var MePerson = new Athimni.ASP.Net.AJAX.PersonClass(‘ATHIMNI’, ‘Mohamed’); </li></ul><ul><li>MePerson.GetFirstName(); </li></ul>Learn ASP.NET AJAX in 5 Minutes
  7. 7. 5. Checking For Classes <ul><li>Type.isClass(‘Athimni.ASP.Net.AJAX.PersonClass’); </li></ul><ul><li>Return true / false </li></ul>Learn ASP.NET AJAX in 5 Minutes
  8. 8. 6. Inheritance <ul><li>Athimni.ASP.Net.AJAX.DeveloperClass = function(DevFirstName, DevLastName, DevProgrammingLanguage) { </li></ul><ul><li> Athimni.ASP.Net.AJAX.DeveloperClass .initializeBase (DevFirstName, DevLastName); </li></ul><ul><li>this.m_ DevProgrammingLanguage = DevProgrammingLanguage </li></ul><ul><li>} </li></ul><ul><li>Athimni.ASP.Net.AJAX. DeveloperClass .registerClass (‘Athimni.ASP.Net.AJAX.DeveloperClass’, Athimni.ASP.Net.AJAX.PersonClass ); </li></ul>Learn ASP.NET AJAX in 5 Minutes
  9. 9. 7. Inheritance : Calling Base Method <ul><li>Athimni.ASP.Net.AJAX.DeveloperClass .prototype = { </li></ul><ul><li>AboutMe: function() { </li></ul><ul><ul><li>var lastName = Athimni.ASP.Net.AJAX.DeveloperClass .callBaseMethod (this, « GetLastName »)); </li></ul></ul><ul><ul><li>return lastName; </li></ul></ul><ul><li>} </li></ul>Learn ASP.NET AJAX in 5 Minutes
  10. 10. 8. Reflexion <ul><li>if (Athimni.ASP.Net.AJAX.PersonClass .isInstanceOfType (MePerson) == true) { </li></ul><ul><ul><li>alert(‘MePerson is of type PersonClass.’); </li></ul></ul><ul><li>} </li></ul><ul><li>if (Athimni.ASP.Net.AJAX. Athimni.ASP.Net.AJAX.DeveloperClass .inheritsFrom (Athimni.ASP.Net.AJAX.PersonClass) == true) { </li></ul><ul><li>} </li></ul>Learn ASP.NET AJAX in 5 Minutes
  11. 11. 9. Declaring Interfaces <ul><li>Athimni.ASP.Net.AJAX.ISayHelloWorld = function() { </li></ul><ul><ul><li>throw Error.notImplemented(); </li></ul></ul><ul><li>} </li></ul><ul><li>Athimni.ASP.Net.AJAX.ISayHelloWorld .prototype = { </li></ul><ul><ul><li>SayHelloWorld = function () { </li></ul></ul><ul><ul><ul><li>throw Error.notImplemented(); </li></ul></ul></ul><ul><ul><li>} </li></ul></ul><ul><li>} </li></ul><ul><li>Athimni.ASP.Net.AJAX.ISayHelloWorld. registerInterface (‘Athimni.ASP.Net.AJAX.ISayHelloWorld’); </li></ul>Learn ASP.NET AJAX in 5 Minutes
  12. 12. 10. Using Interfaces <ul><li>Athimni.ASP.Net.AJAX.NewClassWithInterface = function(Message) { </li></ul><ul><ul><li>this.m_Message = Message; </li></ul></ul><ul><li>} </li></ul><ul><li>Athimni.ASP.Net.AJAX.NewClassWithInterface .prototype = { </li></ul><ul><ul><li>SayHelloWorld = function () { </li></ul></ul><ul><ul><ul><li>alert(m_Message); </li></ul></ul></ul><ul><ul><li>} </li></ul></ul><ul><li>} </li></ul><ul><li>Athimni.ASP.Net.AJAX. NewClassWithInterface. registerClass (‘Athimni.ASP.Net.AJAX.NewClassWithInterface’,Athimni.ASP.Net.AJAX.ISayHelloWorld); </li></ul>Learn ASP.NET AJAX in 5 Minutes
  13. 13. 11. Declaring Enumerations/Flags <ul><li>Athimni.ASP.Net.AJAX.PersonTypeEnum = function() { </li></ul><ul><ul><li>throw Error.invalidOperation(); </li></ul></ul><ul><li>} </li></ul><ul><li>Athimni.ASP.Net.AJAX.PersonTypeEnum .prototype = { </li></ul><ul><ul><li>MEN: 1, </li></ul></ul><ul><ul><li>WOMEN: 2 </li></ul></ul><ul><ul><li>} </li></ul></ul><ul><li>} </li></ul><ul><li>Athimni.ASP.Net.AJAX. PersonTypeEnum. registerEnum (‘Athimni.ASP.Net.AJAX.PersonTypeEnum’, true /* Optional: Supporting Flags Bitwise */ ); </li></ul>Learn ASP.NET AJAX in 5 Minutes
  14. 14. 12. Using Enumerations <ul><li>var PersonType = Athimni.ASP.Net.AJAX.PersonTypeEnum.MEN; </li></ul><ul><li>alert (Athimni.ASP.Net.AJAX.PersonTypeEnum .toString( PersonType)); </li></ul>Learn ASP.NET AJAX in 5 Minutes
  15. 15. 13. Where to call these things? <ul><li>function pageLoad(sender, args){ </li></ul><ul><li>... </li></ul><ul><li>} </li></ul>Learn ASP.NET AJAX in 5 Minutes
  16. 16. 14. Arrays <ul><li>var PersonArray = new Array(); </li></ul><ul><li>Array .add (PersonArray, ‘Me’); </li></ul><ul><li>Array .add (PersonArray, ‘You’); </li></ul><ul><li>var boolValue = Array .contains (PersonArray, ‘Me’); // true </li></ul><ul><li>var NewPersons = [‘He, She’]; </li></ul><ul><li>Array .addRange (PersonArray, NewPersons); </li></ul><ul><li>Array .Insert (PersonArra, 1, ‘Us’); </li></ul><ul><li>Array .forEach (PersonArray, MyCallBakcMethod); </li></ul>Learn ASP.NET AJAX in 5 Minutes
  17. 17. 14. Arrays <ul><li>var PersonArray = new Object </li></ul><ul><li>PersonArray[« Me »] = « Mohamed »; </li></ul><ul><li>PersonArray[« You »] = « Your LN »; </li></ul><ul><li>for (var LiteralIndex in PersonArray) </li></ul><ul><li>alert(PersonArray[LiteralIndex]); </li></ul>Learn ASP.NET AJAX in 5 Minutes
  18. 18. Using The ScriptManager In ASP.NET Learn ASP.NET AJAX in 5 Minutes
  19. 19. 1. Adding Scripts References <ul><li><asp:ScriptManager runat=&quot;server&quot; ID=&quot;SM&quot;> </li></ul><ul><ul><li><Scripts> </li></ul></ul><ul><ul><ul><li><asp:ScriptReference Path= &quot; MyJavaScriptFile.js &quot; /> </li></ul></ul></ul><ul><ul><li></Scripts> </li></ul></ul><ul><li></asp:ScriptManager> </li></ul>Learn ASP.NET AJAX in 5 Minutes
  20. 20. 1. Adding Scripts References <ul><li>Remeber : Your file script should include these lines to be called by the ScriptManager: </li></ul><ul><li>function identityFunction(arg) { return arg; </li></ul><ul><li>} </li></ul><ul><li>if(typeof('Sys') !=='undefined') </li></ul><ul><ul><li>Sys.Application.notifyScriptLoaded(); </li></ul></ul>Learn ASP.NET AJAX in 5 Minutes
  21. 21. 2. Adding Services References <ul><li><asp:ScriptManager runat=&quot;server&quot; ID=&quot;SM&quot;> </li></ul><ul><ul><li><Services> </li></ul></ul><ul><ul><ul><li><asp:ServiceReference Path= &quot; MyWebServiceFile.asmx &quot; /> </li></ul></ul></ul><ul><ul><li></Services> </li></ul></ul><ul><li></asp:ScriptManager> </li></ul>Learn ASP.NET AJAX in 5 Minutes
  22. 22. 2. Adding Services References <ul><li>Remember: Don’t forget to add [ScriptService] attribute to your C# or VB.NET service class. </li></ul>Learn ASP.NET AJAX in 5 Minutes
  23. 23. Using The WebRequest In ASP.NET AJAX Learn ASP.NET AJAX in 5 Minutes
  24. 24. 1. Making WebRequest Call <ul><li>It’s a wrappr around XLHttpRequest object: </li></ul><ul><li>function pageLoad() { </li></ul><ul><ul><li>var webRequest = new Sys.Net.WebRequest(); webRequest .set_url (&quot;SayHello.aspx&quot;); webRequest .add_completed (completedHandler); </li></ul></ul><ul><ul><li>webRequest .invoke (); </li></ul></ul><ul><li>} </li></ul><ul><li>function completedHandler(result, eventArgs) { </li></ul><ul><ul><ul><li>if(result .get_responseAvailable() ) { </li></ul></ul></ul><ul><ul><ul><li>alert(result .get_statusText() ); </li></ul></ul></ul><ul><ul><ul><li>alert(result .get_responseData() ); // result.get_xml().xml </li></ul></ul></ul><ul><ul><li>} </li></ul></ul><ul><li>} </li></ul>Learn ASP.NET AJAX in 5 Minutes
  25. 25. 1. Making WebRequest Call <ul><li>We can set the HTTP Verb also (GET, POST): </li></ul><ul><li>function pageLoad() { </li></ul><ul><ul><li>var webRequest = new Sys.Net.WebRequest(); webRequest .set_url (&quot;SayHello.aspx&quot;); </li></ul></ul><ul><ul><li>webRequest .set_httpVerb('POST') ; </li></ul></ul><ul><ul><li>webRequest .set_body('To=MyName') ; </li></ul></ul><ul><ul><li>webRequest .add_completed (completedHandler); </li></ul></ul><ul><ul><li>webRequest .invoke (); </li></ul></ul><ul><li>} </li></ul><ul><li>function completedHandler(result, eventArgs) { </li></ul><ul><ul><ul><li>if(result. get_responseAvailable() ) { </li></ul></ul></ul><ul><ul><ul><li>alert(result .get_statusText() ); </li></ul></ul></ul><ul><ul><ul><li>alert(result .get_responseData() ); </li></ul></ul></ul><ul><ul><li>} </li></ul></ul><ul><li>} </li></ul>Learn ASP.NET AJAX in 5 Minutes
  26. 26. 1. Making WebRequest Call <ul><li>We can set the Timeout : </li></ul><ul><li>function pageLoad() { </li></ul><ul><ul><li>var webRequest = new Sys.Net.WebRequest(); webRequest .set_url (&quot;SayHello.aspx&quot;); </li></ul></ul><ul><ul><li>webRequest .set_timeout(5000) ; webRequest .add_completed (completedHandler); </li></ul></ul><ul><ul><li>webRequest .invoke (); </li></ul></ul><ul><li>} </li></ul><ul><li>function completedHandler(result, eventArgs) { </li></ul><ul><ul><li>if(result .get_timedOut() ) { </li></ul></ul><ul><ul><ul><li>alert('Hi, It’s time out!'); </li></ul></ul></ul><ul><ul><li>} </li></ul></ul><ul><ul><li>if(result. get_responseAvailable() ) { </li></ul></ul><ul><ul><ul><li>alert(result .get_statusText() ); </li></ul></ul></ul><ul><ul><ul><li>alert(result .get_responseData() ); </li></ul></ul></ul><ul><ul><li>} </li></ul></ul><ul><li>} </li></ul>Learn ASP.NET AJAX in 5 Minutes
  27. 27. 1. Making WebRequest Call <ul><li>We can set a User Context: </li></ul><ul><li>function pageLoad() { </li></ul><ul><ul><li>var webRequest = new Sys.Net.WebRequest(); webRequest .set_url (&quot;SayHello.aspx&quot;); </li></ul></ul><ul><ul><li>webRequest .set_userContext(‘Hi, I’m called for a defined purpose') ; </li></ul></ul><ul><ul><li>webRequest .add_completed (completedHandler); </li></ul></ul><ul><ul><li>webRequest .invoke (); </li></ul></ul><ul><li>} </li></ul><ul><li>function completedHandler(result, eventArgs) { </li></ul><ul><ul><li>if(result. get_responseAvailable() ) { </li></ul></ul><ul><ul><ul><li>alert(result .get_webRequest() .get_userContext() ); </li></ul></ul></ul><ul><li>} </li></ul><ul><li>Remember: The WebRequest does not include the user context information in what is sent to the server. Instead, the data is stored locally and then made available during the callback. You can store complex JavaScript types without needing to worry about how they will be serialized for including in an HTTP request. This also keeps the request/response payload lighter. </li></ul>Learn ASP.NET AJAX in 5 Minutes
  28. 28. Using The WebRequestManager In ASP.NET AJAX Learn ASP.NET AJAX in 5 Minutes
  29. 29. 1. Define a Timeout for all WebRequest <ul><li>function pageLoad() { </li></ul><ul><ul><li>Sys.Net.WebRequestManager .set_defaultTimeout (1000); </li></ul></ul><ul><ul><li>var webRequest = new Sys.Net.WebRequest(); </li></ul></ul><ul><ul><li>webRequest.set_url(‘SayHelloaspx'); </li></ul></ul><ul><ul><li>webRequest.add_completed(completedHandler); </li></ul></ul><ul><ul><li>webRequest.invoke(); </li></ul></ul><ul><li>} </li></ul>Learn ASP.NET AJAX in 5 Minutes
  30. 30. 2. Global Web Request Handling <ul><li>function pageLoad() { </li></ul><ul><ul><li>Sys.Net.WebRequestManager. add_completedRequest (completedHandler); // remove_completedRequest </li></ul></ul><ul><ul><li>var webRequest = new Sys.Net.WebRequest(); webRequest.set_url(‘SayHello.aspx'); </li></ul></ul><ul><ul><li>var webRequest2 = new Sys.Net.WebRequest(); webRequest2.set_url(‘SayHello_2.aspx'); Sys.Net.WebRequestManager.executeRequest(webRequest2); Sys.Net.WebRequestManager.executeRequest(webRequest); </li></ul></ul><ul><li>} </li></ul><ul><li>function completedHandler(result) { </li></ul><ul><ul><li>if(result.get_responseAvailable()) { </li></ul></ul><ul><ul><ul><li>$get('placeholder').innerHTML += &quot;<br />&quot; result.get_webRequest().get_url() + &quot; returned: &quot; + result.get_responseData (); </li></ul></ul></ul><ul><ul><li>} </li></ul></ul><ul><li>} </li></ul>Learn ASP.NET AJAX in 5 Minutes
  31. 31. 3. Cancel the request before it is actually executed <ul><li>Sys.Net.WebRequestManager .add_invokingRequest ( invokingHandler ); </li></ul><ul><li>function invokingHandler (sender, eventArgs) { </li></ul><ul><ul><li>if(eventArgs.get_webRequest().get_url() === ‘SayHello.aspx') { </li></ul></ul><ul><ul><li>eventArgs .set_cancel (true); </li></ul></ul><ul><ul><li>} </li></ul></ul><ul><li>} </li></ul>Learn ASP.NET AJAX in 5 Minutes
  32. 32. Using JSON In ASP.NET AJAX Learn ASP.NET AJAX in 5 Minutes
  33. 33. 1. JSON Serialization using C# ASP.NET <ul><li>AlbumProxy.cs </li></ul>Learn ASP.NET AJAX in 5 Minutes
  34. 34. 2. Deserializing JSON data using JS <ul><li>function pageLoad() { </li></ul><ul><ul><li>AlbumProxy.GetAlbumJSON(completionJSON); </li></ul></ul><ul><ul><li>AlbumProxy.GetAlbumXML(completionXML); </li></ul></ul><ul><li>} </li></ul><ul><li>function completionJSON(result) { </li></ul><ul><ul><li>var album = eval(&quot;(&quot; + result + &quot;)&quot;); </li></ul></ul><ul><ul><li>$get('placeholder').innerHTML = album </li></ul></ul><ul><ul><li>var album2 = Sys.Serialization.JavaScriptSerializer.deserialize (result); </li></ul></ul><ul><ul><li>// var objectWithDate = </li></ul></ul><ul><ul><li>// Sys.Serialization.JavaScriptSerializer.deserialize(JSONstring); </li></ul></ul><ul><ul><li>// var date = new Date(objectWithDate.dateProperty); </li></ul></ul><ul><ul><li>$get('placeholder2').innerHTML = album2.Artist; </li></ul></ul><ul><li>} </li></ul><ul><li>function completionXML(result) { </li></ul><ul><ul><li>var album = eval(result); </li></ul></ul><ul><ul><li>$get('placeholder3').innerHTML = album.ReleaseYear; </li></ul></ul><ul><li>} </li></ul>Learn ASP.NET AJAX in 5 Minutes

×