asp.net ajax component development
TRANSCRIPT
ASP.NET AJAX Component Development
San Diego .NET User Group MeetingFebruary 6, 2007Joel Rumerman
Topics
• AJAX Overview
• ASP.NET AJAX Overview
• Extending ASP.NET AJAX
• Developing ASP.NET AJAX Components
AJAX Overview
• Asynchronous JavaScript And XML• The ability to execute a request to an HTTP endpoint
(or SOAP) in an out-of-band fashion from a web page and receive a response and do something with that response
• Asynchronous: talk to end points using a request - callback pattern
• JavaScript: language used to execute the AJAX request and handle the response
• XML (XSL, XSLT): data transfer structure for data being passed to and from the server
Other AJAX Pieces
• XMLHttp: browser object that provides the ability to perform asynchronous requests. • browsers implement XMLHttp object in
different ways
• JSON: JavaScript Object Notation• Defined by a BNF• Used to pass data to and from the server• Lighter-weight compared to XML
What is ASP.NET AJAX?
• A new web development technology that integrates cross-browser client script libraries with the ASP.NET 2.0 development framework• Cross-browser client script libraries
• Object-Oriented JavaScript Framework• .NET like Programming Constructs
• Types• Inheritance• Interfaces• Events
• Standardizes Client Programming Across Browsers• Server side ASP.NET features facilitate adding client behaviors
to web pages • Classes contained within the System.Web.UI namespace
• ScriptManager, ScriptReference, ScriptManagerProxy, UpdatePanel, Timer
• Server code isn’t required
The State of ASP.NET AJAX
• On January 23, 2007 1.0 Shipped• Fully supported Microsoft product
(24x7x365) for 10 years• Documentation, forums, downloads, and
showcase at http://ajax.asp.net• Client source code available under
Microsoft Permissive License • Server source code available under
Microsoft Resource License
Where is ASP.NET AJAX Going
• Version 2 integrates directly with Orcas• Better IDE experience
• JavaScript Intellisense• Debugging support• Better design time integration
• More Features• Client Side Data Binding• Gadget Support• Better Web Part support
Extending ASP.NET AJAX
Goal
• Create reusable custom ASP.NET AJAX Client Components and ASP.NET Server Controls that manage those components
Types of Custom ASP.NET AJAX Client Components
• Components• Typically non-visual• Not directly associated to DOM Elements• Derive from Sys.Component
• Behaviors• Extend the behavior of an existing DOM Element• Derive from Sys.UI.Behavior
• Controls• Represents a DOM Element as a client object• Derives from Sys.UI.Control
Extending ASP.NET AJAX Process
• Client Development• Defines something that should happen in the browser • Uses the ASP.NET AJAX prototype programming
model• Relies upon the ASP.NET AJAX Client Runtime
• Server Development• Developed using .NET code • Relies upon new ASP.NET AJAX libraries to register
the JavaScript that manages the client component
Steps to Create Client Components
• Declare namespace• Declare new class• Declare internal members*• Define and implement properties*• Define and implement methods• Define events• Override base class methods^• Register class with framework• Declare inheritance from base class^
Steps to Create Server Control
• Declare control
• Inherit from base class (i.e. control, label, panel, etc.)
• Override base methods to emit JavaScript to control client component as necessary
Developing ASP.NET AJAX Components
Steps to Develop a Component
• Setup the Environment
• Develop the client code
• Develop the server control
• Wire up the server control to the client code
Setting Up the Environment
• Creating an ASP.NET AJAX Enabled Project• Included libraries
• System.Web.Extensions.dll• System.Web.Extensions.Design.dll
• Web.Config Settings• Section Groups• Assembly Inclusion• HttpHandlers • HttpModules
Develop the Client Code
• Register a Namespace
• Declare the Component
• Initialize inheritance from the base class
• Register the Component with the runtime
• Inherit from Sys.Component
DEMOCreating a New ASP.NET AJAX Component
Component’s Lifecycle
• An ASP.NET AJAX Component is managed by the ASP.NET AJAX runtime just like an ASP.NET Control is managed by the ASP.NET page handler
• Just like the ASP.NET Control, the ASP.NET AJAX Component goes through a lifecycle• ASP.NET Server Control
• OnInit• CreateChildControls• PreRender• Render• Etc.
• ASP.NET AJAX Component• Initialize• Dispose
DEMOAdding the Initialize and Dispose Method Overrides
Registering with the Runtime
• Our component relies upon the ASP.NET AJAX Framework Runtime• Runtime must be loaded before our
component’s code is parsed• Use ScriptManager to add component
definition to page• Guarantees that our component will be parsed
after the Runtime is loaded
DEMORegistering our Component with the Runtime
Instantiating the Component
• Creating the component• Two Ways
• var myComponent = Sys.Component.create(ComponentType, {id: “name”});
• var myComponent = $create(ComponentType, {id: “name”});
• Both create the component, add it to the runtime’s component collection, and initialize the component.
• Adding it to the component’s collection ensures that the same component with the same id isn’t created more than once.
DEMOInstantiating our Component
Develop the Server Control
• Wire our new client component to a new server control• E.g. <ASP:Label … />
• <span></span>
• E.g. <NewTag:OurNewComponent …/> = • <script type=“javascript>
$create(Interknowlogy.AJAX.OurNewComponent); </script>
• Use ScriptManager.Registerxxx rather than Page.ClientScript.Registerxxxx• Ensures that the JavaScript is registered properly
when the control is contained within an UpdatePanel
DEMOCreate a Server Control Wired to Our New Component
Develop the Server Control
• Associate the Server Control to the Component’s client definition• Embed the JavaScript in the DLL as a
resource• Load the JavaScript into the ScriptManager
using a ScriptReference
DEMOAdd the Client Code to the Server Control
More Client Code – Private Members and Properties
• Private members• Use this._**** style
• this._enabled• Private by convention, not be practice
• Public properties• Use this.get_****, this.set_**** style
• this.get_enabled: function() { return this._enabled;}• this.set_enabled: function(value) { this._enabled = value; }
• Following these conventions sets up the ability for intellisense to work properly in Oracas
DEMOAdding Private Members and Public Properties
More Client Code – Validating Parameters
• Very similar to .NET parameter checking capabilities• Built-in parameter validation functionality• var exception = Function._validateParams(arguments,
[{name: "value", type: Boolean}]);• arguments represents the arguments of the method• Array of argument description objects
• Name of argument (i.e. “value”)• Type of argument
• Boolean, Function, Number, String, Sys.WebForms.PageRequestArgs, user-defined
• Optional arguments• may be null
• Exception is assigned to an error if the parameters did not validate properly
DEMOValidating Parameters
More Client Code - Events
• All components have eventing model built-in• Add and removing events to the base class
event collection• this.get_events().addHandler(eventName, function);• this.get_events().removeHandler(eventName,
function);• Wrap adding/removing of events in
“add_eventName”, “remove_eventName” methods• add_enabledChange: function(handler) {…}• remove_enabledChange: function(handler) {…}
• Again, provides ability for intellisense in Oracas
DEMOCreating Event Handlers and Wiring Them Up
DEMOA Useful Component - PostBackDisabler
Contact Info
• Joel Rumerman
• Email: [email protected]
• Blog: http://blogs.interknowlogy.com/joelrumerman