Click here to Skip to main content
11,705,764 members (40,681 online)
Click here to Skip to main content

AJAX ASP.NET Rating Control

, 4 Jun 2007 CPOL 228K 12.1K 117
Rate this:
Please Sign up or sign in to vote.
An article on how to use the Rating control from the AJAX Control Toolkit and create CSS and images to display it as a gauge or thermometer.

Sample Image - AjaxRating.png

Introduction

This is an article on how to use the Rating control from the AJAX Control Toolkit, and create CSS and images to display it as a gauge or thermometer. It is useful for those who need to show ratings in ASP.NET more graphically.

Background

Once there was a demand on creating a thermometer on some AJAX ASP.NET site. Simple configuration of parameter ranges and different graphics were required.

Setting up

Pre-requisities to use the Rating control and to create the gauge/thermometer:

  • Windows (XP or newer)
  • Visual Studio (2005 or newer)
  • ASP.NET AJAX-Enabled Web Site (Microsoft ASP.NET AJAX v1.0)
  • AJAX Control Toolkit (v1.0.10123.0)
  • Intermediate knowledge of CSS
  • Knowledge of how to draw simple graphics

Using the code

The first thing you need to do is to add the Rating control to your aspx page. The page should look like this:

<%@ Page Language="VB" AutoEventWireup="true" 
                       CodeFile="Default.aspx.vb" Inherits="_Default" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
                         "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Untitled Page</title>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:ScriptManager ID="ScriptManager1" runat="server" />
            <div>
                <cc1:Rating ID="Rating1" runat="server">
                </cc1:Rating>
            </div>
        </form>
    </body>
</html>

You need to set up the basic attributes of the Rating control. You can start with the attributes described at the control's web site.

<ajaxToolkit:Rating runat="server" ID="Rating1"
    MaxRating="5"
    CurrentRating="2"
    CssClass="ratingStar"
    StarCssClass="ratingItem"
    WaitingStarCssClass="Saved"
    FilledStarCssClass="Filled"
    EmptyStarCssClass="Empty"
    >
</ajaxToolkit:Rating>

The control provides a selection of five stars; therefore, it is possible to select a rating from 1 to 5. There are three basic images to display the control's state, recognized by CSS class names:

  • Empty - when the value is not selected.
  • Filled - when the value is selected.
  • Saved - when the value is being saved via an async. postback.

Also, there are two more styles:

  • ratingStar - specifies the control, this Rating is of type "star".
  • ratingItem - specifies each "star" of the rating.

The control renders like this: AjaxRating_stars.gif, 1 kB

But what if we want to use another graphics? What if we want to have a ratio from 1 to 10? What if we want to be able to select even a zero or "not-selected" value?

Simply, the Rating control allows that. You just write some CSS and paint some graphics.

The main idea is:

  • Have some pretty graphics on the background.
  • Use transparent boxes for Filled "stars". These boxes will reveal the background graphics.
  • Use filled boxes for Empty "stars". These boxes will cover the background.
  • Position the Rating control in CSS with padding to have "stars" placed over the required area of the background.
  • Change the MaxRating value. Add one to the value if you require a "zero" value.
  • For CSS attributes - change only the value of the CssClass attribute, leave the other CSS attributes untouched.

The sample Rating control's properties have these value:

MaxRating="21"
CssClass="ratingThermometer"
StarCssClass="ratingItem"
WaitingStarCssClass="Saved"
FilledStarCssClass="Filled"
EmptyStarCssClass="Empty"

... and shows a thermometer with values from 0 to 10 with a 0.5 step. Hence, MaxRating is computed as (10 / 0.5 ) + 1.

The modified control renders like this: AjaxRating_thermometer.gif, 2 kB

Finally, you need to compute the value that corresponds with your graphics, according to the control's CurrentValue, MaxRating, and the desired MinimumRange and MaximumRange:

Public Shared Function EvaluateRating(ByVal CurrentValue As Integer, _
                  ByVal MaxRating As Integer, _
                  ByVal MinimumRange As Integer, _
                  ByVal MaximumRange As Integer) As Double

    ' If MinimumRange = 0 than compute value differently otherwise not
    Dim FromZero As Integer = IIf(MinimumRange = 0, 1, 0)
    Dim Delta As Double = (MaximumRange - MinimumRange) / (MaxRating - 1)
    Dim Result As Double = Delta * CurrentValue - Delta * FromZero

    Return result

