ajax控件之Rating

作者在 2008-05-04 18:05:45 发布以下内容
控件名:Rating
用途和效果:一种全新的等级评分效果
属性:
     MaxRating :最高可以给予的等级高低。没有特别指定时,最多可以到5。
    CurrentRating :"评级"控件初始时的等级高低,默认值是3。
    CssClass : 指定评级控件所套用的样式表。
    StarCssClass :为每个可以被选择的等级(一般来说,就是那个星星图标),指定样式表。
    WaitingStarCssClass :为正通过异步方式保存评级数据的等级,指定样式表。
    FilledStarCssClass :为一个已经被选择的等级,指定样式表。
    EmptyStarCssClass :为一个沿未被选择的等级,指定样式表。
    AutoPostBack :当单击"评级"这个控件时,是否回送。默认不回送。
    OnChanged :在完成评级之后,触发"客户端回调"事件以便执行某一段程序代码。

1.托放一个label用来现实评分信息。

2.拖放一个Rating控件,设置属性。

3.其实该控件的主要效果要考css来完成,编写css样式。注意四个css都必须有,否则会出错的。
4.编写后台处理代码。
this.Rating1.CurrentRating.ToString()将返回当前选择的”星“的个数

protected void Rating1_Changed(object sender, AjaxControlToolkit.RatingEventArgs e)  //如果将
AutoPostBack设置成true则这个事件将在选择改变的时候激发
eg:
aspx页面:
<head runat="server">
    <title>无标题页</title>
   
       <style type="text/css">
        .RatingStar
        {
            font-size:0pt;
            ;
            height:12px;
            marging:0px;
            padding:0px;
            cursor:pointer;
            display:block;
            background-repeat:no-repeat;
        }
       
        .filledRatingStar
        {
            background-image:url(img/AJAXEnabledWebSite105/images/FilledStar.png);       
        }
       
        .emptyRatingStar
        {
            background-image:url(img/AJAXEnabledWebSite105/images/EmptyStar.png);       
        }
       
        .savedRatingStar
        {
            background-image:url(img/AJAXEnabledWebSite105/images/SavedStar.png);
        }
    </style>
   
   
</head>
<body style="text-align: center">
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
   
    </div>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label> <br />
                <cc1:rating id="Rating1" runat="server" MaxRating="10" AutoPostBack="True" EmptyStarCssClass="emptyRatingStar" FilledStarCssClass="filledRatingStar" OnChanged="Rating1_Changed" StarCssClass="RatingStar" WaitingStarCssClass="savedRatingStar"></cc1:rating>
                <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />
            </ContentTemplate>
        </asp:UpdatePanel>
    </form>
</body>

cs页面:
  protected void Button1_Click(object sender, EventArgs e)
    {
        this.Label1.Text = "您投了" + this.Rating1.CurrentRating.ToString() + "颗星!";
    }
    protected void Rating1_Changed(object sender, AjaxControlToolkit.RatingEventArgs e)
    {
         this.Label1.Text = "您投了" + this.Rating1.CurrentRating.ToString() + "颗星!";
    }

效果:

 
 
 
————————————————————
技术日志 | 阅读 2315 次
文章评论,共0条
游客请输入验证码