Ajax Rating control sample in ASP.NET

In this post am gonna provide a simple Ajax rating control sample. When u change the rating by clicking the Star, the value will be displayed in a Label control. It will be useful when you develop a shopping cart kind of application. I have also attached the star images necessary for this sample.

Design Code:

<cc:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">  
</cc:ToolkitScriptManager>  
 
<asp:UpdatePanel ID="UpdatePanel1" runat="server">  
    <ContentTemplate>  
        <cc:Rating ID="Rating1" runat="server" MaxRating="5" CurrentRating="1" CssClass="ratingStar" StarCssClass="ratingItem" EmptyStarCssClass="Empty" AutoPostBack="True" OnChanged="Rating1_Changed1">  
        </cc:Rating>  
    </ContentTemplate>  
</asp:UpdatePanel>  
 
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>  

C# Code:

const int RATING1_MINIMUM = 1;  
const int RATING1_MAXIMUM = 5;  
protected void Page_Load(object sender, EventArgs e)  
{  
    if (!IsPostBack)  
    {  
        Evaluate_Rating1(Rating1.CurrentRating);  
    }  
}
  
public void Evaluate_Rating1(int value)  
{  
    Label1.Text = EvaluateRating(value, Rating1.MaxRating, RATING1_MINIMUM, RATING1_MAXIMUM);  
}  
 
public static string EvaluateRating(int value, int maximalValue, int minimumRange, int maximumRange)  
{  
    int stepDelta = (minimumRange == 0) ? 1 : 0;  
    double delta = (double)(maximumRange - minimumRange) / (maximalValue - 1);  
    double result = delta * value - delta * stepDelta;  
    return FormatResult(result);  
}  
 
public static string FormatResult(double value)  
{  
    return String.Format("{0:g}", value);  
}
  
protected void Rating1_Changed1(object sender, AjaxControlToolkit.RatingEventArgs e)  
{  
    Evaluate_Rating1(int.Parse(e.Value));  
}  

CSS Code:

.ratingStar  
{  
    white-space:nowrap;  
    margin:1em;  
    height:14px;  
} 
 
.ratingStar .ratingItem 
{  
    font-size: 0pt;  
    width: 13px;  
    height: 12px;  
    margin: 0px;  
    padding: 0px;  
    display: block;  
    background-repeat: no-repeat;  
    cursor:pointer;  
}  
 
.ratingStar .Filled 
{  
    background-image: url(../images/ratingStarFilled.png);  
}  
 
.ratingStar .Empty 
{  
    background-image: url(../images/ratingStarEmpty.png);  
}  
 
.ratingStar .Saved 
{  
    background-image: url(../images/ratingStarSaved.png);  
}  

Images: