Multi-Use Site Extensions - Rating Control 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.

Version: v2017 vol 1.6
Copyright © 2006-2017 Developer Express Inc
Your Next Great MVC App Starts Here

Get started today and download your 30-day trial of DevExpress MVC Extensions (includes 30 days of free technical support).

All demos ship with full source code and are included in the DevExpress MVC distribution. Refer to the Demos and Sample Applications topic to learn more.

DevExpress MVC Extensions ship as part of DevExpress Universal, DXperience and ASP.NET Subscriptions and are backed by a 60 day unconditional money-back guarantee.
To learn more and obtain pricing information, visit the Compare Features and Pricing webpage. For immediate assistance, contact us by Email at or by phone at +1 (818) 844-3383 between 7:30am and 4:30pm Pacific Time.