In this topic, you will learn how to handle the Hover and Rated events for the C1Rating control in Source View.

Complete the following steps:

1. Between the first set of <asp:Content> tags, insert the following script:

   To write code in Source View

   <script type="text/javascript">
                               function starHover(e, args){ 
                                       $("#hover").html(args.value);
                        }
                               function starRated(e, args){
                                       $("#rated").html(args.value);
                               }
          </script>
   

2. After the closing </cc1:C1Rating> tag, insert the following markup:

   To write code in Source View

   <div> hover value is:<label id="hover"></label></div>
   <div> rated value is:<label id="rated"></label></div>
   

3. Within the <cc1:C1Rating> tags, after the Value property, set the following two properties:
   • OnClientHover="starHover"
   • OnClientRated="starRated"

   The final script and markup should look like the following :

   To write code in Source View

   <asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
   <script type="text/javascript">
                    function starHover(e, args){
                               $("#hover").html(args.value);
                                  }
                           function starRated(e, args){
                               $("#rated").html(args.value);
                                  }
             </script>
   </asp:Content>
    
   <asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
             <cc1:C1Rating ID="C1Rating1" runat="server"   OnClientHover="starHover" OnClientRated="starRated">
        </cc1:C1Rating>
   <div> hover value is:<label id="hover"></label></div>
   <div> rated value is:<label id="rated"></label></div>
   </asp:Content>
   

4. Press F5 or start debugging to run the program.