I recently had a website that needed the ability to rate multiple items on a page. I had previously used the ASP.NET AJAX control toolkit available at http://www.asp.net and it included a rating control that worked perfectly for the project I was building. Or did it?
It didn’t take long to set up the control and put together the Business logic and Data layer for the project. The requirements were fairly simple. Display items on the page and allow users to rate the items from 1 to 5 and only once within a specified time period. The business layer had a configuration for the time span of voting and whenever a vote was cast, it would simply return a Boolean on whether the vote was saved or not.
During final testing of the rating section, I noticed a single instance of lag when rating one of the items. Since the site was running locally, it caught my attention. I opened
Firebug and inspected the page. Keep in mind this page was still clean – the page and master pages were blank with the exception of simple navigation links and the datalist of 4 or 5 items to rate. Firebug reported the postback response at almost 12kb. Since the datalist was within the update panel, that was not surprising. Each item had some detail information and inline styles for testing. However, even after final CSS streamlining, it was likely to have a decent amount of information returned with each vote, especially if we paged the listing at 12 or more items. For a small website without a lot of traffic, this may be acceptable. For most people using the internet at DSL and faster speeds, the vote would take less than a second. However, if the site became busy, that traffic could add up quickly!
As any good developer should, I set off on a Google search to find information on streamlining the update panel and only returning the information concerning each vote. It did not take long to find other complaints about the hefty update panels or the amount of work required to get granular control using ASP.NET AJAX panels and controls. In fact, I kept coming back to the fact that it would be simpler to use “old school” AJAX approach and create my own JavaScript XML connection and parse the results. I had used this approach in many instances prior to the release of Studio 2005 and AJAX support without issue.
I did one last Google search for a JavaScript rating sample to use as a framework since I decided to drop the AJAX toolkit control. I immediately came across the
jQuery Star Rating plugin. It looked very promising AND it gave me a chance to use jQuery within an ASP.NET web site. I had dabbled with jQuery, but had wanted to get more proficient before adding it to a current project. Since there’s no time like the present, I quickly downloaded the plugin, added a literal control in the datalist and kicked out 5 radio button items with a specific class. In a short time, I had the plugin working and looking great! At that point, jQuery offered a perfect solution for the AJAX. A simple jQuery post to an ASP.NET page that used the same code I had already written was all that I needed. I was able to return a message to the user for each vote and Firebug showed it at 20 BYTES! A few style sheet additions later, I had a very nice rating system ready for action.
