Current Popular IT I Pertemuan 4 Matakuliah: T0403/Current Popular IT I Tahun: 2008

Learning Outcomes Learner can use Server-side ASP.NET AJAX Learner can use Client-side ASP.NET AJAX Learner can use ASP.NET AJAX Control Toolkit Bina Nusantara Copyright © Surya Sujarwo 2008

Material Outline Using Server-side ASP.NET AJAX Using Client-side ASP.NET AJAX ASP.NET AJAX Control Toolkit Integrating Client-Side Script ASP.NET AJAX Controls & Extenders Bina Nusantara Copyright © Surya Sujarwo 2008

Using Server-side ASP.NET AJAX Ajax Vision – Reduce full postback of ASP.NET – Google docs, suggest, gmail – An Ajax Application is a client-side web application written using native browser technologies such as JavaScript and DOM. – A pure Ajax application is a web application that consists of a single page and performs all its communications with the web server through web service calls. – In an Ajax application, the user interface layer is located in the browser (where it should be). The business logic and data access layers are located on the server. The user interface layer accesses the business logic layer through web services. Bina Nusantara References: ASP.NET 3.5 Unleashed (Stephen Walther, 2008)

Using Server-side ASP.NET AJAX (Continue…) Server-Side Ajax versus Client-Side Ajax – Microsoft has both server-side Ajax framework and client-side Ajax framework. – Server-side Ajax framework is to provide existing ASP.NET developers with an easy way to implement Ajax functionality. – Client-side Ajax framework is to provide web developers with the tools they need to build pure client-side Ajax applications. – Advantages of server-side: provides existing ASP.NET developers with a painless method of doing Ajax. – Disadvantages of server-side: it doesn’t escape all the problems associated with a server-side framework. – Advantages of client-side: build very rich and responsive web applications. – Disadvantages of client-side: currently not fully baked. Bina Nusantara References: ASP.NET 3.5 Unleashed (Stephen Walther, 2008)

