Thursday, June 25, 2009

jQuery Based Ajax.Net library


A set of jQuery based Ajax enabled ASP.NET controls including:
- Multi-column auto-complete
- Masked input
- Calendar drop-down
- Validation (including call-out validator)
- Spell checking
- Tab bar control.
Also include a set of helper controls making general purpose ASP.NET programming easier such as
- GridView with insert line and total section
- SqlDataSource with automatically generated insert/update statements.


About a year ago I started to use Ajax.NET Ajax/CTP. While Ajax CTP makes it fairly easy to add ajax functionality to your application, I had some issues with it:

  • Most of my users are still using IE6. Ajax CTP has a know problem with SELECT and BUTTON elements shining right through all the pop-ups. That affects all the components using popup behaivor (such as calendar and auto-complete extenders)
  • Auto-complete component is very inflexible. Most of the time I want my auto-complete to have multiple separate columns instead of lumping everything up together. Also doing something custom with auto-complete extender is pretty difficult: I was trying for example to show first, last name and SSN, and on user selection only populate SSN.
  • Masked edit component is pretty inflexible as well. For example if you have a SSN you are trying to collect, I wanted empty field to stay empty, and field with any data to have masking characters filled in. Instead by default it either removes all the masking characters, or keeps them in, in a way filling my empty fields with masked characters.
  • Size - even though those java-script files are cached by the browser, they can easily start from about 50K and go over 100K for behaivour.

When trying to address all those issues, I wanted to create new component without creating new framework with assiciated learning curve. Creating a date field with calendar pop-up should not require multiple tags to create an input field, popup button, calendar extender, masked edit extender, validator(s), call-out validator,... It should be something as simple as setting a property.

Attached library is my attempt to address all those problems. One of the nice things about this library is that there is no additional startup learning cost. You can literally just replace <asp:TextBox/> with <lib:Input/>, <asp:GridView/> with <lib:InsertableGrid/> and <asp:SqlDataSource/> with <lib:TableDataSource/>.

The library is pretty extensive and in the scope of this article it will be fairly difficult to discuss all the inner workings of the code. Instead I just want to outline main objects and interfaces.


To replace AJAX-CTP I decided to use jQuery library. It's amazing how concise the code can become. My average java-script code is only about 6K (uncompressed) vs. about 100K for the average CTP behavior. Granted those java-script files are cached by the browser, but still the difference is huge. You are free to browse code to see how the internals are implemented. All the Ajax interactions are hidden - you don't need to do anything other then include <asp:ScriptManager EnablePageMethods="true"/>

Sample application setup.

The sample application (default.aspx) uses MS-Sql Server sample pubs database. The only missing piece is a spell-checker dictionary. That one assumes existence of the table called Dictionary with one column called Word. You can 'google' web for the files containing English dictionary, however sample should work as is, without the missing piece.

Default database

Being lazy there are some places in the library where I decided not to carry explicit connection string. So by default I will use last connection defined in the web.config file. Utils.ConStr property will fetch you this default connection.

See full detail:

No comments: