Upload
willow-pinn
View
212
Download
0
Embed Size (px)
Citation preview
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 (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
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 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
Bina Nusantara References: ProASP.NET 3.5 Server Controls and AJAX Components(Rob Cameron and Dale Michalk, 2008)
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.