learn asp.net ajax in 5 minutes

Learn ASP.NET AJAX in 5 Minutes

©Mohamed ATHIMNImohamed.athimni@gmail.com

02/2012 – Version 1.0.0

Learn ASP.NET AJAX in 5 Minutes

Basic OOP Programming Using ASP.NET AJAX

Learn ASP.NET AJAX in 5 Minutes

1. Declaring Namespaces

• Type.registerNamespace (‘Athimni.ASP.Net.AJAX’);

Learn ASP.NET AJAX in 5 Minutes

2. Checking For Namespaces

• Type.isNamespace (‘Athimni.ASP.Net.AJAX’);

• Return true/false

Learn ASP.NET AJAX in 5 Minutes

3. Declaring ClassesAthimni.ASP.Net.AJAX.PersonClass = function

(FirstName, LastName) {this.m_FirstName = FirstName;this.m_LastName = LastName;

}Athimni.ASP.Net.AJAX.PersonClass.prototype = {

GetFirstName: function () {return this.m_FirstName;

},GetLastName: function() {

return this.m_LastName;}

}Athimni.ASP.Net.AJAX.PersonClass.registerClass(‘Athi

mni.ASP.Net.AJAX.PersonClass’);

Learn ASP.NET AJAX in 5 Minutes

4. Using Classes

var MePerson = new Athimni.ASP.Net.AJAX.PersonClass(‘ATHIMNI’, ‘Mohamed’);

MePerson.GetFirstName();

Learn ASP.NET AJAX in 5 Minutes

5. Checking For Classes

• Type.isClass(‘Athimni.ASP.Net.AJAX.PersonClass’);

• Return true/false

Learn ASP.NET AJAX in 5 Minutes

6. InheritanceAthimni.ASP.Net.AJAX.DeveloperClass =

function(DevFirstName, DevLastName, DevProgrammingLanguage) { Athimni.ASP.Net.AJAX.DeveloperClass.initializeBase(DevFirstName, DevLastName);

this.m_ DevProgrammingLanguage = DevProgrammingLanguage

}

Athimni.ASP.Net.AJAX. DeveloperClass.registerClass(‘Athimni.ASP.Net.AJAX.DeveloperClass’, Athimni.ASP.Net.AJAX.PersonClass);

Learn ASP.NET AJAX in 5 Minutes

7. Inheritance : Calling Base Method

Athimni.ASP.Net.AJAX.DeveloperClass.prototype = {AboutMe: function() {var lastName = Athimni.ASP.Net.AJAX.DeveloperClass.callBaseMethod(this, «GetLastName»));

return lastName;

}

Learn ASP.NET AJAX in 5 Minutes

8. Reflexionif (Athimni.ASP.Net.AJAX.PersonClass.isInstanceOfType(MePerson) == true) {alert(‘MePerson is of type PersonClass.’);

}

if (Athimni.ASP.Net.AJAX. Athimni.ASP.Net.AJAX.DeveloperClass.inheritsFrom(Athimni.ASP.Net.AJAX.PersonClass) == true) {

}

Learn ASP.NET AJAX in 5 Minutes

9. Declaring InterfacesAthimni.ASP.Net.AJAX.ISayHelloWorld = function() {

throw Error.notImplemented();}

Athimni.ASP.Net.AJAX.ISayHelloWorld.prototype = {SayHelloWorld = function () {

throw Error.notImplemented();}

}

Athimni.ASP.Net.AJAX.ISayHelloWorld.registerInterface(‘Athimni.ASP.Net.AJAX.ISayHelloWorld’);

Learn ASP.NET AJAX in 5 Minutes

10. Using InterfacesAthimni.ASP.Net.AJAX.NewClassWithInterface =

function(Message) {this.m_Message = Message;

}

Athimni.ASP.Net.AJAX.NewClassWithInterface.prototype = {SayHelloWorld = function () {

alert(m_Message);}

}

