How to create AJAX Rating control in ASP.NET?

In this article I have explained in detail about AJAX Rating in ASP.NET. Normally we are like to give rating if user post good response, if we you are create rating in your website use below code to get rating points by user.

Rating Control Properties

CurrentRating - It is used to set initial default rating value
MaxRating - It is used to set Maximum rating value
StarCssClass - It is denoted CSS class for a visible star
WaitingStarCssClass - This CSS class is used to denote which picture is show when star is waiting mode
FilledStarCssClass - This CSS class is used to denote which picture is show when star is filled
EmptyStarCssClass - This CSS class is used to denote which picture is show when star is empty
RatingAlign - it is show of your start alignment like horizontal or vertical
RatingDirection - Orientation of the stars (LeftToRightTopToBottom or RightToLeftBottomToTop)
OnChanged - Postback event fire when the rating is changed (auto Postback=true)

Client side:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head runat="server">
<title>AJAX Rating Control</title>
<style type="text/css">
font-size: 0pt;
width: 13px;
height: 12px;
cursor: pointer;
display: block;
background-repeat: no-repeat;
background-image: url(image/FilledStar.png);
background-image: url(Image/EmptyStar.png);
background-image: url(Image/SavedStar.png);
<form id="form1" runat="server">
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
<table cellpadding="0" cellspacing="0" align="center" width="500">
<td height="40">
<b>AJAX Rating Control Example</b>
<td height="50">
1) Rate the user reponse?
<td height="50" align="center">
<asp:Rating ID="Rating1" runat="server" StarCssClass="ratingStar" WaitingStarCssClass="savedStar"
FilledStarCssClass="filledStar" EmptyStarCssClass="emptyStar" AutoPostBack="true" CurrentRating="1" MaxRating="5"
<td height="50">
<asp:Label ID="lblRatePoint" runat="server"></asp:Label>

Server side

public partial class _Default : System.Web.UI.Page
protected void Page_Load(object sender, EventArgs e)
protected void Rating1_Changed(object sender, AjaxControlToolkit.RatingEventArgs e)
lblRatePoint.Text="Selected Rating is " + e.Value.ToString();


Source Code Detail:
Here with I have attached source code of AJAX Rating Control example download and try to learn this concept.
Front End : ASP.NET
Code Behind: C#

I hope this article help to know AJAX Rating Control.


  • Source Code (43585-191812-AJRatingControl.rar)
  • Comments

    Guest Author: aniyan05 Jul 2013

    It is very valuable article.I inserted this to my project, It is very easy to understand . Now I need to add the value to database and show the average or point vise rating.
    Thanks to posting this article.

  • Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.
  • No HTML formatting and links to other web sites are allowed.
  • This is a strictly moderated site. Absolutely no spam allowed.
  • Name: