Learn ASP.NET AJAX in 5 Minutes
-
Upload
code-kernel -
Category
Technology
-
view
4.754 -
download
1
Transcript of Learn ASP.NET AJAX in 5 Minutes
![Page 1: Learn ASP.NET AJAX in 5 Minutes](https://reader035.fdocuments.net/reader035/viewer/2022062319/557ab575d8b42a70408b536c/html5/thumbnails/1.jpg)
Learn ASP.NET AJAX in 5 Minutes
©Mohamed [email protected]
02/2012 – Version 1.0.0
Learn ASP.NET AJAX in 5 Minutes
![Page 2: Learn ASP.NET AJAX in 5 Minutes](https://reader035.fdocuments.net/reader035/viewer/2022062319/557ab575d8b42a70408b536c/html5/thumbnails/2.jpg)
Basic OOP Programming Using ASP.NET AJAX
Learn ASP.NET AJAX in 5 Minutes
![Page 3: Learn ASP.NET AJAX in 5 Minutes](https://reader035.fdocuments.net/reader035/viewer/2022062319/557ab575d8b42a70408b536c/html5/thumbnails/3.jpg)
1. Declaring Namespaces
• Type.registerNamespace (‘Athimni.ASP.Net.AJAX’);
Learn ASP.NET AJAX in 5 Minutes
![Page 4: Learn ASP.NET AJAX in 5 Minutes](https://reader035.fdocuments.net/reader035/viewer/2022062319/557ab575d8b42a70408b536c/html5/thumbnails/4.jpg)
2. Checking For Namespaces
• Type.isNamespace (‘Athimni.ASP.Net.AJAX’);
• Return true/false
Learn ASP.NET AJAX in 5 Minutes
![Page 5: Learn ASP.NET AJAX in 5 Minutes](https://reader035.fdocuments.net/reader035/viewer/2022062319/557ab575d8b42a70408b536c/html5/thumbnails/5.jpg)
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
![Page 6: Learn ASP.NET AJAX in 5 Minutes](https://reader035.fdocuments.net/reader035/viewer/2022062319/557ab575d8b42a70408b536c/html5/thumbnails/6.jpg)
4. Using Classes
var MePerson = new Athimni.ASP.Net.AJAX.PersonClass(‘ATHIMNI’, ‘Mohamed’);
MePerson.GetFirstName();
Learn ASP.NET AJAX in 5 Minutes
![Page 7: Learn ASP.NET AJAX in 5 Minutes](https://reader035.fdocuments.net/reader035/viewer/2022062319/557ab575d8b42a70408b536c/html5/thumbnails/7.jpg)
5. Checking For Classes
• Type.isClass(‘Athimni.ASP.Net.AJAX.PersonClass’);
• Return true/false
Learn ASP.NET AJAX in 5 Minutes
![Page 8: Learn ASP.NET AJAX in 5 Minutes](https://reader035.fdocuments.net/reader035/viewer/2022062319/557ab575d8b42a70408b536c/html5/thumbnails/8.jpg)
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
![Page 9: Learn ASP.NET AJAX in 5 Minutes](https://reader035.fdocuments.net/reader035/viewer/2022062319/557ab575d8b42a70408b536c/html5/thumbnails/9.jpg)
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
![Page 10: Learn ASP.NET AJAX in 5 Minutes](https://reader035.fdocuments.net/reader035/viewer/2022062319/557ab575d8b42a70408b536c/html5/thumbnails/10.jpg)
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
![Page 11: Learn ASP.NET AJAX in 5 Minutes](https://reader035.fdocuments.net/reader035/viewer/2022062319/557ab575d8b42a70408b536c/html5/thumbnails/11.jpg)
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
![Page 12: Learn ASP.NET AJAX in 5 Minutes](https://reader035.fdocuments.net/reader035/viewer/2022062319/557ab575d8b42a70408b536c/html5/thumbnails/12.jpg)
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
![Page 13: Learn ASP.NET AJAX in 5 Minutes](https://reader035.fdocuments.net/reader035/viewer/2022062319/557ab575d8b42a70408b536c/html5/thumbnails/13.jpg)
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
![Page 14: Learn ASP.NET AJAX in 5 Minutes](https://reader035.fdocuments.net/reader035/viewer/2022062319/557ab575d8b42a70408b536c/html5/thumbnails/14.jpg)
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
![Page 15: Learn ASP.NET AJAX in 5 Minutes](https://reader035.fdocuments.net/reader035/viewer/2022062319/557ab575d8b42a70408b536c/html5/thumbnails/15.jpg)
13. Where to call these things?
function pageLoad(sender, args){
...
}
Learn ASP.NET AJAX in 5 Minutes
![Page 16: Learn ASP.NET AJAX in 5 Minutes](https://reader035.fdocuments.net/reader035/viewer/2022062319/557ab575d8b42a70408b536c/html5/thumbnails/16.jpg)
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
![Page 17: Learn ASP.NET AJAX in 5 Minutes](https://reader035.fdocuments.net/reader035/viewer/2022062319/557ab575d8b42a70408b536c/html5/thumbnails/17.jpg)
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
![Page 18: Learn ASP.NET AJAX in 5 Minutes](https://reader035.fdocuments.net/reader035/viewer/2022062319/557ab575d8b42a70408b536c/html5/thumbnails/18.jpg)
Using The ScriptManager In ASP.NET
Learn ASP.NET AJAX in 5 Minutes
![Page 19: Learn ASP.NET AJAX in 5 Minutes](https://reader035.fdocuments.net/reader035/viewer/2022062319/557ab575d8b42a70408b536c/html5/thumbnails/19.jpg)
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
![Page 20: Learn ASP.NET AJAX in 5 Minutes](https://reader035.fdocuments.net/reader035/viewer/2022062319/557ab575d8b42a70408b536c/html5/thumbnails/20.jpg)
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
![Page 21: Learn ASP.NET AJAX in 5 Minutes](https://reader035.fdocuments.net/reader035/viewer/2022062319/557ab575d8b42a70408b536c/html5/thumbnails/21.jpg)
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
![Page 22: Learn ASP.NET AJAX in 5 Minutes](https://reader035.fdocuments.net/reader035/viewer/2022062319/557ab575d8b42a70408b536c/html5/thumbnails/22.jpg)
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
![Page 23: Learn ASP.NET AJAX in 5 Minutes](https://reader035.fdocuments.net/reader035/viewer/2022062319/557ab575d8b42a70408b536c/html5/thumbnails/23.jpg)
Using The WebRequest In ASP.NET AJAX
Learn ASP.NET AJAX in 5 Minutes
![Page 24: Learn ASP.NET AJAX in 5 Minutes](https://reader035.fdocuments.net/reader035/viewer/2022062319/557ab575d8b42a70408b536c/html5/thumbnails/24.jpg)
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
![Page 25: Learn ASP.NET AJAX in 5 Minutes](https://reader035.fdocuments.net/reader035/viewer/2022062319/557ab575d8b42a70408b536c/html5/thumbnails/25.jpg)
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
![Page 26: Learn ASP.NET AJAX in 5 Minutes](https://reader035.fdocuments.net/reader035/viewer/2022062319/557ab575d8b42a70408b536c/html5/thumbnails/26.jpg)
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
![Page 27: Learn ASP.NET AJAX in 5 Minutes](https://reader035.fdocuments.net/reader035/viewer/2022062319/557ab575d8b42a70408b536c/html5/thumbnails/27.jpg)
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
![Page 28: Learn ASP.NET AJAX in 5 Minutes](https://reader035.fdocuments.net/reader035/viewer/2022062319/557ab575d8b42a70408b536c/html5/thumbnails/28.jpg)
Using The WebRequestManager In ASP.NET AJAX
Learn ASP.NET AJAX in 5 Minutes
![Page 29: Learn ASP.NET AJAX in 5 Minutes](https://reader035.fdocuments.net/reader035/viewer/2022062319/557ab575d8b42a70408b536c/html5/thumbnails/29.jpg)
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
![Page 30: Learn ASP.NET AJAX in 5 Minutes](https://reader035.fdocuments.net/reader035/viewer/2022062319/557ab575d8b42a70408b536c/html5/thumbnails/30.jpg)
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
![Page 31: Learn ASP.NET AJAX in 5 Minutes](https://reader035.fdocuments.net/reader035/viewer/2022062319/557ab575d8b42a70408b536c/html5/thumbnails/31.jpg)
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
![Page 32: Learn ASP.NET AJAX in 5 Minutes](https://reader035.fdocuments.net/reader035/viewer/2022062319/557ab575d8b42a70408b536c/html5/thumbnails/32.jpg)
Using JSON In ASP.NET AJAX
Learn ASP.NET AJAX in 5 Minutes
![Page 33: Learn ASP.NET AJAX in 5 Minutes](https://reader035.fdocuments.net/reader035/viewer/2022062319/557ab575d8b42a70408b536c/html5/thumbnails/33.jpg)
1. JSON Serialization using C# ASP.NET
Learn ASP.NET AJAX in 5 Minutes
AlbumProxy.cs
![Page 34: Learn ASP.NET AJAX in 5 Minutes](https://reader035.fdocuments.net/reader035/viewer/2022062319/557ab575d8b42a70408b536c/html5/thumbnails/34.jpg)
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;
}