ASP.Net AJAX Star Rating AutoPostback OnChanged Event

ASP.Net AJAX star rating extender control supports both server side AutoPostback OnChanged event as well as ClientCallBack. In this tutorial we will discuss about the AutoPostback onChanged event of AJAX rating control that allows you to get or set the value of rating control. To create the functionality of assigning the star rating using AJAX rating control set the AutPostback property equal to true that will enable the control to execute the associated server side event i.e. onChanged event. onChanged event fires when user clicks on any item of rating control to give the star rating. As soon as user clicks the rating control it fires the onChanged event and executes the C# code placed at the server side. AutoPostback property value refreshes the page due to server side postback and performs the specified task.

CSS Styles for ASP.Net AJAX Star Rating Control

.star_rating {
    font-size: 0pt;
    width: 13px;
    height: 12px;
    margin: 0px;
    padding: 0px;
    cursor: pointer;
    display: block;
    background-repeat: no-repeat;
}

.star_filled {
    background-image: url(images/FilledStar.png);
}

.star_empty {
    background-image: url(images/EmptyStar.png);
}

.star_saved {
    background-image: url(images/WaitingStar.png);
}

HTML Code for ASP.Net AJAX Star rating with AutoPostback

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

<asp:Label ID="Label2" 
    runat="server" 
    Font-Bold="true" 
    Font-Size="14px" 
    Text="AJAX Star Rating Control using Update Panel Control: ">
</asp:Label>
<div class="clear"><br /></div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <contenttemplate>
        <ajaxToolkit:Rating
            ID="Rating1"
            runat="server"
            StarCssClass="star_rating"
            WaitingStarCssClass="star_saved"
            FilledStarCssClass="star_filled"
            EmptyStarCssClass="star_empty"
            OnChanged="Rating1_Changed"
            AutoPostBack="true"
            Tag="10"
            CurrentRating="2"
            MaxRating="5">
        </ajaxToolkit:Rating>

        <br />

        <asp:Label ID="Label1" 
            runat="server" 
            Font-Size="16px">
        </asp:Label>
    </contenttemplate>
</asp:UpdatePanel>

<div class="clear"><br /></div>
<div class="clear"><br /></div>

<asp:Label ID="Label4" 
    runat="server" 
    Font-Bold="true" 
    Font-Size="14px" 
    Text="AJAX Star Rating Control without using Update Panel Control: ">
</asp:Label>
<div class="clear"><br /></div>
    <ajaxToolkit:Rating
    ID="Rating2"
    runat="server"
    StarCssClass="star_rating"
    WaitingStarCssClass="star_saved"
    FilledStarCssClass="star_filled"
    EmptyStarCssClass="star_empty"
    OnChanged="Rating2_Changed"
    AutoPostBack="true"
    Tag="10"
    CurrentRating="2"
    MaxRating="5">
</ajaxToolkit:Rating>

<br />

<asp:Label ID="Label3" runat="server" Font-Size="16px"></asp:Label>

C# Code for OnChanged Event of AJAX Rating Extender Control

protected void Rating1_Changed(object sender, AjaxControlToolkit.RatingEventArgs e)
{
    Label1.Text = "You have given it <b>" + e.Value + "</b> star(s)";
}

protected void Rating2_Changed(object sender, AjaxControlToolkit.RatingEventArgs e)
{
    Label3.Text = "You have given it <b>" + e.Value + "</b> star(s)";
}

Above C# code will retrieve the current selected value of AJAX rating control by executing the onChanged event and set the specified string to the Label control after page postback.

Below you can download the required images of stars for different stages such as empty (inactive), filled (active) and waiting.

Empty (Inactive stage) star image:

Waiting (waiting stage) star image:

Filled (active stage) star image:

Next learn the AJAX ClientCallBack functionality for Star Rating control that executes the code at client side and retrieves the current selected value of AJAX star rating extender control.