Creating ASP.NET AJAX client-side classes

Does that subject looks lame or what! I'm trying to stop using the “Atlas” name -- it's ASP.NET AJAX now, and getting used to the new name is a major pain in the backside. Even though the official name Jessie-James-Garett-certified name is Ajax (note the capitalization), Microsoft chose AJAX. Anyway, I hope I'll get used to it eventually.

So, how do you create a class in a language that has a classless object model? Why would you want to do that in the first place? Prototype-based object oriented programming is way more powerful than your grandma's classes that you are used in seeing in C# and VB.NET! Oh well, prototypes and the flexibility they offer require a paradigm shift and most people are not ready for that. That's why the Microsoft folks have created a language extension that will allow us to turn JavaScript into a strong-typing-wannabe language. My first reaction when I saw the object model was a negative one: grafting classes on top of prototypes looked like travesty to me. Creating a familiar environment for the horde of C# and VB.NET developers has its merits though and I don’t know if all this is a good or a bad move. Take a look at the examples below and tell me what you think.

This series of posts will demonstrate building an ASP.NET AJAX control. We will be working our way through the ImageSlideShow control – an awesome piece of code that will be able to rotate any number of images as long as the number is two. We will start off by defining a class that inherits from Sys.UI.Control and placing it in our own namespace. JavaScript does not support namespaces, but you can freely define an object and have it serve as a namespace: you just define classes as properties of that object:

Type.registerNamespace('Telerik.Samples');

All this does is create a global Telerik object and then attach a Samples one onto it, so that you can create subobjects yourself. Here’s how we define a class after that:

Telerik.Samples.ImageSlideShow = function(element)
{
    Telerik.Samples.ImageSlideShow.initializeBase(this, [element]);
}

A class is defined by its constructor function. Note that our class would want to call its base class’ constructor, so we use the initializeBase method that is provided by the ASP.NET AJAX component model. The last thing we need to do is register the class with the type infrastructure:

Telerik.Samples.ImageSlideShow.registerClass('Telerik.Samples.ImageSlideShow', Sys.UI.Control);

registerClass requires two parameters: the full class name and the type of the class you inherit from. It takes care to provide the initializeBase method that you saw already.

That’s all! We now have an empty control class. How do we use it? First we need to include the script file on the page. We do that by using the ASP.NET AJAX ScriptManager server control:

<atlas:ScriptManager ID="ScriptManager1" runat="server">
    <Scripts>
        <atlas:ScriptReference Path="~/ImageSlideShowEmptyClass.js" />
    </Scripts>
</atlas:ScriptManager>

ImageSlideShowEmptyClass.js has the definition of our class. We can then define a pageLoad global function and exercise our code there. pageLoad will be automatically called by the runtime right after initialization is complete:

<script type="text/javascript">
function pageLoad()
{
    var slideShow = new Telerik.Samples.ImageSlideShow($("ImageSlideShow1"))
    alert(slideShow.element.tagName);
}
</script>

The last thing to explain here is the $ function – $ is a perfectly valid function name in JavaScript, and the function is a shortcut to document.getElementById(...). We verify that our inheritance works by inspecting the element property – we inherit that from the Sys.UI.Control base class and it gets initialized when we call the base constructor through the initializeBase method.

UPDATE:
Here's a quick preview on what we'll cover in the next posts:

• defining properties and adding property metadata by creating a type descriptor; using the type descriptor to create the component declaratively from xml-script
• implementing IDisposable and cleaning things up on page unloads and UpdatePanel refreshes
• consuming and firing events
• creating a server-side control that renders and initializes the client-side component