1. Introduce What is ASP.NET AJAX Architecture of ASP.NET AJAX
12/05/07 13:52
Introduce
What is ASP.NET AJAX
Architecture of ASP.NET AJAX
Goal of ASP.NET AJAX
Scenarios
ASP.NET AJAX Extensions
Microsoft AJAX Library
ASP.NET AJAX ToolKit
©2005 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

2. What is ASP.NET AJAX
Name of Microsoft’s AJAX solution, and it refers to a set of client and server technologies that focus on improving web development with Visual Studio
A framework for quickly creating efficient and interactive web applications

3. Architecture of ASP.NET AJAX
Two major components
Microsoft AJAX Library (client)
ASP.NET 2.0 AJAX Extensions (server)
Microsoft AJAX Library
Browsers (IE, Firefox, Safari, others)
Browser Compatibility
Asynchronous Communications
Script Core Library
Base Class Library
XHTML/CSS
Server Scripts
Client
Server
ASP.NET 2.0
Page
Framework and
Server Controls
Application
Services
ASP.NET 2.0 AJAX Extensions
AJAX
Asynchronous
Communications
Services Bridge
ASPX
ASMX

4. Goal of ASP.NET AJAX Cross-platform, browser-indepedent
12/05/07 13:52
Goal of ASP.NET AJAX
Cross-platform, browser-indepedent
Increased productivity, less time to market
Highly extensible
Enhance existing pages using powerful AJAX controls
Can be used with PHP, ColdFusion, etc.
ASP.NET AJAX cho phép phát triển ứng dụng web theo kiểu ajax một cách dễ dàng.
Cho phép xây dựng ứng dụng trên đa trình duyệt
Hỗ trỡ người phát triển ứng dụng web
Có thể áp dụng ajax vào một trang web asp.net một cách dể dàng
©2005 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

