Building ASP.NET AJAX Controls (Pt 1)
Following on from my post about my DevWeek session, I thought I'd try and do a bit of an intro to ASP.NET AJAX controls. I expect most people reading this are familiar with ASP.NET AJAX and maybe have some experience with the AJAX Control Toolkit (which is full of ASP.NET AJAX controls, mainly extenders). But you still may be asking yourself "What, exactly is an ASP.NET AJAX control and why should I care?". Well, we could define an ASP.NET AJAX control as a control (client or server) that takes advantage of ASP.NET AJAX (Extensions or Library) to enrich its functionality. But I'm not sure that's terribly helpful. How about we take an example...
In my Launch Session I used a simple control which displayed a picture of a property (my launch session was built around a fictitious "houses" database) and, when you mouseover the picture, it changes to show a Virtual Earth map of the property location thus:
Sys.Component from which derive Sys.UI.Behavior and Sys.UI.Control . The key differentiator is whether you are building a visual (Behavior / Control) or non-visual (Component) class. Here's how I described them in summary form in my session:
- Sys.Component (eg Timer)
- Encapsulate client code for re-use
- No associated DOM element
- Sys.UI.Behavior (eg Highlight)
- Extends an existing DOM element
- Associated with a DOM element
- Sys.UI.Control (eg HighlightTextBox)
- Represents a DOM element as a client object
- Typically adds some functionality
So if you want to build a simple timer that just raised events at set intervals, you need a Component. If, on the other hand, you want to have some UI associated with your class, you need either a Behavior or a Control. Which one you want can be a little tricky to describe. A Behaviour is associated with a DOM element to add some new functionality and you can therefore add multiple Behaviors to a single DOM element. A Control on the other hand is intended to represent or encapsulate an enhanced DOM element and you can only have a single Control associated with a DOM element. Behaviors and Controls have a lot in common but you'll see where they come into their own when we start to talk about server controls.
We've not got very far as yet but we need to at least get some common ground under our feet. Next I want to talk about common features of these types (ie what do I get if I buy into this and derive from one of them), how to create them and how to access them at runtime. At that point, we might even be able to do something vaguely useful... Then we can walk through building the server control I mentioned above.