AJAX ControlToolkit学习日志-RatingExtender(22)
RatingExtender用于对某个事物进行评价时使用,它可以让你自定义等级。
下面看一个示例:
1)在VS2005中新建一个ASP.NET AJAX-Enabled Web Project项目工程,命名为RatingExtender1。
2)在Default.aspx页面上拖放一个UpdatePanel,命名为UpdatePanel1。在UpdatePanel1里面拖放一个RatingExtender,命名为Rating1,用于对电影进行评价。同时在Rating1下面拖放两个DropDownList,一个用于设置对齐方向,另一个用于排列方向。
3)然后再拖放一个Button和Label,用于显示你的评分结果。
代码如下:
属性说明:
CurrentRating:Rating当前的默认等级。
StarCssClass:该控件显示所采用的Css样式。
FilledStarCssClass:该控件点击填充好后所应用的Css样式。
EmptyStarCssClass:当控件中未点击部分,鼠标也未滑过部分所应用的Css样式。
WaitingStarCssClass:控件中未点击部分,当鼠标滑过时所采用的Css样式。
OnChanged:控件等级改变时所要执行的内容。
4)然后添加Rating1_Changed事件内容。
代码如下:
System.Threading.Thread.Sleep(1000);
这句代码的主要作用是延迟一下,让你感觉到它的变化。
5)然后在Page_Load事件中,添加代码,用于响应两个DropDownList控件的回传。
代码如下:
6)最后对按钮Button控件添加事件函数,用于显示你的评分结果。
代码如下:
7)按下CTRL+F5,在浏览器中查看效果。
效果图如下:
下面看一个示例:
1)在VS2005中新建一个ASP.NET AJAX-Enabled Web Project项目工程,命名为RatingExtender1。
2)在Default.aspx页面上拖放一个UpdatePanel,命名为UpdatePanel1。在UpdatePanel1里面拖放一个RatingExtender,命名为Rating1,用于对电影进行评价。同时在Rating1下面拖放两个DropDownList,一个用于设置对齐方向,另一个用于排列方向。
3)然后再拖放一个Button和Label,用于显示你的评分结果。
代码如下:
1
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
2
<ContentTemplate>
3
对这部电影进行评价:<cc1:Rating ID="Rating1" runat="server" CurrentRating="2" StarCssClass="ratingStar" FilledStarCssClass="filledRatingStar" EmptyStarCssClass="emptyRatingStar" WaitingStarCssClass="savedRatingStar" OnChanged="Rating1_Changed">
4
</cc1:Rating>
5
<br />
6
转换对齐方式:<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True">
7
<asp:ListItem>Horizontal</asp:ListItem>
8
<asp:ListItem>Vertical</asp:ListItem>
9
</asp:DropDownList><br />
10
转换移动方向:<asp:DropDownList ID="DropDownList2" runat="server" AutoPostBack="True">
11
<asp:ListItem>Left to Right or Top to Bottom</asp:ListItem>
12
<asp:ListItem>Right to Left or Bottom to Top</asp:ListItem>
13
</asp:DropDownList><br />
14
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" /><br />
15
<asp:Label ID="Label1" runat="server"></asp:Label>
16
</ContentTemplate>
17
</asp:UpdatePanel>
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
2
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
3
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
4
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
5
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
6
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
7
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
8
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
9
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
10
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
11
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
12
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
13
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
14
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
15
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
16
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
17
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
属性说明:
CurrentRating:Rating当前的默认等级。
StarCssClass:该控件显示所采用的Css样式。
FilledStarCssClass:该控件点击填充好后所应用的Css样式。
EmptyStarCssClass:当控件中未点击部分,鼠标也未滑过部分所应用的Css样式。
WaitingStarCssClass:控件中未点击部分,当鼠标滑过时所采用的Css样式。
OnChanged:控件等级改变时所要执行的内容。
4)然后添加Rating1_Changed事件内容。
代码如下:
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
5)然后在Page_Load事件中,添加代码,用于响应两个DropDownList控件的回传。
代码如下:
1
Rating1.RatingAlign = (DropDownList1.SelectedIndex == 1) ? Orientation.Vertical : Orientation.Horizontal;
2
Rating1.RatingDirection = (DropDownList2.SelectedIndex == 1) ? RatingDirection.RightToLeftBottomToTop:RatingDirection.LeftToRightTopToBottom ;
3![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
2
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
3
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
6)最后对按钮Button控件添加事件函数,用于显示你的评分结果。
代码如下:
1
int rate = 0;
2
switch (Rating1.CurrentRating)
3
{
4
case 1:
5
rate = 1;
6
break;
7
case 2:
8
rate=2;
9
break;
10
case 3:
11
rate = 3;
12
break;
13
case 4:
14
rate = 4;
15
break;
16
case 5:
17
rate = 5;
18
break;
19
}
20![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
21
if (rate == 0)
22
{
23
this.Label1.Text = "你未对此影片评价";
24
}
25
else
26
{
27
this.Label1.Text = "你的评分为" + rate;
28
}
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
2
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
3
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
4
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
5
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
6
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
7
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
8
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
9
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
10
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
11
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
12
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
13
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
14
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
15
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
16
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
17
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
18
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
19
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
20
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
21
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
22
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
23
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
24
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
25
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
26
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
27
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
28
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
7)按下CTRL+F5,在浏览器中查看效果。
效果图如下: