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