RatingExtender用于对某个事物进行评价时使用,它可以让你自定义等级。

下面看一个示例:

1)在VS2005中新建一个ASP.NET AJAX-Enabled Web Project项目工程,命名为RatingExtender1。

2)在Default.aspx页面上拖放一个UpdatePanel,命名为UpdatePanel1。在UpdatePanel1里面拖放一个RatingExtender,命名为Rating1,用于对电影进行评价。同时在Rating1下面拖放两个DropDownList,一个用于设置对齐方向,另一个用于排列方向。

3)然后再拖放一个Button和Label,用于显示你的评分结果。

代码如下:

 1AJAX ControlToolkit学习日志-RatingExtender(22)        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
 2AJAX ControlToolkit学习日志-RatingExtender(22)            <ContentTemplate>
 3AJAX ControlToolkit学习日志-RatingExtender(22)        对这部电影进行评价:<cc1:Rating ID="Rating1" runat="server" CurrentRating="2" StarCssClass="ratingStar" FilledStarCssClass="filledRatingStar" EmptyStarCssClass="emptyRatingStar" WaitingStarCssClass="savedRatingStar" OnChanged="Rating1_Changed">
 4AJAX ControlToolkit学习日志-RatingExtender(22)        </cc1:Rating>
 5AJAX ControlToolkit学习日志-RatingExtender(22)                <br />
 6AJAX ControlToolkit学习日志-RatingExtender(22)        转换对齐方式:<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True">
 7AJAX ControlToolkit学习日志-RatingExtender(22)            <asp:ListItem>Horizontal</asp:ListItem>
 8AJAX ControlToolkit学习日志-RatingExtender(22)            <asp:ListItem>Vertical</asp:ListItem>
 9AJAX ControlToolkit学习日志-RatingExtender(22)        </asp:DropDownList><br />
10AJAX ControlToolkit学习日志-RatingExtender(22)        转换移动方向:<asp:DropDownList ID="DropDownList2" runat="server" AutoPostBack="True">
11AJAX ControlToolkit学习日志-RatingExtender(22)            <asp:ListItem>Left to Right or Top to Bottom</asp:ListItem>
12AJAX ControlToolkit学习日志-RatingExtender(22)            <asp:ListItem>Right to Left or Bottom to Top</asp:ListItem>
13AJAX ControlToolkit学习日志-RatingExtender(22)        </asp:DropDownList><br />
14AJAX ControlToolkit学习日志-RatingExtender(22)                &nbsp;<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" /><br />
15AJAX ControlToolkit学习日志-RatingExtender(22)                <asp:Label ID="Label1" runat="server"></asp:Label>
16AJAX ControlToolkit学习日志-RatingExtender(22)            </ContentTemplate>
17AJAX ControlToolkit学习日志-RatingExtender(22)        </asp:UpdatePanel>

属性说明:

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

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

代码如下:
AJAX ControlToolkit学习日志-RatingExtender(22)System.Threading.Thread.Sleep(1000);
这句代码的主要作用是延迟一下,让你感觉到它的变化。

5)然后在Page_Load事件中,添加代码,用于响应两个DropDownList控件的回传。

代码如下:
1AJAX ControlToolkit学习日志-RatingExtender(22)            Rating1.RatingAlign = (DropDownList1.SelectedIndex == 1? Orientation.Vertical : Orientation.Horizontal;
2AJAX ControlToolkit学习日志-RatingExtender(22)            Rating1.RatingDirection = (DropDownList2.SelectedIndex == 1? RatingDirection.RightToLeftBottomToTop:RatingDirection.LeftToRightTopToBottom  ;
3AJAX ControlToolkit学习日志-RatingExtender(22)

6)最后对按钮Button控件添加事件函数,用于显示你的评分结果。

代码如下:

 1AJAX ControlToolkit学习日志-RatingExtender(22)            int rate = 0;
 2AJAX ControlToolkit学习日志-RatingExtender(22)            switch (Rating1.CurrentRating)
 3            }

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

效果图如下:
AJAX ControlToolkit学习日志-RatingExtender(22)

相关文章:

  • 2021-07-30
  • 2021-05-18
  • 2021-10-30
  • 2021-12-30
  • 2021-10-30
  • 2022-02-20
  • 2021-12-09
  • 2021-10-10
猜你喜欢
  • 2021-06-22
  • 2021-08-20
  • 2021-10-30
  • 2022-01-04
  • 2021-12-04
  • 2022-03-06
  • 2021-09-20
相关资源
相似解决方案