The ASPxRatingControl is used to elegantly visualize end-users' ratings. It also provides end-users with an intuitive interface to rate content by allowing them to select the number of item images (by default, stars) that represents their rating.
The ASPxRatingControl allows you to specify:
-
its value (via the Value property),
-
the number of items (the ItemCount property),
-
an image representing an individual item in different states (such as normal, highlighted, selected) by using the ImageMapUrl property, along with the ItemWidth and ItemHeight properties,
-
titles of items (the Titles property),
-
the manner items are filled to represent the control's value, if it is a fractional number (the FillPresicion property).
The following fill types are available within the ASPxRatingControl, controlled by the FillPresicion property:
-
Full - An item is fully filled if the decimal part of the control's value is in the range 50-99.
-
Half - An item is half filled if the decimal part of the control's value is in the range 25-74.
-
Exact - An item is filled according to the exact decimal part of the control's value.
On the client side, the ASPxRatingControl implements a set of client events (the ItemClick, ItemMouseOver and ItemMouseOut), allowing you to respond when end-users manipulate the control.
In this demo, the ASPxRatingControl 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 and clicking the corresponding star (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 rating control's client ItemClick event is handled to initiate a callback sending the value obtained via the control'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 rating control using its SetValue client method.
You can also select an item from the drop-down list to specify the second control's fill type, and research how the second control's items are filled, depending upon the control's value.