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

Current Popular IT IPertemuan 4

Matakuliah : T0403/Current Popular IT ITahun : 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.



• Tools for Debugging Ajax Applications– Fiddler (http://www.fiddler2.com) 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


http://www.fiddler2.com/


• Simple AJAX Shopping List



• Simple AJAX Shopping List (continue…)



• UpdatePanel AsyncPostBackTrigger



• Nested UpdatePanel



• Programmatically Update UpdatePanel



• UpdatePanels and JavaScript (continue…)– JavaScript



• UpdatePanels and JavaScript (continue…)– UpdatePanels



• UpdateProgress



• Timer


Using Client-side ASP.NET AJAX

• AJAX Client Library


Using Client-side ASP.NET AJAX (Continue…)

• AJAX Client Library (continue…)



• JavaScript Intellisense



• JavaScript Intellisense (continue…)



• Working with Classes



• Working with Inheritance



• Working with Inheritance (continue…)



• Working with namespace



• Retrieving DOM Elements

• Handling DOM Events



• Handling mouse event



• Calling Web Services



• Calling Web Services (continue…)



• Calling Static Page Method


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


– Calendar



– CollapsiblePanel



– MaskedEdit



– ValidatorCallout


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


ASP.NET AJAX Controls & Extenders• Important ASP.NET AJAX Classes and Interfaces


Base Class Description

ExtenderControl This is the abstract base class implemented when creating an ASP.NET AJAX extender control. This class inherits from Control and implements IExtenderControl.

IExtenderControl Implement this interface to build an extender control that does notrequire 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.

IScriptControl Implement 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.

ScriptControl This 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.

ScriptReference This class registers an ECMAScript (JavaScript) file for use on a web page.

ASP.NET AJAX Controls & Extenders• ASP.NET AJAX-Related Namespaces


Namespace Description

System.Web.Configuration

This 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.Serialization

This 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.Services

This 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.UI This 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.Design This 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.Handlers This 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 AllThank You for the Attention

Bina Nusantara

Documents

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