CodeProject: AJAX ASP.NET Rating Control. Free source code and programming help

Report Article

Discuss

Send to a friend

29 votes for this Article.

Popularity: 6.04 Rating: 4.13 out of 5

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:

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:

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

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

About the Author

Miroslav Sommer

E-learning specialist. ASP.NET, PHP, AJAX and things like that Smile

Occupation:	Software Developer (Senior)
Location:	United Kingdom

Other popular Ajax and Atlas articles:

Build Google IG like Ajax Start Page in 7 days using ASP.NET Ajax and .NET 3.0
Build a start page similar to Google IG in 7 nights using ASP.Net Ajax, .NET 3.0, Linq, DLinq and XLinq.
An Introduction to AJAX Techniques and Frameworks for ASP.NET
This article introduces AJAX to ASP.NET developers, implementing an example web page in different ways using ASP.NET Atlas, ASP.NET callbacks, Ajax.Net, Anthem.Net, and MagicAjax.Net.
ASP.NET Ajax Under-the-hood Secrets
Performance tips and hard-core tricks that change core runtimes, not for the faint-hearted
Introduction to Anthem.NET
How to do AJAX without writing any JavaScript.
Dropdown Box Using AJAX
This article illustrates two dropdown-boxes with nations and states. When selecting a particular nation, the corresponding states will be in the states dropdownbox.

Article Top

You must Sign In to use this message board.

Msgs 1 to 25 of 32 (Total in Forum: 32) (Refresh)

FirstPrevNext

Subject

Author

Date

Display - div

mgp22

11:02 29 May '08

Does anyone know how to make the Rating Control display as a SPAN rather than a DIV tag in the resulting HTML? It is inserting a new row and I don't want this. I tried changing the CSS to display: inline, but this didn't work either. tx, Matt
Sign In·View Thread·PermaLink

Re: Display - div

Miroslav Sommer

2:40 31 May '08

Hi, Believe me, you don't want to render the control as a SPAN... Instead modify CSS for the DIV. I would suggest to leave it as a block and use floating. Take advice of positioning of DIVs in CSS related websites. .ratingGauge { display:block; float:left; width:200px; } Cheers Miroslav
Sign In·View Thread·PermaLink

Re: Display - div

mgp22

7:57 31 May '08

Miroslav - you rock! thank you for the advice!! Matt
Sign In·View Thread·PermaLink

Re: Display - div

mgp22

8:41 31 May '08

Damn.. I still cannot get it, even using float, so that the Rating Control appears inline with text on either side of it: example (xxxxx = rating control) : "The rating is xxxxx, which means that..."
Sign In·View Thread·PermaLink

Re: Display - div [modified]

Miroslav Sommer

3:02 1 Jun '08

Hi,

I see what you want to achieve and I know how to do it. For the usage above floats are bad; put the rating absolute-positioned inside of the "inline" container. The idea behind using DIVs instead of SPANs is that SPANs should only contain inline content, not block content (e.g. other divs) but DIVs can. So you should not wrap rating control in SPAN container.

"The rating is <div class="rating_container"><ajaxtoolkit:rating ...="" cssclass="ratingStar" /></div>, which means that..."

CSS:

.rating_container 
{
  display: inline;
  padding-right: 68px;
}
.ratingStar
{
  white-space:nowrap;
  display: inline;
  padding-top: 4px;
  position: absolute;
}

Cheers
Miroslav

modified on Sunday, June 1, 2008 7:01 PM

Re: Display - div

mgp22

7:41 1 Jun '08

That worked like a charm - MANY MANY Thanks to you Miroslav!!! Matt
Sign In·View Thread·PermaLink

Help

mgp22

11:00 29 May '08

You mention this function, but there is no example of where it is called from. Please clarify. >> Public Shared Function EvaluateRating(ByVal CurrentValue As Integer, _ Thanks, Matt
Sign In·View Thread·PermaLink

Re: Help

Miroslav Sommer

2:30 31 May '08

Hi Matt, Thanks for your post. EvaluateRating is used to evaulate rating value according to the visual scale (e.g. rating value is 1 and corresponding visual scale value evaulated to 0). If you want to see how and where exactly EvaluateRating is used then check the source code from one of attached files. Cheers Miroslav
Sign In·View Thread·PermaLink

Asp.net ajax script managaer error

saquibsa

10:24 23 Apr '08

Hi, the following error occurs On my remote server while displaying script manager, the error is The server tag 'asp:ScriptManager' is ambiguous. Please modify the associated registration that is causing ambiguity and pick a new tag prefix. so please help me to this problem. saquib
Sign In·View Thread·PermaLink

Re: Asp.net ajax script managaer error

Miroslav Sommer

2:24 31 May '08

Hi, I understand the problem. This is a web.config error (solution config or IIS base config). It's possible that a config inherited from a parent folder already registeres asp prefix for AJAX controls. I am sorry but I cannot help you more with configuration, it depends on too many circumstances. Cheers Miroslav
Sign In·View Thread·PermaLink

New Object Instance

saquibsa

9:13 23 Apr '08

There is an error on Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) If Not IsPostBack Then Evaluate_Rating1(Rating1.CurrentRating) End If End Sub , MsgBox Display error, Use the "new" Keyword to object instance. saquib
Sign In·View Thread·PermaLink

Re: New Object Instance

Miroslav Sommer

2:18 31 May '08

Hi, thanks for your interest. I probably do not understand your problem. Could you specify the file and line where you see the error? There is no error in my source code, it is possible that if you have modified it you made a mistake somewhere. Also check pre-requisities before you run the solution. Cheers Miroslav
Sign In·View Thread·PermaLink

