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，用于显示你的评分结果。

代码如下：

 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                &nbsp;<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>

属性说明：

      CurrentRating：Rating当前的默认等级。
      StarCssClass：该控件显示所采用的Css样式。
      FilledStarCssClass：该控件点击填充好后所应用的Css样式。
      EmptyStarCssClass：当控件中未点击部分，鼠标也未滑过部分所应用的Css样式。
      WaitingStarCssClass：控件中未点击部分，当鼠标滑过时所采用的Css样式。
      OnChanged：控件等级改变时所要执行的内容。

4)然后添加Rating1_Changed事件内容。

代码如下：

System.Threading.Thread.Sleep(1000);

这句代码的主要作用是延迟一下，让你感觉到它的变化。

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

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
21            if (rate == 0)
22            {
23                this.Label1.Text = "你未对此影片评价";
24            }
25            else
26            {
27                this.Label1.Text = "你的评分为" + rate;
28            }

7)按下CTRL+F5,在浏览器中查看效果。

效果图如下：