Rating control: How to run code in client side after the user has rated

The Rating control provides an intuitive rating experience that allows users to select the number of stars that represents their rating. The page designer can specify the initial rating, the maximum rating to allow, the alignment and direction of the stars, and custom styles for the different states a star can have. Rating also supports a ClientCallBack event that allows custom code to run after the user has rated something.
Source:
http://www.asp.net/web-forms/tutorials/ajax-control-toolkit/rating/creating-a-rating-control-cs

 
First, set the ScriptManager.LoadScriptsBeforeUI=”true”

<asp:ScriptManager ID="ScriptManager1" runat="server" LoadScriptsBeforeUI="true">
</asp:ScriptManager>

Then, place the control onto your page.

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit"
    TagPrefix="ajaxToolkit" %>

<ajaxToolkit:Rating ID="ratingProduct" runat="server"
    CurrentRating="0"
    MaxRating="5"
    StarCssClass="ratingStar"
    WaitingStarCssClass="savedRatingStar"
    FilledStarCssClass="filledRatingStar"
    EmptyStarCssClass="emptyRatingStar"
        OnChanged="ratingProduct_Changed" /> 

CSS stylesheet

<style type="text/css">
.ratingStar {
    font-size: 0pt;
    width: 13px;
    height: 12px;
    margin: 2px;
    padding: 2px;
    display: block;
    background-repeat: no-repeat;
}

.filledRatingStar {
    background-image: url('/Images/FilledStar.png');

}

.emptyRatingStar {
    background-image: url('/Images/EmptyStar.png');
}

.savedRatingStar {
    background-image: url('/Images/SavedStar.png');
}
</style>

I like to register the JavaScript snippet in the Page_Load but you don’t have to.

protected void Page_Load(object sender, EventArgs e)
{
    string script = @"
            
        function AddNewRatingHandler() {

            AjaxControlToolkit.RatingBehavior.prototype._onStarClick =
            function (e) {
                if (this._readOnly) {
                    return;
                }
                this.set_Rating(this._currentRating);

                //Do something
            };

            AjaxControlToolkit.RatingBehavior.prototype.set_Rating =
            function (value) {
                this._ratingValue = value;
                this._currentRating = value;
                if (this.get_isInitialized()) {
                    if ((value < 0) || (value > this._maxRatingValue)) {
                        return;
                    }

                    this._update();

                    AjaxControlToolkit.RatingBehavior.callBaseMethod(this, 'set_ClientState', [this._ratingValue]);
                    this.raisePropertyChanged('Rating');
                    this.raiseRated(this._currentRating);
                    this._waitingMode(true);

                    var args = this._currentRating + ';' + this._tag;
                    var id = this._callbackID;

                    if (this._autoPostBack) {
                        __doPostBack(id, args);
                    }
                    else {
                        WebForm_DoCallback(id, args, this._receiveServerData, this, this._onError, true)
                    }
                }
            };
        };

        AddNewRatingHandler();";

    ScriptManager.RegisterStartupScript(this, typeof(Page), "rating", script, true);

}

protected void ratingProduct_Changed(object sender, AjaxControlToolkit.RatingEventArgs e)
{
    int rating;
    if (int.TryParse(e.Value, out rating))
    {
        //Do something
    }
}

 

Advertisements

2 thoughts on “Rating control: How to run code in client side after the user has rated

  1. Hi,
    I tried this code but I’m getting an error saying
    ReferenceError: AjaxControlToolkit is not defined AjaxControlToolkit.RatingBehavior.prototype._onStarClick =

    Any ideas why is this happening

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s