develop

manasa1623

4:43 5 Oct '07

Hi, I want to develop this rating application in my project.My project uses following technologies.Can you please tell me whether its possible or not with those technologies? 1.VS 2003 2.Magic AJAX(third party tool) 3.WSS(Windows Sharepoint Server)2.0 Please guide me how can i use this application in my project. Manasa
Sign In·View Thread·PermaLink

Re: develop

Miroslav Sommer

7:52 6 Oct '07

Hi, thanks for your interest. No, it is not possible. To use AJAX ASP.NET Rating as well as other ASP.NET AJAX Controls, you need: - Visual Studio (2005 or newer) - ASP.NET AJAX-Enabled Web Site (Microsoft ASP.NET 2.0 AJAX Extensions) - AjaxControlToolkit (v1.0.10123.0 or newer)
Sign In·View Thread·PermaLink	5.00/5 (1 vote)

control in datalist

vantoko

0:44 19 Jul '07

Hi,

I have the following   code in a datalist :
<ItemTemplate>
            <asp:Label Text='<%# Eval("name") %>' ID="lblName" runat="server"></asp:Label>
                  <cc1:Rating runat="server" ID='Rating'
                                          MaxRating="5"
                                          CssClass="ratingStar"
                                          StarCssClass="ratingItem"
                                          WaitingStarCssClass="Saved"
                                          FilledStarCssClass="Filled"
                                          Tag='<%# Convert.ToInt32(Eval("ID")) %>'
                                          CurrentRating='<%# Convert.ToInt32(Eval("Votes")) %>'
                                          EmptyStarCssClass="Empty" AutoPostBack="True" OnChanged="Rating_Changed"
                                          >
                  </cc1:Rating>
            </ItemTemplate>

However, the votes is always value 3 (which seems to be the default when something goes wrong ?) . In the back-end this is a double in C#, so I convert it;
How can I solve this ?
thanks

koen

2.00/5 (1 vote)

blocking user to rate multiple times

Arshad Raheed

12:18 16 Jul '07

how can i block user to rate multiple times. and one more this i also want to display average/ total rating .. Average Rating: Views (Total / Last 10 Days): 6975/ 206 Thanks..
Sign In·View Thread·PermaLink	2.00/5 (2 votes)

Re: blocking user to rate multiple times [modified]

Miroslav Sommer

12:05 29 Sep '07

Hi, thanks for your interest.

I understand your problem. You will have to store somewhere the information that user had already voted. For pages that are accessed anonymously (not using user authorization) you could save that to cookies. For authorized users you can store it to database.

This article is only about how to use existing Rating control from AjaxControlToolkit, looks like you want more than it actually provides.

You may ask to improve this Rating control it's authors on http://www.codeplex.com/AtlasControlToolkit[^]

modified on Tuesday, April 1, 2008 2:14 PM

Instantiation of this rating control and assign it to my prducts list [modified]

M.Aghasi

3:02 10 Jul '07

hi. I'm beginner in .Net Framework. and very interested in this rating aticle. I know my problem may be so easy to solve fore you, but tell me how can I make some copy of this rating control and assign it seperatly to each of my products? regards, M.Aghasi. M.Agahsi -- modified at 7:28 Saturday 14th July, 2007
Sign In·View Thread·PermaLink	1.00/5 (2 votes)

Re: Instantiation of this rating control and assign it to my prducts list

Miroslav Sommer

11:59 29 Sep '07

Hi, thanks for your interest. I probably do not understand your problem. What do you mean by "assign it separately to each of your products" ? You can put the control to any ASPX page like any other control.
Sign In·View Thread·PermaLink

How to add rating on c# window application gridview

kumar27

21:20 29 May '07

How to add rating on c# window application gridview ashish
Sign In·View Thread·PermaLink

Re: How to add rating on c# window application gridview [modified]

Miroslav Sommer

10:27 4 Jun '07

Hi, this Rating control as well as all other ASP.NET AJAX controls are intended to be used in WebForm applications only. You cannot use them in WinForm applications.
Sign In·View Thread·PermaLink	1.00/5 (1 vote)

vote same value problem [modified]

zatoichi1903

21:55 22 May '07

we cant vote the last voted value for example last vote was 3 and i try to vote 3 but i cant -- modified at 3:11 Thursday 24th May, 2007
Sign In·View Thread·PermaLink

Re: vote same value problem

Miroslav Sommer

10:24 4 Jun '07

Hi, I probably do not understand the reason why would you like to vote 3 and than vote again the same 3. No change - than the same voting is unnecessary.
Sign In·View Thread·PermaLink	4.00/5 (2 votes)

Re: vote same value problem

johnPH

10:36 28 Sep '07

I'm having this problem too. If the last vote was a three and then another user comes onto the page and wants to vote three too. They cant because there is only an onChange event. So you cant take their vote and work out an average
Sign In·View Thread·PermaLink

Re: vote same value problem

Miroslav Sommer

11:56 29 Sep '07

I understand your problem. You can reset value for new users so that they can change it as they like.

But you probably want to show something like "average voted value" and at the same time enable users to vote any value. You can show the average voted value next to the control. You'll probably have to do so because the average value can be decimal number but the rating control can show only integer values.

This article is only about how to use existing Grid control from AjaxControlToolkit, looks like you want more from it that it provides.

3.50/5 (2 votes)

Last Visit: Sunday, October 12, 2008 2:22 AM Last Update:Sunday, October 12, 2008 2:22 AM

1 Next »

General News Question Answer Joke Rant Admin