常用属性 | 说明 |
AutoPostBack | 默认为false,如果设置为 True 用户改变 Rating 的状态的时候将触发提交事件 |
CurrentRating | 当前值 (可以设定初始选中的值) |
MaxRating | 最大值(缺省值为5) |
ReadOnly | 只读 |
StarCssClass | 表示“星级”的 Css 样式 |
WaitingStarCssClass | 用户改变星星评级,数据等待上传时显示的 Css 样式 |
FilledStarCssClass | 被“选中”时显示的 Css 样式,即用户评级“填充”的样式 |
EmptyStarCssClass | 当没有被“选中”时显示的 Css 样式,即空星星样式 |
RatingAlign | 布局方向(水平或垂直排列),缺省为水平方向 |
RatingDirection | 评级增长方向,缺省为从左到右方向星级增长 |
OnChanged | 当状态被改变的时候触发的服务器端事件,用于编程 |
具体使用办法:
1、制作以下三种星星的图片文件,从左到右分别名为emptyStar.png, waitingStar.png,filledStar.png
将以上三个图片文件放入适当的目录内,本例放在images目录内
2、编写下面的CSS代码,这是使用Rating控件最重要的部分:
<styletype="text/css">
.RatingStar
{
font-size:0pt;
width:14px;
height:14px;
margin:0px;
padding:0px;
cursor:pointer;
display:block;
background-repeat:no-repeat;
}
.filledRatingStar
{
background-image:url(images/filledStar.png);
}
.emptyRatingStar
{
background-image:url(images/emptyStar.png);
}
.waitingRatingStar
{
background-image:url(images/waitingStar.png);
}
</style>
3、加入Rating控件,注意在Rating前边要加ScriptManager控件,属性设置如下(可以根据你自己的需要灵活设定)
<div>
<asp:ScriptManager ID="ScriptManager1"runat="server" />
进行投票:
<cc1:Rating ID="Rating1" runat="server"EmptyStarCssClass="emptyRatingStar"
FilledStarCssClass="filledRatingStar"StarCssClass="RatingStar"
WaitingStarCssClass="waitin gRatingStar" CurrentRating="2"
>
</cc1:Rating><br/>
<asp:Button ID="Button1" runat="server" Text="提交"onclick="Button1_Click" />
<br />
<asp:Label ID="Label1"runat="server"></asp:Label>
</div>
4、“提交”按钮的代码如下:
protectedvoid Button1_Click(object sender, EventArgs e)
{
Label1.Text = "你的投票为:" + Rating1.CurrentRating.ToString() +"星";
}
运行以上代码,用户选定评定的星级(假如为4级),点击“提交”按钮,结果如下图:
说明:
1、为便于文章说明,本文中的CSS文件是写在.aspx文件内的格式,实际应用时,建议写入单独的CSS文件中,使用link或者import方式在.aspx文件中调入
2、实际应用时将Rating控件的CurrentRating值与相应数据表字段值进行绑定,即可。