Script.aculo.us, Prototype and Asp.Net: Best Friends Forever

by Chad Finsterwald

This code sample applies to ASP.NET in the .NET 1.1 and 2.0 framework. Examples are written in C# .Net 2.0 Framework.

Contents

1. Overview
2. What is Script.aculo.us?
3. How does Prototype Figure in?
4. Using Script.aculo.us and Prototype in Asp.Net
5. Resources
6. Conclusion

Overview:

As of late JavaScript has experienced a resurrection. It was not too long ago that a web developer building B2B applications could get by with just a passing knowledge of JavaScript, but technologies like Ajax and mania over Web 2.0 applications has meant that a passing knowledge just won't cut it anymore. So about a year ago when I started brushing up my JavaScript skills I was reminded of something: How much I HATE JavaScript. The cross browser issues, the syntax, the horrid coding environment, programming in JavaScript is hellish. I HATE everything about it. So it was to my eternal gratitude and immediate salvation when the radiant light of Script.aculo.us and Prototype broke upon me. Like Paul, the road to Damascus behind him, I hope to share my elightenment with you.

This article will cover the following:

• An introduction to Script.aculo.us and Prototype
• How to use Script.aculo.us and Prototype with Asp.Net
• Resouces to learn more about them and other JavaScript frameworks

What is Script.aculo.us?

Ruby developers, or at least those on Rails, have long known the joys of Script.aculo.us and Prototype. Script.aculo.us is a JavaScript framework that provides an API for easy to use, cross browser user interface and animation effects. It is Script.aculo.us, not necessarily Ruby or Ajax, that is behind a lot of the cool effects you've seen on sites like BaseCamp, Digg, and The Menu Boston ¹. Its animation library, for example, provides simple methods to make the contents of a block tag --div, p, etc.-- grow, shrink, appear, puff, or disappear. I have illustrated one of these effects, the toggle animation, below.

Because Script.aculo.us is included as part of the Ruby on Rails framework, I think some developers are misled to think it is essentially tied to Ruby. It is not. Script.aculo.us is just a JavaScript framework and as such it will work with any language that JavaScript works with.

Some of the other libraries included in Script.aculo.us are a very easy to use and robust drag and drop library and a Document Object Model (DOM) library for easily creating DOM elements dynamically. All of these are reasonably well documented in the Script.aculo.us wiki (linked in the Resource section.) Script.aculo.us also includes some Ajax controls and methods, but because there are better options out there already for .Net developers I have never used that part of the framework. I have also not tested if Script.aculo.us plays nice with Atlas. I have used it with Anthem.Net, Ajax.Net, and the Telerik callback controls all with no problem. If I have an opportunity to test Atlas with Script.aculo.us I will update this article. (Or if some else has already tested them, please let me know and I will gladly link to your tests.)

How does Prototype Figure in?

If Script.aculo.us is the icing, then Prototype is the cake. Like Script.aculo.us, Prototype is a JavaScript framework. In fact, Script.aculo.us is built on top of Prototype. Prototype provides a range of truly useful methods that make JavaScript much easier. Since discovering Prototype I have been able to fake JavaScript ninja status at work while in truth I am still hardly more skillful than, say, the Karate Kid before his intensive training with Mr Miyagi.

On the Prototype main site they describe the framework this way. “Prototype is a JavaScript framework that aims to ease development of dynamic web applications.” How does it ease development you ask? First, Prototype removes a lot of the cross browser and javascript versioning issues. So long as you code through their API, they do all the hard work of making sure it works on the targeted systems.

Second, Prototype provides a number of shorthand functions that are just easier to remember and use than their JavaScript equivalents. For example, if you are trying to retrieve a particular object by its Id rather than write Document.GetElementById(‘theId’), using ProtoType you can just type $(‘theId’). If you want the value of some element, you just write $F(‘theId’). When you want to remove any HTML tags using JavaScript, you simply call the string.stripTags() function. Prototype has dozens of incredibly helpful functions like these.

Third, Prototype removes some of the pain in working with the JavaScript Document Object Model. It has a number of convenience functions for inserting, removing, and retrieving nodes. For example, if you want to insert some text above a div tag with an Id of “theTag” you would just call following: new Insertion.Before(‘theTag’, ‘The new text’). As you can see when compared to JavaScript's DOM, Prototype is insanely easy to use.

Fourth, Prototype is relentlessly tested. For me, testing JavaScript is about as much fun as a mugging. I confess, I hate testing almost as much as I hate JavaScript, so anything that reduces the amount of code I need to test is a godsend. Prototype is used by thousands of applications and has a dedicated user community, so you can be confident that it is robust, reliable code.

