ASP.Net AJAX Star Rating Extender Control

ASP.Net AJAX star rating extender control provides the functionality to rate the items such as pictures, articles or stories published on ASP.Net web pages. AJAX star rating control is very commonly used on community based ASP.Net web sites that allow the users to express their interest and satisfaction towards the associated item in terms of number of stars he/she gives to it using rating control. You can customize the look and feel of ASP.Net AJAX rating extender control using CSS styles. You can also adjust the behavior and display type of AJAX rating control using its different types of properties such as RatingAlign, RatingDirection, CurrentRating, Direction, HorizontalAlign etc. CSS styles based properties of AJAX star rating extender control allows you to set the CSS class styles to customize the different states of rating control e.g.: filled, saved and empty.

ASP.Net AJAX Star Rating Control Properties

CurrentRating: this property allows setting the default rating value.

MaxRating: Maximum value for rating that user can set using AJAX rating extender control. Default is 5

AutoPostBack: to allow the web page postback when user clicks the rating item.

ReadOnly: to enable or disable the rating control. If true then user can rate the items else not.

RatingAlign: this property supports two types of values: Horizontal, Vertical. By default it works with Horizontal alignment. This property changes the orientation of rating control whether to display the rating items vertically or horizontally.

RatingDirection: this property also supports two types of values: LeftToRightTopToBottom and RightToLeftBottomToTop. Rating direction property changes the way, how a user can set the value for rating. LeftToRightTopToBottom value for this property allows the user to select the rating value from left to right direction if RatingAlign="Horizontal" and top to bottom if RatingAlign="Vertical". RightToLeftBottomToTop value works similarly.

StarCssClass: Allows setting the common styles for different states of rating control items.

WaitingStarCssClass: Allows setting the style for rating control item while it is saving the selected value.

FilledStarCssClass: sets the style for active star items of rating control.

EmptyStarCssClass: sets the style for inactive stars of rating control.

OnChanged: calls the ClientCallBack event when the rating is changed by the user.

Tag: Optional. Passes the custom parameter to the ClientCallBack event

Sample HTML Code for ASP.Net AJAX Rating Control

<ajaxToolkit:Rating
    ID="Rating1"
    runat="server"
    StarCssClass="star_rating"
    WaitingStarCssClass="star_saved"
    FilledStarCssClass="star_filled"
    EmptyStarCssClass="star_empty"
    OnChanged="Rating1_Changed"
    AutoPostBack="true"
    Tag="10"
    CurrentRating="2"
    MaxRating="5">
</ajaxToolkit:Rating>

Continue to next tutorial: ASP.Net AJAX Star Rating AutoPostback OnChanged Event to learn the AutoPostBack event functionality of AJAX rating control.