Version

Getting Started with WebRating

Before You Begin

The WebRating™ control records average and vote count for the user interacting with the control. The control stores the average rating value and total vote count for the user in the Average and VoteCount properties, respectively.

What You Will Accomplish

You will learn how to set up WebRating to record the user’s ratings.

Follow These Steps

  1. Drag a WebRating control from the Visual Studio Toolbox onto your page.

  2. Set up the WebRating control with the following options.

    1. Set the AutoPostBackFlags . Rated property to Async. With this setting, WebRating will post back to the server every time a rating item is clicked, allowing the control to keep track of the average and vote count of the end user.

    2. Handle the Rated client-side event. In this event handler you will display the user’s vote count and average rating on the page.

In HTML:

<ig:WebRating ID="WebRating1" runat="server" AutoPostBackFlags-Rated="Async" >
   <ClientEvents Rated="WebRating1_RatedEventHandler" />
</ig:WebRating>

  1. Add the following code to the Rated event handler.

In Javascript:

function WebRating1_RatedEventHandler(webRating, args) {
        var scoreLabel = $get("Score");
        var countLabel = $get("VoteCount");
    var average = webRating.get_average();
        var count = webRating.get_voteCount();
        var max = webRating.get_maximumValue();
        scoreLabel.innerHTML = average + " out of " + max;
        countLabel.innerHTML = " " + count;
}

  1. Add 3 span elements to the page to display information to the user. Your page should look like the following.

In HTML:

<style>
       .Label
        {
                font-size:12px;
                font-weight:bold;
        }
</style>
<span class="Label">Your Current Rating:</span>
<br />
<br />
<div>
   <ig:WebRating ID="WebRating1" runat="server" AutoPostBackFlags-Rated="Async" >
               <ClientEvents Rated="WebRating1_RatedEventHandler" />
   </ig:WebRating>
</div>
<br />
<span class="Label">Your Average Score:</span>
<span id="Score"></span>
<br />
<span class="Label"> You Voted:</span>
<span id="VoteCount"></span>

  1. Run the application. The page displays the user’s average rating and vote count when the user clicks on a rating item.

WebRating Getting Started with WebRating 01.png