Moses on DotNetSlackers

Using Script# to build ASP.NET AJAX Enabled Controls

Recently I’ve finished reading the marvelous book ASP.NET AJAX IN ACTION. After that I thought to start build some simple ASP.NET AJAX Enabled Controls. Unfortunately I’m not an advanced JavaScript developer and I consider most of the scripts I wrote a simple bad coding practice scripts. So ASP.NET AJAX Scripting framework would enhance my Scripting style! But again I’m not an advance JavaScript developer. I know JavaScript basics that would let me go ahead and would give a crash start. And I’ve tried a tool made by Nikhil Kothari named Script#. A tool that lets me writes JavaScript for ASP.NET AJAX Enabled Controls using C#, a language that I’m used to develop with.

Script# in few words is C# compiler that converts C# code to JavaScript Code.

So I started to use Script# and I was amazed by how fast I can accomplish developing my simple controls using this tool. In this post I’m going to show my experience with this tool and focus on things I wished to have in it but so far it doesn’t support.

Simply when I started with Script#; I wanted to build a simple styled TextBox control that have style when hover over it or receive a focus or even when the TextBox is in read-only state. Very simple control isn’t it?!

Well, Script# provides you with base classes to inherit from if you wish to build AJAX Enabled Controls. These classes are Sys.UI.Control and Sys.UI.Behavior. As you might notice, these classes are mapping to the Client Classes with the same name. When you compile your project you’ll get a JavaScript output file with your client classes you defined in the C#. Of course your client class generates will inherit from the client class you defined in your C# code. It is important to note that we are talking here about client classes not the ASP.NET Server Control classes.

The code for my classes is attached to the post, all you need is to download the Script#, install it and compile the Projects attached. Then examine the JavaScript files generated. Also you’ll notice that there is 2 JavaScript files are generated “YourProjectName.js” and “YourProjectName.debug.js”. The first one is the release version which is compressed and hard to read. The other one is the debug version, not compressed and has all your debug details on it. That means inside your C# code you may call Debug.Trace() method, this method class will not be available in the release version of the script but of course it will be generated in the debug version.

At the time I’m writing this post I was using Script# v0.4.2.0. So far my comments about this wonderful tool are only 2:

·         When calling DomEvent.AddHandlers method it generate in JavaScript the fully qualified client method “Sys.UI.DomEvent.addHandlers” although there is a simple shortcut for it which is $addHanlders. Same thing for DomEvent.AddHandler method which has equivalent shortcut $addHandler.

·         Second comment is that I face the need to use readOnly property of TextBox. TextBox will render even an input element with type=”text” or textarea element. Both have readOnly property that can be accessed through client code. Script# provides nearly full DOM support in managed classes that is compiled and generates JavaScript code as output. So in Script# input element with type = “text” and textarea are represented as System.DHTML.TextElement and System.DHTML.TextAreaElement respectively. The issue here is both classes do not expose ReadOnly property!!
This issue made me access readOnly property through this code DOMAttribute att = this.Element.GetAttributeNode("readOnly");. Again facing another issue which is browser compatibility. IE returns readOnly property as Boolean true/false. FireFox and Opera return readOnly property as string; empty or null if the element is not read-only and “readonly” value if the element is read-only. A funny note, Opera returns “readOnly” with capital O if the element is read-only.

There are some other comments, but not sure how far Script# can reach to enable such facilities. For example, as mentioned above I had to access readOnly property using a long line of code. This code is generated like this var att = this.get_element().getAttributeNode('readOnly'); a long line comparing to this code this.get_element().readOnly; especially if you can save few extra lines by accessing the property directly.

ASP.NET AJAX In Action Book

Currently I'm enjoying reading ASP.NET AJAX In Action Book written by Alessandro Gallo, David Barkol, and Rama Krishna Vavilala. As the time I'm writing this post, I've finished Part 1 and comming across Chapter 8. So far I found the book very informative with rich examples and samples in a tutorial like fashion. Beside I enjoy the writers way of delivering the information so the book is not boring.

This is my first Book to read about ASP.NET AJAX so I cannot tell this is the best book in the market. But I've a glance look at some other books published earlier and I found that ASP.NET AJAX In Action is one of the best and maybe would be at the top of those best books.

The book is 100% fits ASP.NET AJAX newbies -Like me!- as well as those advanced developers and I think it would fit to be used as a reference later.

The book digs deep into ASP.NET AJAX and show how things are managed under the hood with easy and simple way. For example the books explains how the UpdatePanel works and how it is interacting with ScriptManager and PageRequestManager showing the different client events related to PageRequestManager client Class.

The book covers every aspect of ASP.NET AJAX Library showing also its limitations and solutions or work arounds to these limitations.

I give this book a rate 10 out of 10 and a big thank to the authors. Of Course I recommend this book as a first choice to those who wish to learn ASP.NET AJAX in deep with simple advanced book.