Of course, I have only just scratched the surface of the Prototype API. In the resources section, I provide links to more thorough examples and documentation for both Prototype and Script.aculo.us. I promise that both frameworks will repay close study.

Using Script.aculo.us and Prototype in Asp.Net

I trust by now you are as excited as I was when I learned about Script.aculo.us and Prototype. Perhaps you already feel relief from the heavy yoke of JavaScript around your neck. "Freedom," you cry, "Freedom" as a river of tears streams down your checks. Alright, maybe your joy is not so great but I certainly hope you can see how these two JavaScript frameworks can be of help to you. I have provided a couple simple examples to get you started.

However, before launching into the examples, I want to emphasize that there is nothing particular to .Net that makes it better suited for Script.aculo.us or Prototype than any other language. My main motivation in writing this article was to simply make .Net developers aware that these frameworks exist and to encourage their use by showing how easy it is to integrate them into your Asp.Net code. I want to be clear on this point because absent that context the examples might seem trite. That being said, the sky is the limit in how you can leverage these two frameworks to help you build better, more professional web applications.

// Aspx Page.
<script type="text/javascript">
function checkClick()
{
   // You can use the script tags (<%) to dynamically get the value
   // of the hierchically qualified Id for the control.
   if ( $('<%=cbCheckBox.ClientID %>').checked )
   {
      new Insertion.Before('<%=tbTextBox.ClientID %>', 
         '<strong>The new text<br /></strong>');
   }
}
</script> 

<asp:TextBox
   id="tbTextBox"
   runat="server"
   Text="Some Value" />
<asp:CheckBox
   id="cbCheckBox"
   runat="server"
   Text="Check me, please!" />
      
// Code behind
protected void Page_Load(object sender, EventArgs e)
{
   cbCheckBox.Attributes.Add("onClick", "checkClick();");
}

Click to View Example Two: getElementsByClassName

The example below will show how by adding css class names to controls and using Prototypes ability to retrieve all elements with a certain class name you can easily create some cool client side interactions. Imagine, for example, that you have a form and you want be able to show instructions next to each form item telling the user how to complete that item. Since you do not want to clutter your design you only want to show those instructions if the user wants to see them.

CLICK ME!
Name Please enter both your first and last name
Phone Use the following format: xxx-xxx-xxxx

This example could easily be extended to form validation messages, status messages, etc. To get the code for this example, click on the "Download the Code" button at the top of the page or just click HERE.

Resources

While the documentation for Script.aculo.us is pretty good, Prototype’s documentation on their main site is non existent. Below are a number of links that I have found helpful. I also included links to a few other JavaScript Frameworks in case you want to 'experiment' before settling down. If there are other frameworks that you would recommend, please let me know so I can link to them as well.

• http://Script.aculo.us/ The Script.aculo.us main site. You can download the files from here. There is also some good documentation. Script.aculo.us includes a copy of Prototype, so you do not need to download Prototype seperately.
• http://prototype.conio.net/ Prototype’s main site. Not much to see here, just the latest version of Prototype.
• http://www.sergiopereira.com/articles/prototype.js.html The best documentation for Prototype that I’ve found. Very complete and with a fair number of examples.
• http://prototypedoc.com/ A site which aggregates other sites that have documentation on Prototype.

Other JavaScript Frameworks

• http://openrico.org/ Another JavaScript Effect and Ajax library. I had not had as much luck with Open Rico as I’ve had with Prototype, but it is definitely worth a look.
• http://developer.yahoo.com/yui/ Yahoo!’s User Interface library. I have never used it, but my sense is that if Yahoo! is using it then it is likely very good. In either case, it is cool that they made it available.
• http://moofx.mad4milk.net/ Another Effects library. Its chief benefit seems to be that it is lightweight. I have never used it.
• http://dojotoolkit.org/ Yet another Effects library. And yet another one I have never used. I was impressed with the demonstrations on their site so likely I will check this out.

Conclusion:

In parting, now that you have the power and pleasure of Script.aculo.us and Prototype at your command, please resist the temptation to make every link, every section, and every div animate with a slide, poof, appear, or fade. While cool in small amounts you don't want your site to look like a Web 2.0 version of a spinning dollar sign. Prototype, being more behind the scenes, requires no such caution.

If you have any questions, comments, or confessions they are always welcome.

¹ In the interest of full disclosure, The Menu Boston is my fiance's company, however they are doing some cool stuff with Script.aculo.us and Prototype so I thought it was a fitting example. Go back to the reference.