Athimni.ASP.Net.AJAX. NewClassWithInterface.registerClass(‘Athimni.ASP.Net.AJAX.NewClassWithInterface’,Athimni.ASP.Net.AJAX.ISayHelloWorld);

Learn ASP.NET AJAX in 5 Minutes

11. Declaring Enumerations/FlagsAthimni.ASP.Net.AJAX.PersonTypeEnum = function() {

throw Error.invalidOperation();}

Athimni.ASP.Net.AJAX.PersonTypeEnum.prototype = {MEN: 1,WOMEN: 2}

}

Athimni.ASP.Net.AJAX. PersonTypeEnum.registerEnum(‘Athimni.ASP.Net.AJAX.PersonTypeEnum’, true /* Optional: Supporting Flags Bitwise */);

Learn ASP.NET AJAX in 5 Minutes

12. Using Enumerations

var PersonType = Athimni.ASP.Net.AJAX.PersonTypeEnum.MEN;

alert (Athimni.ASP.Net.AJAX.PersonTypeEnum.toString(PersonType));

Learn ASP.NET AJAX in 5 Minutes

13. Where to call these things?

function pageLoad(sender, args){

...

}

Learn ASP.NET AJAX in 5 Minutes

14. Arraysvar PersonArray = new Array();Array.add(PersonArray, ‘Me’);Array.add(PersonArray, ‘You’);

var boolValue = Array.contains(PersonArray, ‘Me’); // true

var NewPersons = [‘He, She’];Array.addRange(PersonArray, NewPersons);

Array.Insert(PersonArra, 1, ‘Us’);

Array.forEach(PersonArray, MyCallBakcMethod);

Learn ASP.NET AJAX in 5 Minutes

14. Arrays

var PersonArray = new Object

PersonArray[« Me »] = « Mohamed »;

PersonArray[« You »] = « Your LN »;

for (var LiteralIndex in PersonArray)

alert(PersonArray[LiteralIndex]);

Learn ASP.NET AJAX in 5 Minutes

Using The ScriptManager In ASP.NET

Learn ASP.NET AJAX in 5 Minutes

1. Adding Scripts References

<asp:ScriptManager runat="server" ID="SM"><Scripts>

<asp:ScriptReference Path= " MyJavaScriptFile.js" />

</Scripts>

</asp:ScriptManager>

Learn ASP.NET AJAX in 5 Minutes

1. Adding Scripts References

• Remeber: Your file script should include these lines to be called by the ScriptManager:

function identityFunction(arg) { return arg;

} if(typeof('Sys') !=='undefined')

Sys.Application.notifyScriptLoaded();

Learn ASP.NET AJAX in 5 Minutes

2. Adding Services References

<asp:ScriptManager runat="server" ID="SM"><Services>

<asp:ServiceReference Path= " MyWebServiceFile.asmx" />

</Services>

</asp:ScriptManager>

Learn ASP.NET AJAX in 5 Minutes

2. Adding Services References

• Remember: Don’t forget to add [ScriptService] attribute to your C# or VB.NET service class.

Learn ASP.NET AJAX in 5 Minutes

Using The WebRequest In ASP.NET AJAX

Learn ASP.NET AJAX in 5 Minutes

1. Making WebRequest Call

• It’s a wrappr around XLHttpRequest object:

function pageLoad() { var webRequest = new Sys.Net.WebRequest(); webRequest.set_url("SayHello.aspx"); webRequest.add_completed(completedHandler);

webRequest.invoke();

}

function completedHandler(result, eventArgs) {if(result.get_responseAvailable()) {

alert(result.get_statusText());

alert(result.get_responseData()); // result.get_xml().xml

}

}

Learn ASP.NET AJAX in 5 Minutes

1. Making WebRequest Call

• We can set the HTTP Verb also (GET, POST):function pageLoad() {

var webRequest = new Sys.Net.WebRequest(); webRequest.set_url("SayHello.aspx");

webRequest.set_httpVerb('POST');

webRequest.set_body('To=MyName');

webRequest.add_completed(completedHandler);

webRequest.invoke();

}

