Click here to Skip to main content
15,860,861 members
Articles / Web Development / ASP.NET

Rating Demystified: Ajax Way, Amazon Way*

Rate me:
Please Sign up or sign in to vote.
4.73/5 (77 votes)
16 Aug 2008CPOL3 min read 176.3K   1.2K   136   40
Ever wondered, how the amazon rating system works with multiple items in the same page, here is a simple article to describe the basic bare bones needed to create an asynchronous rating module using ASP.NET , SQL Server and ..... AJAX

Ajax Rating System
New Window Online demo - Ajax Rating (updated)

New Window Get the Rating Web Widget (new)

Introduction

This article describes an ASP.NET web module along with some chunks of Javascripts and ...Ajax to create a Rating System. This can be added /customized for any table to add a rating/score module. I was quite amazed, when i first saw the capability of rating multiple items at amazon website without refreshing the page. That nice piece of functionality followed me like destiny, till i needed to implement it in a web application.

Well ! putting it in a live scenario needs much more than just javascript. I started with a bit of frenzied hacking. To understand how exactly it works, by scanning the javascript from online asynchronous rating websites. That was just the beginning, on the way i learned much more than earlier imagined. Here is the result of the effort.

The target was to create a cross browser rating/score system like amazon or better:

  1. Rating: User should be able to Rate a record (1-5)
  2. Accuracy: Number of votes and total score should be accurate and saved and should not be lost in calculations
  3. Real time: Rate/score should be displayed after rating instantly
  4. Reusable: It should be easily plugged into any table for reusability
  5. Avoiding multiple ratings: Basic mechanism to avoid multiple ratings by the same user
  6. Best approach: Compare the pros and cons for both Amazon and Ajax approach
  7. Security: Few words

* By Amazon Way i meant it can simulate the rating system like the amazon website, it does not claims that this is the way amazon is doing there rating.

In Action

To hold your interest, here is how it will look (for single record), once completed

Rating in Action

Assumptions

Those were the initial thoughts, but to make it a general reusable and extensible module, I made some assumptions:

  • The table which will have the records to be rated will have a Primary Key ID (integer and identity) and the it will be the first field in the table.
  • The Table will have atleast two Fields: RatedBy & Score
  • For the current example to work you will need atleast one extra field Title

Rating table structure

Rating Table

web.config structure

The web.config has four keys, one for the connection string and the other for the name of the fields for RatedBy (for the number of user who rated the record) and Score (For total Score) and the table from which you want to apply the Rating system.

Web.config

Required images ( included with the source)

Final Scores

Final Scores Stars

Pretty self explainatory final score can be in decimals 1, 2.5, 2, 4.5 etc, though while rating the images should be only 1-5

Actions

These are the actions which make the whole module:

  • Data access
  • Create rolling mouseover rating images
  • Rating Amazon way, Ajax way
  • Saving asynchronously using IFrames like Amazon (needs refresh)
  • Saving asynchronously using AJAX (no refresh)
  • Rating multiple items in the same page
  • Basic security, rating for an item can be done only once by the user

Data access class

There is a standard data access class, clsDataAccess.cs, which handles all the data related actions.

Code: I have kept here only the names of the functions, just to give you a glimpse of the data access methods.

C#
using System;
using System.Configuration;
using System.Data;
using System.Data.SqlClient; 

namespace Rating
{
    public class clsDataAccess
    // Class defination
    {
        public clsDataAccess()
        { }
        SqlConnection mycon = new SqlConnection(
          ConfigurationSettings.AppSettings["ConnectionString"]);
        // Opens database connection with in SQL SERVER
        public bool openConnection()
        // Closes database connection with in SQL SERVER
        public void closeConnection()
        // Getdata from the table required(given in query).
        public SqlDataReader getData(string query)
        // Save data usually,inserts and updates the data in table.
        public void saveData(string query)
        // Save data usually,inserts and updates the data.
        public void saveNewData(string query)
        // Delete data in database depending on the tablename.
        public int DeleteData(string query)
        // Get data by paging using datagrid.
        public SqlDataAdapter getDataforUpdate(string query)
        // Get data by paging using datagrid.
        public DataSet getDatabyPaging(string query)
        // check a particular value to see the validity.
        public int getCheck(string query)
        // Get a value of limit from the database table.
        public string getValue(string query,int j)
        //Log in method 
        public SqlDataReader Login(string query)
        // dynamically get all table names
        public DataTable getTablenames()
        // For Table operations
        public int TableWrite(string query)
    }
}

Creating rating Images with mouse over:

Stars to Rate

For this we need set of five images for the stars and five for the comments as shown above and two javascript function DisplayStars and DisplayMsg to display those images on mouseover.

Code

JavaScript
function DisplayStars (id, rating)
{
     var starID = "stars." + id;
     starTwinkler[id] = 0;
     msgTwinkler[id] = 0;
     document.write("<map name='starmap" + id +"'>");
     var i = 0;
     for (i = 1; i < 6; i++) {
     document.write("<area shape=rect " + 
     "coords='" + starMap[i] + "' " +
     "onMouseOver=\"StarMouseOver('" + id + "'," + i + ");\" " +
     "onMouseOut=\"StarMouseOut('" + id + "');\" " +
     "onClick=\"SaveStars('" + id + "'," + i + ");" +
     "\" >");
 }
 document.write("</map>");
 document.write("<img vspace=2 title = 'Rate Picture' src='" 
 + starImages[rating] + "'");
 document.write(" border=0 usemap='#starmap" + id);
 document.write("' id='" + starID + "'>");
}
function DisplayMsg (id, rating)
{
     var msgID = "messages." + id;
if ( rating == undefined ) {
document.write("<img vspace=2 height=11 src='" + nullStarMessage + "'");
    }
     else {
 document.write("<img vspace=2 height=11 src='" + starMessages[rating] + "'"); 
     }
 document.write("' id='" + msgID + "'>");
}

Javascript Mouseover functions are so old that nothing needs to be explained.You will also need functions for MouseOut OnClick, Initalize images etc, included in the source.

Rating: Amazon Way

Rating:Single Amazon uses IFrames So the whole process of rating actually happens in another page which resides in the current page through iframe. Rate.aspx is the page which will be called inside an IFrame to call the Rating function
HTML
<iframe width="310" height="28" src="Rate.aspx?id=" frameborder="0" bgcolor="#F2EFE0" />

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Founder Teamcal AI
United States United States

Comments and Discussions

 
GeneralMy vote of 5 Pin
TweakBird20-Jan-11 1:32
TweakBird20-Jan-11 1:32 
GeneralMy vote of 5 Pin
Sandeep Mewara18-Jan-11 20:26
mveSandeep Mewara18-Jan-11 20:26 
GeneralNice one Pin
thatraja15-Jan-10 23:02
professionalthatraja15-Jan-10 23:02 
You got 5 from me.Thumbs Up | :thumbsup: Thumbs Up | :thumbsup:
GeneralOnline Demo Pin
Mario Majčica4-Sep-07 23:07
professionalMario Majčica4-Sep-07 23:07 
AnswerRe: Online Demo Pin
Raj Lal5-Sep-07 11:27
professionalRaj Lal5-Sep-07 11:27 
GeneralKlick on the demo page link gets an ADO.NET Exception Pin
Stephan Pilz19-Jan-07 4:05
Stephan Pilz19-Jan-07 4:05 
GeneralRe: Klick on the demo page link gets an ADO.NET Exception Pin
Raj Lal19-Jan-07 7:16
professionalRaj Lal19-Jan-07 7:16 
GeneralPreloading of Images Pin
gnjunge21-Aug-06 22:33
gnjunge21-Aug-06 22:33 
GeneralRe: Preloading of Images Pin
Raj Lal11-Sep-06 8:21
professionalRaj Lal11-Sep-06 8:21 
Generalproblem running the app Pin
prick2327-Jun-06 21:12
prick2327-Jun-06 21:12 
AnswerRe: problem running the app Pin
Raj Lal28-Jun-06 7:15
professionalRaj Lal28-Jun-06 7:15 
GeneralRe: problem running the app Pin
prick2328-Jun-06 7:33
prick2328-Jun-06 7:33 
AnswerRe: problem running the app Pin
Raj Lal28-Jun-06 8:25
professionalRaj Lal28-Jun-06 8:25 
GeneralRe: problem running the app Pin
prick2328-Jun-06 21:28
prick2328-Jun-06 21:28 
Generalabout rating an article Pin
prick2328-Jun-06 21:31
prick2328-Jun-06 21:31 
GeneralRe: about rating an article Pin
Raj Lal28-Jun-06 22:43
professionalRaj Lal28-Jun-06 22:43 
AnswerRe: problem running the app Pin
Raj Lal28-Jun-06 22:41
professionalRaj Lal28-Jun-06 22:41 
GeneralRe: problem running the app Pin
prick2329-Jun-06 0:07
prick2329-Jun-06 0:07 
AnswerRe: problem running the app Pin
Raj Lal29-Jun-06 7:19
professionalRaj Lal29-Jun-06 7:19 
GeneralInstead of JS from scratch... Pin
Ghostnet2-Jun-06 10:31
Ghostnet2-Jun-06 10:31 
GeneralRe: Instead of JS from scratch... Pin
Raj Lal2-Jun-06 10:58
professionalRaj Lal2-Jun-06 10:58 
GeneralNice Article Pin
kirtand1-Jun-06 8:34
kirtand1-Jun-06 8:34 
GeneralRe: Nice Article Pin
Raj Lal1-Jun-06 8:41
professionalRaj Lal1-Jun-06 8:41 
GeneralI have always wondered Pin
Ennis Ray Lynch, Jr.31-May-06 5:09
Ennis Ray Lynch, Jr.31-May-06 5:09 
GeneralRe: I have always wondered Pin
Raj Lal31-May-06 6:38
professionalRaj Lal31-May-06 6:38 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.