learn asp.net ajax in 5 minutes
TRANSCRIPT
Learn ASP.NET AJAX in 5 Minutes
©Mohamed [email protected]
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;
}