5. Scenarios to develop web application with ASP.NET AJAX
12/05/07 13:52
Scenarios to develop web application with ASP.NET AJAX
Server-centric Ajax Web Development
Enrich applications without lots of Javascript code required
Enable you to keep core UI/Application logic on server (VB/C#)
Client-centric Ajax Web Development
Leverage full power of script/DHTML
Provide richer and more interactive user experience
ASP.NET AJAX provides a great Ajax framework for both server and client centric Ajax development scenarios
Kết hợp việc phát triển phía client với việc phát triển phía server
Hỗ trợ phát triển ứng dụng phía client
Thay vì chú trọng toàn bộ chương trình phía client hoặc phía server, ASP.NET AJAX cung cấp hỗ trợ cho cả hai, cho phép xử lý tác vụ ở nơi có ý nghĩa nhất.
©2005 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

6. Server-Centric Programming Model
Browser
ASP.NET Application
Pages
UI Behavior
(Managed
Code)
Page Request
Initial Rendering
(UI + Behavior)
Presentation
(HTML/CSS)
Input Data
Updated UI + Behavior
Microsoft Ajax Library
Client Application Services
Component/UI
Framework,
Controls
ASP.NET
Application Services
Page Framework,
Server Controls

7. Client-Centric Programming Model
Browser
Presentation
(HTML/CSS)
Service
Proxies
UI Behavior
(Script)
ASP.NET Application
Pages
Web
Services
Page Request
Initial Rendering
(UI + Behavior)
Data
Data
Microsoft Ajax Library
Client Application Services
Component/UI
Framework,
Controls
ASP.NET
Application Services
Page Framework,
Server Controls

8. ASP.NET AJAX Extensions
12/05/07 13:52
ASP.NET AJAX Extensions
Browser-agnostic but not platform-agnostic
Support programming easily
ScriptManager, UpdatePanel, and others
Familiar drag-and-drop design paradigm
Built-in Web services provide bridge to key ASP.NET 2.0 application services
ASMX extensions enable Web services to be called through JavaScript proxies
©2005 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

9. Architecture ASPX ASMX ASP.NET AJAX Extensions Server Controls
12/05/07 13:52
Architecture
ASPX
ASMX
ASP.NET AJAX Extensions
Server
Controls
Application Services
Bridge
Asynchronous
Communications
Server Controls: thực hiện sinh mã client (mã lệnh JavaScript và mã khai báo XML) có những đặc tính ASP.NET AJAX. Các server control của ASP.NET AJAX tương tự như các server control của ASP.NET, có ích cho người có kinh nghiệm phát triển phía server. Ngoài các điều khiển thông thường như nút lệnh, ô text, ô chọn, liên kết... còn có những control ASP.NET AJAX đặc biệt để xử lý những hành vi ở client như rê và nhấn chuột... Tất cả những điều khiển này sẽ được tích hợp vào Visual Studio để cho phép làm việc ở màn hình thiết kế giống như các điều khiển server của ASP.NET.
AsynchronousCommunications : cho phép mã client liên lạc (2 chiều: gửi và nhận dữ liệu) với dịch vụ web kiểu .asmx của ASP.NET (cũng như WebMethod được định nghĩa trên trang .aspx) hay dịch vụ web bất kỳ.
Application Services Bridge: sử dụng AsynchronousCommunications để cung cấp những những dịch vụ ứng dụng ASP.NET như xác thực hay truy cập và cập nhật dữ liệu.
ASP.NET 2.0
Page Framework
& Server Controls
Application
Services
©2005 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

10. Server Asynchronous Communications Layer
12/05/07 13:52
Server Asynchronous Communications Layer
Server Asynchronous Communications Layer
Http Handler
Web Service
Page Methods
Profile Services
Authentication
Service
Xml Serialization
JSON Serialization
©2005 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

11. Partial-Page Rendering
12/05/07 13:52
Server Controls
Script
Management
Partial-Page Rendering
Futures CTP
ScriptManager
UpdatePanel
DragOverlay-
Extender
ScriptManager-
Proxy
Update-
Progress
ProfileService
Timer
©2005 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

12. ScriptManager Starting point for ASP.NET AJAX pages
12/05/07 13:52
ScriptManager
Starting point for ASP.NET AJAX pages
What does ScriptManager do?
Downloads JavaScript files to client
Enables partial-page rendering using UpdatePanel
Provides access to Web services via client- side proxies
Manages callback timeouts, provides error handling options and infrastructure, and more
Every page requires one ScriptManager!
©2005 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

13. 12/05/07 13:52
ScriptManager Schema
<asp:ScriptManager ID="ScriptManager1" Runat="server"
EnablePartialRendering="true|false"
EnablePageMethods="true|false"
AsyncPostBackTimeout="seconds"
AsyncPostBackErrorMessage="message"
AllowCustomErrorsRedirect="true|false"
OnAsyncPostBackError="handler"
EnableScriptGlobalization="true|false"
EnableScriptLocalization="true|false"
ScriptMode="Auto|Inherit|Debug|Release"
ScriptPath="path">
<Scripts>
<!-- Declare script references here -->
</Scripts>
<Services>
<!-- Declare Web service references here -->
</Services>
</asp:ScriptManager>
©2005 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

14. Script References "Name" references load script resources
12/05/07 13:52
Script References
"Name" references load script resources
<asp:ScriptManager ID="ScriptManager1" Runat="server">
<Scripts>
<asp:ScriptReference Name="PreviewScript.js"
Assembly="Microsoft.Web.Preview" />
<asp:ScriptReference Name="PreviewDragDrop.js"
<asp:ScriptReference Path="~/Scripts/UIMap.js" />
</Scripts>
</asp:ScriptManager>
"Path" references load script files
©2005 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

15. 12/05/07 13:52
Service References
<asp:ScriptManager ID="ScriptManager1" Runat="server">
<Services>
<asp:ServiceReference Path="WebServiceDemo.asmx " />
</Services>
</asp:ScriptManager>
©2005 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

16. 12/05/07 13:52
ScriptManagerProxy
"Proxy" for ScriptManager controls declared in master pages
Lets content pages declare script and service references
<asp:ScriptManagerProxy ID="ScriptManagerProxy1" Runat="server">
<Scripts>
<!-- Declare additional script references here -->
</Scripts>
<Services>
<!-- Declare additional service references here -->
</Services>
</asp:ScriptManagerProxy>
©2005 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

17. UpdatePanel Partial-page rendering in a box
12/05/07 13:52
UpdatePanel
Partial-page rendering in a box
Clean round trips to server and updates
Requires no knowledge of JavaScript or AJAX
Leverages PageRequestManager class
EnablePartialRendering="true"
Supports explicitly defined triggers
Postbacks from controls in UpdatePanel are converted into async callbacks
©2005 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

18. 12/05/07 13:52
UpdatePanel Schema
<asp:ScriptManager ID="ScriptManager1" Runat="server"
EnablePartialRendering="true" /> .
<asp:UpdatePanel ID="UpdatePanel1" Runat="server"
UpdateMode="Always|Conditional"
ChildrenAsTriggers="true|false">
<Triggers>
<!-- Define triggers (if any) here -->
</Triggers>
<ContentTemplate>
<!-- Define content here -->
</ContentTemplate>
</asp:UpdatePanel>
©2005 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

19. Triggers AsyncPostBackTrigger PostBackTrigger
12/05/07 13:52
Triggers
AsyncPostBackTrigger
Converts postbacks into async callbacks
Typically used to trigger updates when controls outside an UpdatePanel post back
If ChildrenAsTriggers="false", can be used to specify which controls inside UpdatePanel should call back rather than post back
PostBackTrigger
Lets controls inside UpdatePanel post back
Typically used to allow certain controls to post back when ChildrenAsTriggers="true"
©2005 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

20. Triggers Example <asp:UpdatePanel ID="UpdatePanel1" Runat="server"
12/05/07 13:52
Triggers Example
<asp:UpdatePanel ID="UpdatePanel1" Runat="server"
UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" />
<asp:AsyncPostBackTrigger ControlID="TreeView1"
EventName="TreeNodeExpanded" />
EventName="TreeNodeCollapsed" />
<asp:PostBackTrigger ControlID="Button2" />
</Triggers>
<ContentTemplate>
...
</ContentTemplate>
</asp:UpdatePanel>
If no event name is specified in a trigger, the trigger automatically references the control's default event (e.g., Button.Click)‏
©2005 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

21. 12/05/07 13:52
Periodic Updates
Combine UpdatePanel with Timer control to perform periodic updates
Use Timer control Tick events as triggers
<asp:Timer ID="Timer1" Runat="server" Interval="5000"
OnTick="OnTimerTick" />
...
<asp:UpdatePanel UpdateMode="Conditional" ...>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Timer1" />
</Triggers>
</asp:UpdatePanel>
©2005 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

22. UpdateProgress Companion to UpdatePanel controls
12/05/07 13:52
UpdateProgress
Companion to UpdatePanel controls
Displays custom template-driven UI for:
Indicating that an async update is in progress
Canceling an async update that is in progress
Automatically displayed when update begins or "DisplayAfter" interval elapses
©2005 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

23. UpdateProgress Schema
12/05/07 13:52
UpdateProgress Schema
<asp:UpdateProgress ID="UpdateProgress1" Runat="server"
DisplayAfter="milliseconds"
DynamicLayout="true|false"
AssociatedUpdatePanelID="UpdatePanelID">
<ProgressTemplate>
<!-- Declare UpdateProgress UI here -->
</ProgressTemplate>
</asp:UpdateProgress>
©2005 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

24. UpdateProgress Example
12/05/07 13:52
UpdateProgress Example
Display after ½ second
<asp:UpdateProgress DisplayAfter="500" ...>
<ProgressTemplate>
<asp:Image ID="ProgressImage" Runat="server"
ImageUrl="~/Images/SpinningClock.gif" />
</ProgressTemplate>
</asp:UpdateProgress>
Animated GIF
©2005 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

25. Canceling an Update <asp:UpdateProgress DisplayAfter="500" ...>
12/05/07 13:52
Canceling an Update
<asp:UpdateProgress DisplayAfter="500" ...>
<ProgressTemplate>
<b>Working...</b>
<asp:Button ID="CancelButton" Runat="server" Text="Cancel"
OnClientClick="cancelUpdate(); return false" />
</ProgressTemplate>
</asp:UpdateProgress>
<script type="text/javascript">
function cancelUpdate()‏ {
var obj = Sys.WebForms.PageRequestManager.getInstance();
if (obj.get_isInAsyncPostBack())‏
obj.abortPostBack(); }
</script>
©2005 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

26. ASP.NET AJAX Web Services
12/05/07 13:52
ASP.NET AJAX Web Services
ASP.NET AJAX supports ASMX Web methods as endpoints for asynchronous AJAX callbacks
Efficient on the wire (no SOAP or XML)‏
Efficient on the server (no page lifecycle)‏
ScriptService attribute on server indicates Web service is callable from script
JavaScript proxy on client enables JavaScript clients to call Web methods
©2005 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

27. Script-Callable Web Service
12/05/07 13:52
Script-Callable Web Service
[WebService(Namespace = "
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
public class WebServiceDemo : System.Web.Services.WebService {
[WebMethod]
public string HelloWorld(string message) {
return (message + " : " + DateTime.Now.ToLongTimeString()); }
©2005 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

28. Declaring a Service Reference
12/05/07 13:52
Declaring a Service Reference
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Services>
<asp:ServiceReference Path="~/WebServiceDemo.asmx" />
</Services>
</asp:ScriptManager>
<script src="WebServiceDemo.asmx/js" type="text/javascript">
</script>
©2005 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

29. Consuming a Web Service
12/05/07 13:52
Consuming a Web Service
function GetResult() {
var content = $get('location').value;
WebServiceDemo.HelloWorld(content, OnSuccess, OnFailure); }
function OnSuccess(result, context, methodName)
$get('result').innerHTML = result;
©2005 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

30. Handling Errors function GetResult() {
12/05/07 13:52
Handling Errors
function GetResult() {
var content = $get('location').value;
WebServiceDemo.HelloWorld(content, OnSuccess, OnFailure); }
function OnSuccess(result, context, methodName)
$get('result').innerHTML = result;
function OnFailure(error, context, methodName)
var errorMessage = error.get_message();
$get('result').innerHTML = errorMessage;
©2005 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

31. Page Methods Script-callable Web methods in pages
12/05/07 13:52
Page Methods
Script-callable Web methods in pages
Simpler than Web services
Do not require service references
Do not require dedicated ASMX files
Must be public static methods
Must be enabled via ScriptManager.- EnablePageMethods (disabled by default)‏
Called through PageMethods proxy on client
©2005 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

32. 12/05/07 13:52
Enabling Page Methods
<asp:ScriptManager ID="ScriptManager1" EnablePageMethods="true"
Runat="server" />
©2005 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

33. 12/05/07 13:52
Defining a Page Method
public partial class PageMethodDemo: System.Web.UI.Page {
...
[WebMethod]
public static string HelloWorld(string message)
return (message + " : " + DateTime.Now.ToLongTimeString()); }
©2005 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

34. Calling a Page Method function GetResult() {
12/05/07 13:52
Calling a Page Method
function GetResult() {
var content = $get('location').value;
PageMethods.HelloWorld(content, OnSuccess, OnFailure); }
function OnSuccess(result, context, methodName)
$get('result').innerHTML = result;
function OnFailure(error, context, methodName)
var errorMessage = error.get_message();
$get('result').innerHTML = errorMessage;
©2005 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

35. Built-In Web Services AuthenticationService ProfileService
12/05/07 13:52
Built-In Web Services
AuthenticationService
Front end to membership service
Sys.Services.AuthenticationService proxy
Global instance of Sys.Services._AuthenticationService
ProfileService
Front-end to profile service
Sys.Services.Profile proxy
Global instance of Sys.Services._ProfileService
Accessed through ScriptHandlerFactory
©2005 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

36. Microsoft AJAX Library
12/05/07 13:52
Microsoft AJAX Library
Client half of ASP.NET AJAX
Browser-agnostic and platform-agnostic
Internet Explorer, Firefox, Opera, Safari, etc.
Leverage it from PHP and other platforms
Enhances JavaScript with type system
Namespaces, classes, interfaces, etc.
Packaged in *.js files downloaded to clients
the Microsoft AJAX Library, is a JavaScript library that works on a variety of browsers and serves to simplify JavaScript development. It provides you with the capability to easily write JavaScript using an object-oriented programming approach similar to code-behind programming in ASP.NET. You can use the functions of the Microsoft AJAX library to interact with the DOM, dynamically update portions of the page, communicate with the web server asynchronously, and write rich animations on the page
Microsoft AJAX Library is a JavaScript framework
Global functions ($ functions)‏
JavaScript base type extensions
JavaScript type system
Core classes, interfaces, and other types (script core)‏
More classes, interfaces, and other types (BCL)‏
Framework adds OOP to JavaScript
©2005 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

37. Architecture XHTML/CSS Server Scripts
12/05/07 13:52
Architecture
XHTML/CSS
Server Scripts
Microsoft AJAX Library
Base Class Library
Script Core Library
Asynchronous Communications
Browser Compatibility
Script Core: bổ sung đặc tính hướng đối tượng cho JavaScript (như lớp, interface, kế thừa, xử lý sự kiện, kiểu dữ liệu...). Đây là có thể xem là .NET CLR thu nhỏ ở phía client.
Base Class Library: cung cấp các lớp và cấu trúc cơ bản được dùng trong phát triển .NET Framework (như StringBuilder, Debug, Event...); cung cấp thư viện API xử lý mã client dạng khai báo (XML). Lớp này còn cung cấp hỗ trợ XMLHTTP với WebRequest và WebResponse, cho phép gọi WebMethod ở các file .asmx và .aspx hay dịch vụ web bất kỳ.
Browser Compatibility: xử lý tương thích với các trình duyệt.
Browsers (IE, Firefox, Safari, others)‏
©2005 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

38. Client Asynchronous Communications Layer
12/05/07 13:52
Client Asynchronous Communications Layer
Client Asynchronous Communications Layer
WebRequestManager
JSON
Serializer
Web Service
Proxies
WebRequest
Page Methods
Profile
Authenticate
XmlHttpExecutor
XmlHttp
©2005 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

39. Client-Server Communication
Browser
ASP.NET Application
Asynchronous Communication
Client
Asynchronous Communication
Server
Presentation
(HTML/CSS)
Page Request
Pages
Initial Rendering
(UI + Behavior)
Service
Proxies
Web
Services
Data
UI Behavior
(Script)
Data

40. Global Functions Helper functions for use anywhere
12/05/07 13:52
Global Functions
Helper functions for use anywhere
Used in JavaScript emitted by controls
Function
Description
$create
Creates and initializes a component
$find
Retrieves the component with the specified ID
Beta 2 also defines a global named registerNamespace that can be used in lieu of Type.registerNamespace. However, it's not a "$" function, so it's not included here.
$get
Retrieves the DOM element with the specified ID
$addHandler(s)‏
Registers handlers for DOM event(s)‏
$clearHandlers
Unregisters handlers for DOM events
$removeHandler
Unregisters a handler for a DOM event
©2005 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

41. 12/05/07 13:52
Base Type Extensions
Microsoft AJAX Library extends the following JavaScript types
Array - add, addRange, contains, insert, etc.
Boolean - parse
Date - format, parselocale, parseInvariant, etc.
Error - argumentOutOfRange, etc.
Number - format, parseLocale, parseInvariant
Object - getType, getTypeName
String - format, endsWith, startWith, trim, etc.
©2005 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

42. String.Format var s = String.format ('{0}, {1}, and {2}', 1, 2, 3);
12/05/07 13:52
String.Format
var s = String.format ('{0}, {1}, and {2}', 1, 2, 3);
window.alert (s);
©2005 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

43. Adding OOP to JavaScript
12/05/07 13:52
Adding OOP to JavaScript
Object-based but not object-oriented
Microsoft AJAX Library adds OOP to JavaScript
Namespaces
Classes and inheritance
Interfaces and enumerated types
prototype property forms basis for "classes"
Type class provides typing and type reflection
©2005 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

44. JavaScript "Classes" Person = function(name) { this._name = name; }
12/05/07 13:52
JavaScript "Classes"
Person = function(name) {
this._name = name; }
Person.prototype = {
get_name: function() {
return this._name;
// Declare other class methods here
©2005 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

45. Using the Person Class var p = new Person(‘A'); // Displays “A"
12/05/07 13:52
Using the Person Class
var p = new Person(‘A');
// Displays “A"
window.alert(p.get_name());
©2005 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

46. Type Class Adds typing and reflection to JavaScript
12/05/07 13:52
Type Class
Adds typing and reflection to JavaScript
Adds key instance methods to all types
registerClass, registerInterface
initializeBase, getBaseType
getBaseMethod, callBaseMethod, and others
Implements key "static" methods
registerNamespace
isNamespace, isClass, isInterface, and others
Implemented in MicrosoftAjax.js
©2005 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

47. Registering Namespaces and Classes
12/05/07 13:52
Registering Namespaces and Classes
Type.registerNamespace(‘MyNameSpace');
MyNameSpace.Person = function(name) {
this._name = name; }
MyNameSpace.Person.prototype = {
get_name: function() {
return this._name;
MyNameSpace.Person.registerClass('MyNameSpace.Person');
©2005 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

48. Using MyNameSpace.Person
12/05/07 13:52
Using MyNameSpace.Person
var p = new MyNameSpace.Person(‘A');
// Displays “A"
window.alert(p.get_name());
// Displays " MyNameSpace.Person"
window.alert(Object.getTypeName(p));
©2005 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

49. JavaScript Files Script Core Library Internet MicrosoftAjax.js
12/05/07 13:52
JavaScript Files
MicrosoftAjax.js
Script Core Library
(run-time + framework)
Internet
Explorer
PreviewWebForms.js
Partial-page rendering
Firefox
MicrosoftAjaxTimer.js
Sys.UI._Timer class
PreviewScript.js
Base Class Library
(controls, XML script, etc.)
MicrosoftAjaxRuntime.js includes the type system, core types (e.g., Error), and extensions to base types (String, Array, etc.)
MicrosoftAjax.cs includes types such as StringBuilder, _Debug, Component, _Application, and Control. It also includes networking classes such as XmlHttpExecutor and JavaScriptSerializer, and it contains the _ProfileService and _AuthenticationService classes used to interface with ASP.NET app services
Sizes shown in star banners are GZIPped sizes.
Safari
PreviewGlitz.js
UI enhancements
(animation and opacity)
PreviewDragDrop.js
Other
Drag-and-drop
©2005 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

50. MicrosoftAjax.js Sys Sys.Net Sys.Services Sys.Serialization Sys.UI
12/05/07 13:52
MicrosoftAjax.js
Sys
Sys.Net
Sys.Services
Sys.Serialization
Sys.UI
String-
Builder
WebRequest-
Executor
_ProfileService
JavaScript-
Serializer
DOMElement
_Debug
XMLHttp-
EXecutor
ProfileGroup
DOMEvent
EventArgs
_WebRequest-
Manager
_Authentication-
Service
Behavior
Component
WebRequest
Control
_Application
WebService-
Proxy
Point
Bounds
CultureInfo
WebService-
Error
_Timer
Other
Other
©2005 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

51. StringBuilder var sb = new Sys.StringBuilder();
12/05/07 13:52
StringBuilder
var sb = new Sys.StringBuilder();
for (var i = 1; i <= 100; i++)‏ {
sb.append(i); // Count from 1 to 100
sb.append('<br/>'); }
var text = sb.toString(); // Get the results
©2005 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

52. PreviewWebForms.js Partial-page rendering support
12/05/07 13:52
PreviewWebForms.js
Partial-page rendering support
PageRequestManager class
Client-side counterpart to UpdatePanel
Manages async callbacks used for partial- page rendering and performs content updates using results
Client-side OM enables advanced UpdatePanel customizations not possible from server side
_UpdateProgress class
©2005 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

53. PageRequestManager Methods
12/05/07 13:52
PageRequestManager Methods
Provide programmatic control over client- side PageRequestManager
Method
Description
get_isInAsyncPostBack
Indicates whether async callback is in progress
getInstance
Returns reference to current PageRequestManager instance
abortPostBack
Cancel the async callback that is currently in progress
add_*
Registers handlers for PageRequestManager events
remove_*
Deregisters handlers for PageRequestManager events
©2005 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

54. PageRequestManager Events
12/05/07 13:52
PageRequestManager Events
PageRequestManager fires events
Hook events on client for advanced customizations
Event
Description
initializeRequest
Fired before async callback commences
You can use initializeRequest to cancel an async callback before it executes. beginRequest and endRequest may be used to display (and hide) callback UIs--for example, custom ProgressUpdate implementations.
beginRequest
Fired when async callback commences
pageLoading
Fired following an async callback (before content is updated)‏
pageLoaded
Fired following a postback or callback (after content is updated)‏
endRequest
Fired when async callback completes
©2005 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

55. PreviewScript.js Other Namespaces Sys.Preview Sys.Preview.UI
12/05/07 13:52
PreviewScript.js
Other
Namespaces
Sys.Preview
Sys.Preview.UI
Sys.Preview.Data
Sys.Preview.UI.Data
BindingBase
Color
DataColumn
DataControl
ServiceMethod-
Request
Binding
Validator
DataRow
DataNavigator
Profile
Action
Label
DataTable
ItemView
Other
InvokeMethod-
Action
Button
DataView
ListView
SetProperty-
Action
CheckBox
DataFilter
XSLTView
Timer
TextBox
DataSource
Other
Counter
Selector
Other
Other
Other
©2005 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

56. Sys.Preview.UI Classes that abstract HTML control elements
12/05/07 13:52
Sys.Preview.UI
Classes that abstract HTML control elements
Button, Label, TextBox, Selector, etc.
Base functionality defined in Sys.UI.Control
get_visible, set_visible
get_parent, set_parent
And so on
Control classes simplify JavaScript and facilitate browser independence
©2005 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

57. Using Control Classes <input type="text" id="Input" /> 
12/05/07 13:52
Using Control Classes
<input type="text" id="Input" /> 
<input type="button" id="MyButton" value="Click Me" /> 
<span id="Output" />
...
<script type="text/javascript">
var g_textBox;
var g_label;
function pageLoad() {
g_textBox = new Sys.Preview.UI.TextBox($get('Input'));
var button = new Sys.Preview.UI.Button($get('MyButton'));
g_label = new Sys.Preview.UI.Label($get('Output'));
button.initialize();
button.add_click(onClick); }
function onClick()‏
g_label.set_text(g_textBox.get_text());
</script>
©2005 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

58. 12/05/07 13:52
Sys.Preview.[UI.].Data
Contains classes that support rich client-side data binding
ItemView and ListView do client-side rendering
DataSource links data consumers to data service and supports 2-way data binding
Sys.Preview.Data
Sys.Preview.UI.Data
DataColumn
DataControl
DataRow
DataNavigator
DataTable
ItemView
DataView
ListView
DataFilter
XSLTView
DataSource
Other
Other
©2005 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

59. PreviewDragDrop.js Adds drag-drop support to BCL
12/05/07 13:52
PreviewDragDrop.js
Adds drag-drop support to BCL
_DragDropManager provides core support
Global instance named DragDropManager
IDropSource and IDropTarget interfaces define signatures for drop-source and drop-target classes
FloatingBehavior provides generic mechanism for floating images, DIVs, and other entities
©2005 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

60. Floating an Image <img id="FloatMe" src="..."> ...
12/05/07 13:52
Floating an Image
<img id="FloatMe" src="...">
...
<script type="text/javascript">
function pageLoad()‏ {
var float = new Sys.Preview.UI.FloatingBehavior
($get('FloatMe'));
float.set_handle($get('FloatMe'));
float.initialize(); }
</script>
©2005 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

61. PreviewGlitz.js Adds UI enhancements to BCL
12/05/07 13:52
PreviewGlitz.js
Adds UI enhancements to BCL
OpacityBehavior class wraps opacity
LayoutBehavior class wraps layout
Animation and derivatives support animations
Property-
Animation
Interpolated-
Animation
Discrete-
Animation
Number-
Animation
Length-
Animation
Composite-
Animation
Fade-
Animation
©2005 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

62. Fading In an Image <img id="SplashImage" src="..."> ...
12/05/07 13:52
Fading In an Image
<img id="SplashImage" src="...">
...
<script type="text/javascript">
function pageLoad()‏ {
var image = new Sys.Preview.UI.Image ($get('SplashImage'));
var fade = new Sys.Preview.UI.Effects.FadeAnimation();
fade.set_target(image);
fade.set_effect (Sys.Preview.UI.Effects.FadeEffect.FadeIn);
fade.set_duration(3);
fade.set_fps(20);
fade.play(); }
</script>
©2005 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

63. ASP.NET AJAX Control Toolkit
12/05/07 13:52
ASP.NET AJAX Control Toolkit
More server controls, plus SDK for custom controls
Community-owned and driven, shared source
©2005 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.