The DevExpress ASP.NET Rating Control (ASPxRatingControl) is used to elegantly 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.
The ASPxRatingControl allows you to specify:
-
its value (the Value property);
-
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;
-
titles of items (the Titles property);
-
the manner in which items are filled to represent the control's value if it is a fractional number (the FillPrecision property).
The following fill types are available within the ASPxRatingControl, controlled by the FillPrecision property:
-
Full - An item is fully filled if the decimal part of the control's value is in the 50-99 range;
-
Half - An item is half filled if the decimal part of the control's value is in the 25-74 range;
-
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 ItemMouseOutevents), 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 single vote 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 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 first control's fill type.