Using Server-side ASP.NET AJAX (Continue…) Tools for Debugging Ajax Applications – Fiddler ( to inspect an Ajax request and response. – Firebug (firefox addon) to inspect DOM elements, and determine which CSS rules apply to which elements in a page. Using the UpdatePanel Controls Bina Nusantara References: ASP.NET 3.5 Unleashed (Stephen Walther, 2008)

Using Server-side ASP.NET AJAX (Continue…) Simple AJAX Shopping List Bina Nusantara References: ASP.NET 3.5 Unleashed (Stephen Walther, 2008)

Using Server-side ASP.NET AJAX (Continue…) Simple AJAX Shopping List (continue…) Bina Nusantara References: ASP.NET 3.5 Unleashed (Stephen Walther, 2008)

Using Server-side ASP.NET AJAX (Continue…) UpdatePanel AsyncPostBackTrigger Bina Nusantara References: ASP.NET 3.5 Unleashed (Stephen Walther, 2008)

Using Server-side ASP.NET AJAX (Continue…) Nested UpdatePanel Bina Nusantara References: ASP.NET 3.5 Unleashed (Stephen Walther, 2008)

Using Server-side ASP.NET AJAX (Continue…) Programmatically Update UpdatePanel Bina Nusantara References: ASP.NET 3.5 Unleashed (Stephen Walther, 2008)

Using Server-side ASP.NET AJAX (Continue…) UpdatePanels and JavaScript (continue…) – JavaScript Bina Nusantara References: ASP.NET 3.5 Unleashed (Stephen Walther, 2008)

Using Server-side ASP.NET AJAX (Continue…) UpdatePanels and JavaScript (continue…) – UpdatePanels Bina Nusantara References: ASP.NET 3.5 Unleashed (Stephen Walther, 2008)

Using Server-side ASP.NET AJAX (Continue…) UpdateProgress Bina Nusantara References: ASP.NET 3.5 Unleashed (Stephen Walther, 2008)

Using Server-side ASP.NET AJAX (Continue…) Timer Bina Nusantara References: ASP.NET 3.5 Unleashed (Stephen Walther, 2008)

Using Client-side ASP.NET AJAX AJAX Client Library Bina Nusantara References: ASP.NET 3.5 Unleashed (Stephen Walther, 2008)

Using Client-side ASP.NET AJAX (Continue…) AJAX Client Library (continue…) Bina Nusantara References: ASP.NET 3.5 Unleashed (Stephen Walther, 2008)

Using Client-side ASP.NET AJAX (Continue…) JavaScript Intellisense Bina Nusantara References: ASP.NET 3.5 Unleashed (Stephen Walther, 2008)

Using Client-side ASP.NET AJAX (Continue…) JavaScript Intellisense (continue…) Bina Nusantara References: ASP.NET 3.5 Unleashed (Stephen Walther, 2008)

Using Client-side ASP.NET AJAX (Continue…) Working with Classes Bina Nusantara References: ASP.NET 3.5 Unleashed (Stephen Walther, 2008)

Using Client-side ASP.NET AJAX (Continue…) Working with Inheritance Bina Nusantara References: ASP.NET 3.5 Unleashed (Stephen Walther, 2008)

Using Client-side ASP.NET AJAX (Continue…) Working with Inheritance (continue…) Bina Nusantara References: ASP.NET 3.5 Unleashed (Stephen Walther, 2008)

Using Client-side ASP.NET AJAX (Continue…) Working with namespace Bina Nusantara References: ASP.NET 3.5 Unleashed (Stephen Walther, 2008)

Using Client-side ASP.NET AJAX (Continue…) Retrieving DOM Elements Handling DOM Events Bina Nusantara References: ASP.NET 3.5 Unleashed (Stephen Walther, 2008)

Using Client-side ASP.NET AJAX (Continue…) Handling mouse event Bina Nusantara References: ASP.NET 3.5 Unleashed (Stephen Walther, 2008)

Using Client-side ASP.NET AJAX (Continue…) Calling Web Services Bina Nusantara References: ASP.NET 3.5 Unleashed (Stephen Walther, 2008)

Using Client-side ASP.NET AJAX (Continue…) Calling Web Services (continue…) Bina Nusantara References: ASP.NET 3.5 Unleashed (Stephen Walther, 2008)

Using Client-side ASP.NET AJAX (Continue…) Calling Static Page Method Bina Nusantara References: ASP.NET 3.5 Unleashed (Stephen Walther, 2008)

ASP.NET AJAX Control Toolkit Adding AJAX Control Toolkit: – Copy AjaxControlToolkit.dll assembly to bin folder of the website – Add an assembly reference – Add the Toolkit to the Toolbox A little of AJAX Control Toolkit Controls: – AutoComplete -> display suggesstions as user types text into a textbox – Calendar -> pop up calendar – CollapsiblePanel -> hide or display content contained in a Panel control – MaskedEdit -> forces user to enter a certain pattern of characters into a textbox control – ValidatorCallout -> a callout effect of validation controls Bina Nusantara References: ASP.NET 3.5 Unleashed (Stephen Walther, 2008), ASP.NET 3.5 For DUMMIES(Ken Cox, 2008)

ASP.NET AJAX Control Toolkit (Continue…) – AutoComplete Bina Nusantara References: AJAX Control Toolkit Example

ASP.NET AJAX Control Toolkit (Continue…) – Calendar Bina Nusantara References: AJAX Control Toolkit Example

ASP.NET AJAX Control Toolkit (Continue…) – CollapsiblePanel Bina Nusantara References: AJAX Control Toolkit Example

ASP.NET AJAX Control Toolkit (Continue…) – MaskedEdit Bina Nusantara References: AJAX Control Toolkit Example

ASP.NET AJAX Control Toolkit (Continue…) – ValidatorCallout Bina Nusantara References: AJAX Control Toolkit Example

Integrating Client-Side Script Handling client-side events Bina Nusantara References: ProASP.NET 3.5 Server Controls and AJAX Components(Rob Cameron and Dale Michalk, 2008)

Integrating Client-Side Script (Continue…) Adding confirmation on form submit Bina Nusantara References: ProASP.NET 3.5 Server Controls and AJAX Components(Rob Cameron and Dale Michalk, 2008)

ASP.NET AJAX Controls & Extenders Important ASP.NET AJAX Classes and Interfaces Bina Nusantara References: ProASP.NET 3.5 Server Controls and AJAX Components(Rob Cameron and Dale Michalk, 2008) Base ClassDescription ExtenderControlThis is the abstract base class implemented when creating an ASP.NET AJAX extender control. This class inherits from Control and implements IExtenderControl. IExtenderControlImplement this interface to build an extender control that does not require a ScriptManager. The IExtenderControl interface registers the script libraries for a control by calling the GetScriptReferences() method, and it registers ScriptDescriptor objects by calling the GetScriptDescriptors(Control) method. IScriptControlImplement this interface to add ASP.NET AJAX support to a custom server control. The methods of the IScriptControl interface provide references to script libraries that define client components and script descriptors that represent instances of client types required to add script control functionality in an ASP.NET Server control. It’s found in the System.Web.UI namespace. ScriptControlThis is the abstract base class implemented when creating an ASP.NET server control that includes ASP.NET AJAX functionality. This class inherits from WebControl and implements IScriptControl. ScriptReferenceThis class registers an ECMAScript (JavaScript) file for use on a web page.

ASP.NET AJAX Controls & Extenders ASP.NET AJAX-Related Namespaces Bina Nusantara References: ProASP.NET 3.5 Server Controls and AJAX Components(Rob Cameron and Dale Michalk, 2008) NamespaceDescription System.Web.ConfigurationThis namespace is extended by ASP.NET AJAX to support declarative and programmatic access to ASP.NET AJAX configuration elements. Example classes are ScriptingJsonSerializationSection and ScriptingSectionGroup. System.Web.Script.SerializationThis namespace was added to ASP.NET to support JavaScript Object Notation (JSON) serialization as well as provide extensibility features to customize serialization. System.Web.Script.ServicesThis namespace was added to ASP.NET to provide attributes for customizing web service support in ASP.NET AJAX. Example classes are ScriptServiceAttribute and ScriptMethodAttribute. System.Web.UIThis namespace is extended by ASP.NET AJAX to provide classes and interfaces that enable client-server communication and rich UI. Example classes are ExtenderControl, ScriptControl, and UpdatePanel. System.Web.UI.DesignThis namespace is extended by ASP.NET AJAX to provide designtime support for Microsoft ASP.NET AJAX. Example classes are UpdatePanelDesigner, TimeDesigner, and UpdateProgressDesigner. System.Web.HandlersThis namespace is extended by ASP.NET AJAX to provide the necessary HTTP handler (ScriptResourceHandler) and HTTP module (ScriptModule) to support ASP.NET AJAX.

That’s All Thank You for the Attention Bina Nusantara