Getting Started with the ASP.NET 2.0 AJAX Extensions and Control Toolkit

I happened to be building an ASP.NET 2.0 website earlier this year when the ASP.NET 2.0 AJAX Extensions RTM’d, so I decided to try it out.  Someone recently asked me my impressions of the Extensions and Control Toolkit and how best to get started, so I thought I’d pass on my comments.

Thinking of existing ASP.NET developers picking up AJAX for the first time with this framework, it is an extremely well designed and natural development model.  It integrates almost seamlessly into the existing development environment and “<asp:xyz>” tag model.

The AJAX Extensions support static page class methods and web services, mainly using JSON serialization, to access and even data bind controls.  Some of the controls use this capability to populate data, such as the CascadingDropDown.  If you want to use that capability outside of the provided controls, you get to start writing some JavaScript against the client-side API (Microsoft created a new object model written in JavaScript, all client-side, namespaces and all).  However, all of the source code to all of the controls, and the entire Toolkit itself, is available for download, so you can dig as deep as you want for usage or implementation examples.

The barrier to entry for JavaScript and all of the cross-brower drama that comes with it can be significantly lowered by learning and programming to the new client-side API, so that is something worth learning.  Developers should make an effort to truly understand what is going on when they use AJAX on a page.  There is a lot of code happening behind the scenes to produce the end user effect of partial updates or fancy animated controls.

There are several good tutorials to get you off the ground.  The AJAX Framework is truly a framework — when you install it you don’t have any fancy AJAX controls to drop on your pages.  Instead, you’ve got the basis for building your own, and for writing cross-browser JavaScript code on top of the client-side API.  That may be a surprise to someone installing it for the first time.  Instead, all the fancy controls are housed in a Microsoft-sponsored open-source project on CodePlex.  Naturally, they are documented about as well as most open-source projects.  However, they do come with a sample website that you can play with.

One thing that should be high on everyone’s to-do list as a web developer is mastering CSS.  If you are not very strong with CSS, it is going to become tougher to use the new tools, including AJAX and WPF/E.  For many of the fancy controls noted above, you need to create a number of CSS styles just to get them to work.  I recommend one site for CSS that may open your eyes to the possibilities.  Check out all the layouts you can do with no nested tables involved, and cross-browser too.

I believe that the AJAX toolkit documentation is lacking, in some areas significantly.  You will probably find yourself with questions that are not answered at all, or poorly.  However, that has not proven to be a major issue.  For the most part things work as expected, but there are certainly subtleties to learn.

I have had some issues with the collapsible controls not sizing correctly in a stacked configuration, but that is in an absolute positioning-based CSS website that may have another CSS issue that I’m missing.  On the same site, we have an issue with the stacking and with calendar controls not appearing in IE6 only, but again, that could be related to the other CSS.

Another downside seems to be page speed during development.  If debugging is enabled you get a non-compressed debug version of the large JavaScript client-side code, and starting a page in the debugger may take an extra five seconds before it is usable vs. no AJAX.  I believe one of the recent Control Toolkit updates is beginning to address this issue.

A not-to-miss blog for a wide range of ASP.NET topics, not just AJAX, is Scott Guthrie’s.  Here are some more ASP.NET AJAX labs.  And training videos.  The good news is that you can start using the Extensions for very small bits of functionality on your site and expand from there.  For instance, I put an existing checkbox that simply turns a flag on and off in a database inside an UpdatePanel to avoid a complete postback.  I’m sure you can think of areas like this on your websites where a simple operation could be easily optimized with AJAX Extensions for a much bigger benefit in user experience.

1 Comment

  1. CSSPlay is such a mess of advertising and inscrutable layout that I get a headache just looking at it. The content IS good at times, but it certainly sets the bar low for page layout and content presentation. I much prefer Zen Garden for the wow factor, or the Westciv site for beginner tutorials. Once you decide you want to be a designer, A List Apart will help guide you along the path to design enlightenment – and probably crush those dreams as you realize how far you have to go to even approach some of the designers out there. But it’s all about learning, right?