ASP.NET Ajax Toolkit Star Rating Control Example

Updated on October 15, 2015     Kisan Patel

This tutorial will show you how to use asp.net ajax toolkit start rating control in asp.net web application.

To do, first add the below star rating control into your web form.

<asp:Rating ID="Rating_user" runat="server" AutoPostBack="True" 
      MaxRating="10" 
      CurrentRating="2" 
      StarCssClass="ratingStar" 
      WaitingStarCssClass="savedRatingStar" 
      FilledStarCssClass="filledRatingStar" 
      EmptyStarCssClass="emptyRatingStar" 
      BehaviorID="Rating_user_RatingExtender" 
      OnChanged="Rating_user_Changed">
</asp:Rating>

In above control, we have added some css class like StarCssClass, WaitingStarCssClass and many more. This CssClass description are below-

AutoPostBack – True to cause a postback on rating item click.
CurrentRating – Initial rating value
MaxRating – Maximum rating value
ReadOnly – Whether or not the rating can be changed
StarCssClass – CSS class for a visible star
WaitingStarCssClass – CSS class for a star in waiting mode
FilledStarCssClass – CSS class for star in filled mode
EmptyStarCssClass – CSS class for a star in empty mode
RatingAlign – Alignment of the stars (Vertical or Horizontal)
RatingDirection – Orientation of the stars (LeftToRightTopToBottom or RightToLeftBottomToTop)
OnChanged – ClientCallBack event to fire when the rating is changed
Tag – A custom parameter to pass to the ClientCallBack

CSS rules for above CssClasses are below-

.ratingStar {
   font-size: 0pt;
   width: 13px;
   height: 12px;
   text-align: center;
   margin: 0px;
   padding: 0px;
   cursor: pointer;
   display: block;
   background-repeat: no-repeat;
}
.filledRatingStar {
   background-image: url(FilledStar.png);
}
.emptyRatingStar {
   background-image: url(EmptyStar.png);
}
.savedRatingStar {
   background-image: url(SavedStar.png);
}

Next, add OnChanged event for star rating control as shown in below-

protected void Rating_user_Changed(object sender, AjaxControlToolkit.RatingEventArgs e)
{
        try
        {
            string howStar = "[unknown]";
            switch (Rating_user.CurrentRating)
            {
                case 1:
                    howStar = "1";
                    break;
                case 2:
                    howStar = "2";
                    break;
                case 3:
                    howStar = "3";
                    break;
                case 4:
                    howStar = "4";
                    break;
                case 5:
                    howStar = "5";
                    break;
                case 6:
                    howStar = "6";
                    break;
                case 7:
                    howStar = "7";
                    break;
                case 8:
                    howStar = "8";
                    break;
                case 9:
                    howStar = "9";
                    break;
                case 10:
                    howStar = "10";
                    break;
            }
            InsertRatingIntoDatabase(howStar);  // Method for insert star rating into database
            BindTotalRating();  // Method for retrieving total star from database
        }
        catch (Exception)
        {
           
        }
}

the output of the above code…