Optimizing and Extending ASP.NET AJAX Stefan Schackow Program Manager

Optimizing UpdatePanel Customizing UpdatePanel Partial-page rendering without UpdatePanel ASP.NET AJAX type system and AJAX behaviors Drag-and-drop AJAX behavior Session Objectives And Agenda

UpdatePanel.UpdateMode UpdateMode controls when updates occur "Always" (default) "Conditional" Pages with multiple UpdatePanels should set UpdateMode="Conditional" on each UpdatePanel Call UpdatePanel.Update to update other UpdatePanels when one UpdatePanel updates Eliminates unnecessary rendering Less code executes on the server Less data comes back in the response

Selective updates with UpdatePanel

UpdatePanel on the Client Sys.WebForms.PageRequestManager 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 Prioritizing overlapping updates Canceling updates before they occur Canceling updates as they occur Highlighting updated UpdatePanels

PageRequestManager Methods MethodDescription get_isInAsyncPostBackIndicates whether async callback is in progress getInstance Returns reference to current PageRequestManager instance abortPostBack Cancels the async callback that is currently in progress add_* Registers handlers for PageRequestManager events remove_*Deregisters handlers for PageRequestManager events

PageRequestManager Events EventDescription initializeRequestFired during async callback initialization beginRequestFired just before async callback commences pageLoading Fired following an async callback (before content is updated) pageLoaded Fired following a postback or callback (after content is updated) endRequestFired when async callback completes

Canceling Asynchronous Updates <asp:Button ID="CancelButton" Runat="server" Text="Cancel" OnClientClick="cancelUpdate(); return false" />. function cancelUpdate() { var obj = Sys.WebForms.PageRequestManager.getInstance(); if (obj.get_isInAsyncPostBack()) obj.abortPostBack(); } <asp:Button ID="CancelButton" Runat="server" Text="Cancel" OnClientClick="cancelUpdate(); return false" />. function cancelUpdate() { var obj = Sys.WebForms.PageRequestManager.getInstance(); if (obj.get_isInAsyncPostBack()) obj.abortPostBack(); }

Using PageRequestManager

Updates without UpdatePanels UpdatePanel trades ease-of-use for efficiency Request includes view state Page undergoes a nearly complete lifecycle Response size depends on size of UpdatePanel Partial-page rendering can be done without UpdatePanels Call back to Web method or page method on server Use JavaScript to update page (and Microsoft AJAX Library classes to maintain browser-independence) No view state + No lifecycle = Maximum efficiency

Updates without UpdatePanel

Adding OOP to JavaScript JavaScript is object-based but not object-oriented Microsoft AJAX Library adds OOP to JavaScript Namespaces Classes Inheritance Interfaces Enumerated types prototype property forms basis for "classes" Type class provides typing and type reflection

JavaScript "Classes" Person = function(name) { this._name = name; } Person.prototype = { get_name: function() { return this._name; } // Declare other class methods here } Person = function(name) { this._name = name; } Person.prototype = { get_name: function() { return this._name; } // Declare other class methods here }

Using the Person Class var p = new Person('foo'); // Displays "foo" window.alert(p.get_name()); var p = new Person('foo'); // Displays "foo" window.alert(p.get_name());

Type Class Adds typing and type reflection to JavaScript Adds key instance methods to all types registerClass, registerInterface initializeBase, getBaseType getBaseMethod, callBaseMethod, and others Implements key "static" type-related methods registerNamespace isNamespace, isClass, isInterface, and others Implemented in MicrosoftAjax.js

Registering Namespaces and Classes Type.registerNamespace('Contoso'); Contoso.Person = function(name) { this._name = name; } Contoso.Person.prototype = { get_name: function() { return this._name; } Contoso.Person.registerClass('Contoso.Person'); Type.registerNamespace('Contoso'); Contoso.Person = function(name) { this._name = name; } Contoso.Person.prototype = { get_name: function() { return this._name; } Contoso.Person.registerClass('Contoso.Person');

Using Contoso.Person var p = new Contoso.Person('foo'); // Displays "foo" window.alert(p.get_name()); // Displays "Contoso.Person" window.alert(Object.getTypeName(p)); var p = new Contoso.Person('foo'); // Displays "foo" window.alert(p.get_name()); // Displays "Contoso.Person" window.alert(Object.getTypeName(p));

Deriving from Contoso.Person Contoso.Programmer = function(name, language) { Contoso.Programmer.initializeBase(this, [name]); this._language = language; } Contoso.Programmer.prototype = { get_name: function() { var name = Contoso.Programmer.callBaseMethod (this, 'get_name'); return name + ' (Programmer)'; }, get_language: function() { return this._language; } Contoso.Programmer.registerClass ('Contoso.Programmer', Contoso.Person); Contoso.Programmer = function(name, language) { Contoso.Programmer.initializeBase(this, [name]); this._language = language; } Contoso.Programmer.prototype = { get_name: function() { var name = Contoso.Programmer.callBaseMethod (this, 'get_name'); return name + ' (Programmer)'; }, get_language: function() { return this._language; } Contoso.Programmer.registerClass ('Contoso.Programmer', Contoso.Person);

Using Contoso.Programmer var p = new Contoso.Programmer('John', 'C#'); // Displays "John (Programmer)" window.alert(p.get_name()); // Displays "C#" window.alert(p.get_language()); // Displays "Contoso.Programmer" window.alert(Object.getTypeName(p)); var p = new Contoso.Programmer('John', 'C#'); // Displays "John (Programmer)" window.alert(p.get_name()); // Displays "C#" window.alert(p.get_language()); // Displays "Contoso.Programmer" window.alert(Object.getTypeName(p));

ASP.NET AJAX type System

Drag-and-Drop PreviewScript.js includes drag-drop types Sys.Preview.UI namespace _DragDropManager provides core support Global instance named DragDropManager IDropSource and IDropTarget interfaces define signatures for drop-source and drop-target classes DragDropList and DraggableListItem provide canned implementation of reorderable lists FloatingBehavior provides generic mechanism for floating images, DIVs, and other entities

Implementing IDragSource Custom.UI.MyDragSourceBehavior = function(element) { Custom.UI.MyDragSourceBehavior.initializeBase(this, [element]); this._mouseDownHandler = Function.createDelegate(this, this.mouseDownHandler);... } Custom.UI.MyDragSourceBehavior.prototype = { // IDragSource methods get_dragDataType: function() {... }, getDragData: function(context) {... }, get_dragMode: function() {... }, onDragStart: function() {... }, onDrag: function() {... }, onDragEnd: function(canceled) {... }, // Other methods initialize: function() {... }, mouseDownHandler: function(ev) {... }, dispose: function() {... }, } Custom.UI.MyDragSourceBehavior.registerClass('Custom.UI.MyDragSourceBehavior', Sys.UI.Behavior, Sys.Preview.UI.IDragSource); Custom.UI.MyDragSourceBehavior = function(element) { Custom.UI.MyDragSourceBehavior.initializeBase(this, [element]); this._mouseDownHandler = Function.createDelegate(this, this.mouseDownHandler);... } Custom.UI.MyDragSourceBehavior.prototype = { // IDragSource methods get_dragDataType: function() {... }, getDragData: function(context) {... }, get_dragMode: function() {... }, onDragStart: function() {... }, onDrag: function() {... }, onDragEnd: function(canceled) {... }, // Other methods initialize: function() {... }, mouseDownHandler: function(ev) {... }, dispose: function() {... }, } Custom.UI.MyDragSourceBehavior.registerClass('Custom.UI.MyDragSourceBehavior', Sys.UI.Behavior, Sys.Preview.UI.IDragSource);

Implementing IDropTarget Custom.UI.MyDropTargetBehavior = function(element) { Custom.UI.MyDropTargetBehavior.initializeBase(this, [element]);... } Custom.UI.MyDropTargetBehavior.prototype = { // IDropTarget methods get_dropTargetElement: function() {... } canDrop: function(dragMode, dataType, data) {... } drop : function(dragMode, dataType, data) {... } onDragEnterTarget : function(dragMode, dataType, data) {... } onDragLeaveTarget : function(dragMode, dataType, data) {... } onDragInTarget : function(dragMode, dataType, data) {... } // Other methods initialize: function() {... } dispose: function() {... } } Custom.UI.MyDropTargetBehavior.registerClass('Custom.UI.MyDropTargetBehavior', Sys.UI.Behavior, Sys.Preview.UI.IDropTarget); Custom.UI.MyDropTargetBehavior = function(element) { Custom.UI.MyDropTargetBehavior.initializeBase(this, [element]);... } Custom.UI.MyDropTargetBehavior.prototype = { // IDropTarget methods get_dropTargetElement: function() {... } canDrop: function(dragMode, dataType, data) {... } drop : function(dragMode, dataType, data) {... } onDragEnterTarget : function(dragMode, dataType, data) {... } onDragLeaveTarget : function(dragMode, dataType, data) {... } onDragInTarget : function(dragMode, dataType, data) {... } // Other methods initialize: function() {... } dispose: function() {... } } Custom.UI.MyDropTargetBehavior.registerClass('Custom.UI.MyDropTargetBehavior', Sys.UI.Behavior, Sys.Preview.UI.IDropTarget);

Using DragDropManager Call DragDropManager.registerDropTarget to register a drop target Typically done in drop target's initialize method Call DragDropManager.startDragDrop to begin a drag- drop operation Typically done in drag source's mouse-down handler Call DragDropManager.unregisterDropTarget to unregister drop target Typically done in drop target's dispose method

Drag-and-drop

Client-Side Data Binding PreviewScript.js 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 DataControl Sys.Preview.Data DataColumn Sys.Preview.UI.Data DataNavigator ItemView ListView XSLTView Other DataRow DataTable DataView DataFilter DataSource Other

ListView and DataSource......

Script-Callable Data Service [ScriptService] public class Books : DataService { [WebMethod] [DataObjectMethod(DataObjectMethodType.Select)] public Book[] GetTitles() { // TODO: Generate and return Book array } public class Book { private string _title; [DataObjectField(true)] public string Title { get { return _title; } set { _title = value; } } [ScriptService] public class Books : DataService { [WebMethod] [DataObjectMethod(DataObjectMethodType.Select)] public Book[] GetTitles() { // TODO: Generate and return Book array } public class Book { private string _title; [DataObjectField(true)] public string Title { get { return _title; } set { _title = value; } }

Client-side data binding

Resources Technical Communities, Webcasts, Blogs, Chats & User Groups Microsoft Learning and Certification Microsoft Developer Network (MSDN) & TechNet Trial Software and Virtual Labs ult.mspx ult.mspx New, as a pilot for 2007, the Breakout sessions will be available post event, in the TechEd Video Library, via the My Event page of the website Required slide: Please customize this slide with the resources relevant to your session MSDN Library Knowledge Base Forums MSDN Magazine User Groups Newsgroups E-learning Product Evaluations Videos Webcasts V-labs Blogs MVPs Certification Chats learn support connect subscribe Visit MSDN in the ATE Pavilion and get a FREE 180-day trial of MS Visual Studio Team System!

Complete your evaluation on the My Event pages of the website at the CommNet or the Feedback Terminals to win!

© 2007 Microsoft Corporation. All rights reserved. This presentation is for informational purposes only. MICROSOFT MAKES NO WARRANTIES, EXPRESS OR IMPLIED, IN THIS SUMMARY.