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,在瀏覽器中查看效果。

如下：