Asp.Net Ajax Star Rating Control Complete Tutorial

In this tutorial, we have study asp.net ajax start rating control. To do, first add the below star rating control into your web form.

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

In above control, i 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);}

Now, create 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)
        {
           
        }
    }

Demo