End Function

Points of interest

  1. You don't need to use the cc1 prefix and have the assembly registered unnecessarily on every page. You can register the AjaxControlToolkit assembly once in the Web.config. Add the following content into the configuration/system.web/pages/controls node:
    <add tagPrefix="ajaxToolkit" namespace="AjaxControlToolkit" 
                                 assembly="AjaxControlToolkit"/>

    Then, you can replace the cc1 prefix with a more readable ajaxToolkit prefix and remove the Register directive completely from any aspx page. The source code looks much better than before.

  2. There is currently a bug in the Rating control (AJAX Control Toolkit v1.0.10123.0). When you change the view from Source to Design, an error shows up: "value" could not be set on property 'CurrentRating', if value is >5. Nevertheless, everything works.
  3. And, you can surely write your code in C# if you prefer so. The idea of creating and evaluating doesn't change.

History

  • 2007-01-30: First version posted.
  • 2007-06-04: Text updated.

License

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

Share

About the Author

Miroslav Sommer
Software Developer (Senior)
United Kingdom United Kingdom
E-learning specialist. ASP.NET, PHP, AJAX and things like that Smile | :)

You may also be interested in...

Comments and Discussions

 
GeneralMy vote of 5 Pin
Member 103902157-Jun-14 6:04
memberMember 103902157-Jun-14 6:04 
GeneralMy vote of 1 Pin
Anand1234 201017-Apr-14 2:14
groupAnand1234 201017-Apr-14 2:14 
GeneralMy vote of 2 Pin
luffykund19-Mar-14 5:03
memberluffykund19-Mar-14 5:03 
GeneralOk Pin
lapiol17-Feb-14 22:30
memberlapiol17-Feb-14 22:30 
GeneralThank you dear guy for sharing your knowledge Pin
Member 101413749-Jul-13 17:50
memberMember 101413749-Jul-13 17:50 
QuestionThanks a lot Pin
tamdata t30-Jan-13 22:32
membertamdata t30-Jan-13 22:32 
GeneralMy vote of 1 Pin
NguyenMinhTu1-Sep-12 0:26
memberNguyenMinhTu1-Sep-12 0:26 
QuestionTest comment Pin
NguyenMinhTu1-Sep-12 0:23
memberNguyenMinhTu1-Sep-12 0:23 
GeneralMy vote of 1 Pin
Anil.suthar5282-Jun-11 2:32
memberAnil.suthar5282-Jun-11 2:32 
GeneralMy vote of 5 Pin
Mangat Phogat31-May-11 7:08
memberMangat Phogat31-May-11 7:08 
GeneralCannot change the rate, please help me! Pin
Member 795886828-May-11 12:17
memberMember 795886828-May-11 12:17 
GeneralRe: Cannot change the rate, please help me! Pin
ph199428-Nov-11 2:18
memberph199428-Nov-11 2:18 
GeneralMy vote of 5 Pin
atul kashid25-Mar-11 23:54
memberatul kashid25-Mar-11 23:54 
GeneralMy vote of 3 Pin
Manoj040519-Jan-11 22:28
memberManoj040519-Jan-11 22:28 
GeneralMy vote of 5 Pin
Manoj040519-Jan-11 22:09
memberManoj040519-Jan-11 22:09 
GeneralMy vote of 5 Pin
Manoj040519-Jan-11 22:09
memberManoj040519-Jan-11 22:09 
GeneralMy vote of 5 Pin
Sandeep Mewara18-Jan-11 19:32
mvpSandeep Mewara18-Jan-11 19:32 
GeneralMy vote of 1 Pin
ckollias20-Dec-10 3:45
memberckollias20-Dec-10 3:45 
Generalgood Pin
tiger5491027-May-10 5:36
membertiger5491027-May-10 5:36 
Generalaverage rating Pin
sukeshtech26-Oct-09 0:24
membersukeshtech26-Oct-09 0:24 
GeneralAverage rating Pin
Member 31008041-Oct-09 23:17
memberMember 31008041-Oct-09 23:17 
QuestionAjaxControlToolkit rating control in a datalist? Pin
neetesh12329-Sep-09 23:56
memberneetesh12329-Sep-09 23:56 
Questionhow to set rating star's value from database value Pin
omkar mhaiskar28-May-09 2:34
memberomkar mhaiskar28-May-09 2:34 
Generalproblem in Viewing image star in rating Pin
xccx7-Jan-09 2:30
memberxccx7-Jan-09 2:30 
GeneralMessage Automatically Removed Pin
4-Dec-08 16:55
memberDotNetGuts4-Dec-08 16:55 
GeneralDisplay - div Pin
mgp2229-May-08 10:02
membermgp2229-May-08 10:02 
GeneralRe: Display - div Pin
Miroslav Sommer31-May-08 1:40
memberMiroslav Sommer31-May-08 1:40 
GeneralRe: Display - div Pin
mgp2231-May-08 6:57
membermgp2231-May-08 6:57 
GeneralRe: Display - div Pin
mgp2231-May-08 7:41
membermgp2231-May-08 7:41 
GeneralRe: Display - div [modified] Pin
Miroslav Sommer1-Jun-08 2:02
memberMiroslav Sommer1-Jun-08 2:02 
GeneralRe: Display - div Pin
mgp221-Jun-08 6:41
membermgp221-Jun-08 6:41 
GeneralHelp Pin
mgp2229-May-08 10:00
membermgp2229-May-08 10:00 
GeneralRe: Help Pin
Miroslav Sommer31-May-08 1:30
memberMiroslav Sommer31-May-08 1:30 
GeneralAsp.net ajax script managaer error Pin
saquibsa23-Apr-08 9:24
membersaquibsa23-Apr-08 9:24 
GeneralRe: Asp.net ajax script managaer error Pin
Miroslav Sommer31-May-08 1:24
memberMiroslav Sommer31-May-08 1:24 
GeneralNew Object Instance Pin
saquibsa23-Apr-08 8:13
membersaquibsa23-Apr-08 8:13 
GeneralRe: New Object Instance Pin
Miroslav Sommer31-May-08 1:18
memberMiroslav Sommer31-May-08 1:18 
Generaldevelop Pin
manasa16235-Oct-07 3:43
membermanasa16235-Oct-07 3:43 
GeneralRe: develop Pin
Miroslav Sommer6-Oct-07 6:52
memberMiroslav Sommer6-Oct-07 6:52 
Generalcontrol in datalist Pin
vantoko18-Jul-07 23:44
membervantoko18-Jul-07 23:44 
Questionblocking user to rate multiple times Pin
Arshad Raheed16-Jul-07 11:18
memberArshad Raheed16-Jul-07 11:18 
AnswerRe: blocking user to rate multiple times [modified] Pin
Miroslav Sommer29-Sep-07 11:05
memberMiroslav Sommer29-Sep-07 11:05 
QuestionInstantiation of this rating control and assign it to my prducts list [modified] Pin
M.Aghasi10-Jul-07 2:02
memberM.Aghasi10-Jul-07 2:02 
AnswerRe: Instantiation of this rating control and assign it to my prducts list Pin
Miroslav Sommer29-Sep-07 10:59
memberMiroslav Sommer29-Sep-07 10:59 
GeneralRe: Instantiation of this rating control and assign it to my prducts list Pin
Member 31008041-Oct-09 22:58
memberMember 31008041-Oct-09 22:58 
QuestionHow to add rating on c# window application gridview Pin
kumar2729-May-07 20:20
memberkumar2729-May-07 20:20 
AnswerRe: How to add rating on c# window application gridview [modified] Pin
Miroslav Sommer4-Jun-07 9:27
memberMiroslav Sommer4-Jun-07 9:27 
Generalvote same value problem [modified] Pin
zatoichi190322-May-07 20:55
memberzatoichi190322-May-07 20:55 
GeneralRe: vote same value problem Pin
Miroslav Sommer4-Jun-07 9:24
memberMiroslav Sommer4-Jun-07 9:24 
GeneralRe: vote same value problem Pin
johnPH28-Sep-07 9:36
memberjohnPH28-Sep-07 9:36 

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

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

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.150819.1 | Last Updated 4 Jun 2007
Article Copyright 2007 by Miroslav Sommer
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid