AJAX ControlToolkit學習日誌-RatingExtender(22)

來源:互聯網
上載者:User
         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,在瀏覽器中查看效果。

如下:

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.