function completedHandler(result, eventArgs) {if(result.get_responseAvailable()) {

alert(result.get_statusText());

alert(result.get_responseData());

}

}

Learn ASP.NET AJAX in 5 Minutes

1. Making WebRequest Call

• We can set the Timeout :function pageLoad() {

var webRequest = new Sys.Net.WebRequest(); webRequest.set_url("SayHello.aspx");

webRequest.set_timeout(5000); webRequest.add_completed(completedHandler);

webRequest.invoke();

}

function completedHandler(result, eventArgs) {if(result.get_timedOut()) {

alert('Hi, It’s time out!'); }

if(result.get_responseAvailable()) { alert(result.get_statusText());

alert(result.get_responseData());

}

}

Learn ASP.NET AJAX in 5 Minutes

1. Making WebRequest Call

• We can set a User Context:function pageLoad() {

var webRequest = new Sys.Net.WebRequest(); webRequest.set_url("SayHello.aspx");

webRequest.set_userContext(‘Hi, I’m called for a defined purpose');

webRequest.add_completed(completedHandler);

webRequest.invoke();

}

function completedHandler(result, eventArgs) {

if(result.get_responseAvailable()) { alert(result.get_webRequest().get_userContext());

}• 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.

Learn ASP.NET AJAX in 5 Minutes

Using The WebRequestManager In ASP.NET AJAX

Learn ASP.NET AJAX in 5 Minutes

1. Define a Timeout for all WebRequestfunction pageLoad() {

Sys.Net.WebRequestManager.set_defaultTimeout(1000);

var webRequest = new Sys.Net.WebRequest();

webRequest.set_url(‘SayHelloaspx');

webRequest.add_completed(completedHandler);

webRequest.invoke();

}

Learn ASP.NET AJAX in 5 Minutes

2. Global Web Request Handlingfunction pageLoad() {

Sys.Net.WebRequestManager.add_completedRequest(completedHandler); // remove_completedRequest

var webRequest = new Sys.Net.WebRequest(); webRequest.set_url(‘SayHello.aspx');

var webRequest2 = new Sys.Net.WebRequest(); webRequest2.set_url(‘SayHello_2.aspx'); Sys.Net.WebRequestManager.executeRequest(webRequest2); Sys.Net.WebRequestManager.executeRequest(webRequest);

}

function completedHandler(result) { if(result.get_responseAvailable()) {

$get('placeholder').innerHTML += "<br />" result.get_webRequest().get_url() + " returned: " + result.get_responseData ();

}

}

Learn ASP.NET AJAX in 5 Minutes

3. Cancel the request before it is actually executedSys.Net.WebRequestManager.add_invokingRequest(invokingHandler);

function invokingHandler(sender, eventArgs) { if(eventArgs.get_webRequest().get_url() === ‘SayHello.aspx') {

eventArgs.set_cancel(true);

}

}

Learn ASP.NET AJAX in 5 Minutes

Using JSON In ASP.NET AJAX

Learn ASP.NET AJAX in 5 Minutes

1. JSON Serialization using C# ASP.NET

Learn ASP.NET AJAX in 5 Minutes

AlbumProxy.cs

2. Deserializing JSON data using JS

Learn ASP.NET AJAX in 5 Minutes

function pageLoad() { AlbumProxy.GetAlbumJSON(completionJSON);

AlbumProxy.GetAlbumXML(completionXML);

}

function completionJSON(result) { var album = eval("(" + result + ")");

$get('placeholder').innerHTML = album

var album2 = Sys.Serialization.JavaScriptSerializer.deserialize(result);

// var objectWithDate =

// Sys.Serialization.JavaScriptSerializer.deserialize(JSONstring);

// var date = new Date(objectWithDate.dateProperty);

$get('placeholder2').innerHTML = album2.Artist;

}

function completionXML(result) { var album = eval(result);

$get('placeholder3').innerHTML = album.ReleaseYear;

}