下面看一个示例:
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>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
属性说明:
CurrentRating:Rating当前的默认等级。
StarCssClass:该控件显示所采用的Css样式。
FilledStarCssClass:该控件点击填充好后所应用的Css样式。
EmptyStarCssClass:当控件中未点击部分,鼠标也未滑过部分所应用的Css样式。
WaitingStarCssClass:控件中未点击部分,当鼠标滑过时所采用的Css样式。
OnChanged:控件等级改变时所要执行的内容。
4)然后添加Rating1_Changed事件内容。
代码如下:
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
2
3
6)最后对按钮Button控件添加事件函数,用于显示你的评分结果。
代码如下:
1
int rate = 0;
2
switch (Rating1.CurrentRating)
3
}
2
3
7)按下CTRL+F5,在浏览器中查看效果。
效果图如下: