Darren Ferguon - Weblog

Monday, July 07, 2008

Unobtrusive AJAX blog comments for Umbraco

Filed under: Umbraco - by Darren Ferguson @ 12:44 PM

Recently I've been building a lot of sites that make use of AJAX using extJS and jQuery, but hadn't really worked with any AJAX in .net.

As an experimental project I decide to build unobtrusive AJAX blog comments for this blog - which are now live.

My goals were:

• Include a spam filtering service - defensio
• Unobtrusive - work without JavaScript enabled
• Identical UI with/without JavaScript

I achieved about 90% of what I wanted.

In the end, the comments utilise an asp.net UpdatePanel. I looked at Page Methods and Umbraco base but in the end went with the UpdatePanel in order to use the standard asp.net validation controls and a ValidationSummary. In my mind the main disadvantage of UpdatePanel - aka partial page loads - is the amount of data exchanged between server and client, but in the end I figured that I probably don't have that many readers who are going to be put off by a 40k round trip.

The whole process was a lot more painful than anticipated. The ValidationSummary control forces a page to scroll to the top when it appears. Lots of blog searching was required to find a hack to get around that. There were several similar irritating issues.

I use jQuery to add the comment to the page on successful submission as the comment list is rendered using an Umbraco XSLT Macro.

There are a couple of glitches that I couldn't get around. Firstly when JavaScript is disabled a submit of the comments form leaves you at the top of the page, I couldn't find any way to anchor a postback to the comments form. Second, my Umbraco macro to display the comments seems to get run before the new comment is created in Umbraco so you have to refresh to view your new comment - again only when JavaScript is disabled.

I'd like to add some effects so that the comments and validation messages appear with some kind of fade effect but it does get tricky to try and override MS default behaviour.

The code is at best hacked right now. If you'd like a copy, drop me a mail. I'll look at making it nicer and 'packaging' it should the interest arise.

Finally I just need to give a few credits. Per for building the .net API for defensio, Warren for some CSS I stole from his blog :) and anyone else who participated in this thread.

Oh, and Peter D got this finished before me. His implementation is here, but I still think it is worth posting this as our approaches vary somewhat.