Asp.Net Ajax Component Development

ASP.NET AJAX Component Development San Diego .NET User Group Meeting February 6, 2007 Joel Rumerman

Topics AJAX Overview ASP.NET AJAX Overview Extending ASP.NET AJAX Developing ASP.NET AJAX Components

AJAX Overview A synchronous J avaScript A nd X ML 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

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

DEMO Creating 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

DEMO Adding 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

DEMO Registering 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.

DEMO Instantiating 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.Register xxxx Ensures that the JavaScript is registered properly when the control is contained within an UpdatePanel

DEMO Create 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

DEMO Add 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

DEMO Adding Private Members and Public Properties

More Client Code – Validating Parameters Very similar to .NET parameter checking capabilities Built-in parameter validation functionality var e xception = 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

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

DEMO Creating Event Handlers and Wiring Them Up

DEMO A Useful Component - PostBackDisabler

Contact Info Joel Rumerman Email: [email_address] Blog: http:// blogs.interknowlogy.com/joelrumerman

Asp.Net Ajax Component Development

Recommended

More Related Content

What's hot (20)

Similar to Asp.Net Ajax Component Development (20)

More from Chui-Wen Chiu (20)

Asp.Net Ajax Component Development

Editor's Notes