Voting

The RatingControl extension is used to visualize end-user ratings. It also provides end-users with an intuitive interface to rate content by allowing them to select item images ("stars" by default) that represent the user's rating.

RatingControl allows you to specify the following:

• its value (via the Bind method);
• the number of items (the ItemCount property);
• an image representing an individual item in different states (such as normal, highlighted or selected) by using the ImageMapUrl property, along with the ItemWidth and ItemHeight properties;
• the titles of items (the Titles property);
• the manner in which items are filled to represent the extension's value, if it is a fractional number (the FillPrecision property).

The following fill types are available within the RatingControl extension, controlled by the FillPrecision property:

• Full - An item is fully filled if the decimal part of the extension's value is in the 50-99 range.
• Half - An item is half filled if the decimal part of the extension's value is in the 25-74 range.
• Exact - An item is filled according to the exact decimal part of the extension's value.

On the client side, RatingControl implements a set of client events (the ItemClick, ItemMouseOver and ItemMouseOut events), allowing you to respond when end-users manipulate the extension.

In this demo, the RatingControl extension is used to implement a simple voting system that allows an end-user to submit a vote once, by selecting the desired number of stars (an end-user can resubmit his/her choice by repeating the selection process, and selecting another number of stars).

Technically, this is implemented as follows. The second RatingControl's client ItemClick event is handled to initiate a callback sending the value obtained via the extension's GetValue client method to the server. This value is used on the server to calculate the overall rating value. The calculated value is then sent back to the client and assigned to the first RatingControl using its SetValue client method.

You can also select an item from the drop-down list to specify the fill type of the second extension. Notice how the second extension's items are filled based on the extension's value.