Home / AJAX

HOW TO use the Rating Control

RSS
Modified on 2009/12/24 02:56 by Chris Muench Categorized as Uncategorized

Rating Demonstration


Rating Description

The Rating control provides an intuitive rating experience that allows users to select the number of stars that represents their rating. The page designer can specify the initial rating, the maximum rating to allow, the alignment and direction of the stars, and custom styles for the different states a star can have. Rating also supports a ClientCallBack event that allows custom code to run after the user has rated something.

Video - How Do I: Use the ASP.NET AJAX Rating Control?

Rating Client Code Sample

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Untitled Page</title> <style type="text/css"> .rating_star { font-size: 0pt; width: 13px; height: 12px; margin: 0px; padding: 0px; cursor: pointer; display: block; background-repeat: no-repeat; } .rating_filled { background-image: url(Images/FilledStar.png); } .rating_empty { background-image: url(Images/EmptyStar.png); } </style> <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.js" type="text/javascript"></script> <script src="http://ajax.microsoft.com/ajax/beta/0911/Start.debug.js" type="text/javascript"></script> <script src="http://ajax.microsoft.com/ajax/beta/0911/extended/ExtendedControls.debug.js" type="text/javascript"></script> <script type="text/javascript"> function onRated(sender, args) { $get('log').innerHTML += "Rated: " + sender.get_Rating() + "<br/>"; } Sys.require(Sys.components.rating, function() { $("#rate1").rating({ ClientStateFieldID: "state", Rating: 2, id: "rate1", Rated: onRated }); }); </script> </head> <body> <form id="form1" runat="server"> <div> <input type="text" id="state" /> <div id="rate1" style="float: left;"> <a href="#" id="rate1_A" style="text-decoration:none"> <span id="rate1_Star_1" class="rating_star" style="float:left;">&nbsp;</span> <span id="rate1_Star_2" class="rating_star" style="float:left;">&nbsp;</span> <span id="rate1_Star_3" class="rating_star" style="float:left;">&nbsp;</span> <span id="rate1_Star_4" class="rating_star" style="float:left;">&nbsp;</span> <span id="rate1_Star_5" class="rating_star" style="float:left;">&nbsp;</span> </a> </div> <input type="button" onclick="Sys.get('$rate1').set_Rating(5)" value="Thumbs up" /> <div id="log"></div> </div> </form> </body> </html>

Rating Client Properties

Rating Server Code Sample

<%@ Page Language="C#" %>
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <script runat="server">

protected void btnSubmit_Click(object sender, EventArgs e) { lblCurrentRating.Text = Rating1.CurrentRating.ToString(); } </script> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Rating Server</title>

<style type="text/css"> .rating_star { font-size: 0pt; width: 13px; height: 12px; margin: 0px; padding: 0px; cursor: pointer; display: block; background-repeat: no-repeat; } .rating_filled { background-image: url(Images/FilledStar.png); } .rating_empty { background-image: url(Images/EmptyStar.png); } </style>

</head> <body> <form id="form1" runat="server"> <div> <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"> </asp:ToolkitScriptManager> <asp:Rating ID="Rating1" CurrentRating="2" MaxRating="5" StarCssClass="rating_star" FilledStarCssClass="rating_filled" EmptyStarCssClass="rating_empty" WaitingStarCssClass="rating_empty" runat="server" > </asp:Rating> <asp:Button ID="btnSubmit" Text="Submit Rating" runat="server" onclick="btnSubmit_Click" /> <br /><br /> Current Rating: <asp:Label ID="lblCurrentRating" runat="server" /> </div> </form> </body> </html>


Rating Server Properties

The properties in italics are optional.

<ajaxToolkit:Rating ID="ThaiRating" runat="server"
    CurrentRating="2"
    MaxRating="5"
    StarCssClass="ratingStar"
    WaitingStarCssClass="savedRatingStar"
    FilledStarCssClass="filledRatingStar"
    EmptyStarCssClass="emptyRatingStar"
    OnChanged="ThaiRating_Changed" />
  • AutoPostBack - True to cause a postback on rating item click.
  • CurrentRating - Initial rating value
  • MaxRating - Maximum rating value
  • ReadOnly - Whether or not the rating can be changed
  • StarCssClass - CSS class for a visible star
  • WaitingStarCssClass - CSS class for a star in waiting mode
  • FilledStarCssClass - CSS class for star in filled mode
  • EmptyStarCssClass - CSS class for a star in empty mode
  • RatingAlign - Alignment of the stars (Vertical or Horizontal)
  • RatingDirection - Orientation of the stars (LeftToRightTopToBottom or RightToLeftBottomToTop)
  • OnChanged - ClientCallBack event to fire when the rating is changed
  • Tag - A custom parameter to pass to the ClientCallBack

Rating Additional Code Samples

  Name Size
- EmptyStar.png 262 B
- FilledStar.png 327 B