learn asp.net ajax in 5 minutes

Learn ASP.NET AJAX in 5 Minutes

©Mohamed [email protected]

02/2012 – Version 1.0.0


mailto:[email protected]

Basic OOP Programming Using ASP.NET AJAX


1. Declaring Namespaces

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


2. Checking For Namespaces

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

• Return true/false


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’);


4. Using Classes

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

MePerson.GetFirstName();


5. Checking For Classes

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

• Return true/false


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);


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;

}


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) {

}


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’);


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);


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 */);


12. Using Enumerations

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

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


13. Where to call these things?

function pageLoad(sender, args){

...

}


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);


14. Arrays

var PersonArray = new Object

PersonArray[« Me »] = « Mohamed »;

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

for (var LiteralIndex in PersonArray)

alert(PersonArray[LiteralIndex]);


Using The ScriptManager In ASP.NET


1. Adding Scripts References

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

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

</Scripts>

</asp:ScriptManager>


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();


2. Adding Services References

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

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

</Services>

</asp:ScriptManager>


2. Adding Services References

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


Using The WebRequest In ASP.NET AJAX


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

}

}



• 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);


}

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

alert(result.get_statusText());

alert(result.get_responseData());

}

}



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


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


}

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());

}

}



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


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



}

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.


Using The WebRequestManager In ASP.NET AJAX


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

Sys.Net.WebRequestManager.set_defaultTimeout(1000);

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

webRequest.set_url(‘SayHelloaspx');



}


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 ();

}

}


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);

}

}


Using JSON In ASP.NET AJAX


1. JSON Serialization using C# ASP.NET


AlbumProxy.cs

2. Deserializing JSON data using JS


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;

}

learn asp.net ajax in 5 minutes

Technology

aspnet ajax

ajax returntrue

new sysnet

var webrequest

webrequest webrequest

function firstname

var lastname

minutes mohamed athimni