Building ASP.NET AJAX Controls (Pt 1)
Links to the other posts in this series
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:
Of course you could build such a control without ASP.NET AJAX but building it with ASP.NET AJAX offers advantages including a component model framework and cross-browser compatibility features to name but two. It essentially makes it much easier to create controls with client-site JavaScript functionality.
Can I take it for read you're still interested? Where should we start? We should start on the client and build up from there. There are 3 client (JavaScript) types that you should be familiar with:
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
- Non-visual
- 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.