Rating Control Ajax - Display Message on Rating

One Famous Problem with Rating Control is How to Display Message after Rating is done, without making use of button click.

Following Images Explain How can we display label text on Rating Control Click, without explicitly clicking any button control.

Before Rating Control is Clicked


During Rating Control is Clicked


After Rating Control is Clicked


Now, lets understand how to display message on click of Star Image.

Step1: Declare CSS Styles in Style Sheet file Also Add Images to Image Folder

.ratingStar {
font-size: 0pt;
width: 31px;
height: 30px;
margin: 0px;
padding: 0px;
cursor: pointer;
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);
}

Step2: Declare ScriptManager in .aspx file with EnablePartialRendering=true

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

Step3: Declare UpdatePannel

<asp:UpdatePanel ID="UpdatePanel1" runat="server">        
<ContentTemplate>
<!-- Declare Rating Control Here -->
</ContentTemplate>        
</asp:UpdatePanel>   

Step4: Add Rating Control and Label in UpdatePannel

<asp:UpdatePanel ID="UpdatePanel1" runat="server">        
<ContentTemplate>
<!-- Rating Control -->
<cc1:Rating ID="Rating1" runat="server"
 BehaviorID="RatingBhvrId1"
 CurrentRating="3"
 MaxRating="5"
 StarCssClass="ratingStar"
 WaitingStarCssClass="savedRatingStar"
 FilledStarCssClass="filledRatingStar"
 EmptyStarCssClass="emptyRatingStar"
 OnChanged="Rating1_Changed"
 ToolTip="Please Rate!"                             
 style="float:left;">
</cc1:Rating>

<!-- Label to Display Message -->
<span id="lblResponse" class="heading"></span>                  
</ContentTemplate>        
</asp:UpdatePanel>   

Step5: Declare Necessary Javascript to show "Message" after user performs Rating with the help of e.CallbackResult

<script language="javascript" type="text/javascript">                                                                 
Sys.Application.add_load(function()
{
      $find("RatingBhvrId1").add_EndClientCallback(function(sender, e)
      {
         var lblCtrl = document.getElementById('lblResponse');
         lblCtrl.innerHTML = e.get_CallbackResult();            
     });
});
</script>

Step6: Declaring Rating1_Changed Event

protected void Rating1_Changed(object sender, AjaxControlToolkit.RatingEventArgs e)
{
          System.Threading.Thread.Sleep(500);
          int iRate = Convert.ToInt16(e.Value);
          string strMessage = string.Empty;
          switch (iRate)
          {
              case 1:
                  strMessage = "Not Useful";
                  break;
              case 2:
                  strMessage = "Average";
                  break;
              case 3:
                  strMessage = "Useful";
                  break;
              case 4:
                  strMessage = "Informative";
                  break;
              case 5:
                  strMessage = "Excellent";
                  break;
          }
      strMessage = "Thanks for Rating, You found this Question " + strMessage;
      e.CallbackResult = strMessage;
}

Summary View of .aspx Page

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

<asp:UpdatePanel ID="UpdatePanel1" runat="server">           
<ContentTemplate>
   <cc1:Rating ID="Rating1" runat="server"
       BehaviorID="RatingBhvrId1"
       CurrentRating="3"
       MaxRating="5"
       StarCssClass="ratingStar"
       WaitingStarCssClass="savedRatingStar"
       FilledStarCssClass="filledRatingStar"
       EmptyStarCssClass="emptyRatingStar"
       OnChanged="Rating1_Changed"
       ToolTip="Please Rate!"                                
       style="float:left;">
   </cc1:Rating>
    <br />     
   <span id="lblResponse" class="heading"></span>                     
   <script language="javascript" type="text/javascript">                                                                    
           Sys.Application.add_load(function()
           {                                       
               $find("RatingBhvrId1").add_EndClientCallback(function(sender, e)
               {
                   var lblCtrl = document.getElementById('lblResponse');
                   lblCtrl.innerHTML = e.get_CallbackResult();               
               });
            });
    </script>
   </ContentTemplate>           
</asp:UpdatePanel>