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!
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.