提供直观化的鼠标操作方式，让用户选择他们对某篇文章或恢复所要给予的等级。
属性：
MaxRating ：最高可以给予的等级高低。没有特别指定时，最多可以到5。
CurrentRating ："评级"控件初始时的等级高低，默认值是3。
CssClass : 指定评级控件所套用的样式表。
StarCssClass ：为每个可以被选择的等级(一般来说，就是那个星星图标),指定样式表。
WaitingStarCssClass :为正通过异步方式保存评级数据的等级，指定样式表。
FilledStarCssClass :为一个已经被选择的等级，指定样式表。
EmptyStarCssClass ：为一个沿未被选择的等级，指定样式表。
AutoPostBack ：当单击"评级"这个控件时，是否回送。默认不回送。
OnChanged ：在完成评级之后，触发"客户端回调"事件以便执行某一段程序代码。
代码实例：<html xmlns=" http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Rating 控件的使用</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Always" ChildrenAsTriggers="true">
<ContentTemplate>
<ul>
<li>An example of five-star rating:
<ajaxToolkit:Rating runat="server" ID="Rating1"
MaxRating="5"
CurrentRating="2"
CssClass="ratingStar"
StarCssClass="ratingItem"
WaitingStarCssClass="Saved"
FilledStarCssClass="Filled"
EmptyStarCssClass="Empty" AutoPostBack="True" OnChanged="Rating1_Changed"
>
</ajaxToolkit:Rating>
<asp:Label ID="labelCaption1" runat="server" Text="Selected value: " />
<asp:Label ID="labelValue1" runat="server" Text=""></asp:Label>
</li>
</ul>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
后台代码：
public partial class Rating : System.Web.UI.Page
{
const int RATING1_MIN = 1
const int RATING1_MAX = 5
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
Evaluate_Rating1(Rating1.CurrentRating)
}
}
protected void Rating1_Changed(object sender, AjaxControlToolkit.RatingEventArgs e)
{
Evaluate_Rating1(int.Parse(e.Value))
}
public void Evaluate_Rating1(int value)
{
labelValue1.Text = EvaluateRating(value, Rating1.MaxRating, RATING1_MIN, RATING1_MAX)
}
public static string EvaluateRating(int value, int maximalValue, int minimumRange, int maximumRange)
{
int stepDelta = (minimumRange == 0) ? 1 : 0
double delta = (double)(maximumRange - minimumRange) / (maximalValue - 1)
double result = delta * value - delta * stepDelta
return FormatResult(result)
}
public static string FormatResult(double value)
{
return String.Format("{0:g}", value)
}
}
把下面的图片截出来放到images文件夹下面，复制下面的代码到images同级目录下，直接运行即可！
<!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>
<meta http-equiv="Content-Type" content="text/htmlcharset=gbk" />
<title>无标题文档</title>
<style type="text/css">
body{
margin:0 auto
}
.top1{
width:500px
height:100px
margin:100px auto
border:1px red solid
}
.top1 ul li{
width:22px
height:20px
float:left
list-style:none
cursor:pointer
}
</style>
<script>
function show(num){
//先去掉之前触发选中的星星
for(var i=1i<=5i++){
var temp="s"+i
document.getElementById(temp).src="images/2.jpg"
}
//获取当前选中的星星
for(var i=1i<=numi++){
var temp="s"+i
document.getElementById(temp).src="images/1.jpg"
}
}
function ch(num){
alert("您的评价是："+num+"颗星！请叫我雷锋！")
}
</script>
</head>
<body>
<div class="top1">
<ul>
<li onmouseover="show('1')" onclick ="ch('1')" ><img id="s1" src="images/2.jpg"/></li>
<li onmouseover="show('2')" onclick ="ch('2')" ><img id="s2" src="images/2.jpg"/></li>
<li onmouseover="show('3')" onclick ="ch('3')" ><img id="s3" src="images/2.jpg"/></li>
<li onmouseover="show('4')" onclick ="ch('4')" ><img id="s4" src="images/2.jpg"/></li>
<li onmouseover="show('5')" onclick ="ch('5')" ><img id="s5" src="images/2.jpg"/></li>
</ul>
</div>
</body>
</html>
