Atlas(AJAX)控件:Rating等级评分入门实例

先介绍Rating的基本属性:

  • AutoPostBack - True to cause a postback on rating item click.
  • CurrentRating - Initial rating value
  • MaxRating - Maximum rating value
  • ReadOnly - Whether or not the rating can be changed
  • StarCssClass - CSS class for a visible star
  • WaitingStarCssClass - CSS class for a star in waiting mode
  • FilledStarCssClass - CSS class for star in filled mode
  • EmptyStarCssClass - CSS class for a star in empty mode
  • RatingAlign - Alignment of the stars (Vertical or Horizontal)
  • RatingDirection - Orientation of the stars (LeftToRightTopToBottom or RightToLeftBottomToTop)
  • OnChanged - ClientCallBack event to fire when the rating is changed
  • Tag - A custom parameter to pass to the ClientCallBack

前台代码:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Rating.aspx.cs" Inherits="Rating" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Atlas控件之Rating等级入门实例</title>
        <style type="text/css">
/* Rating */
.ratingStar {
    font-size: 0pt;
    width: 13px;
    height: 12px;
    margin: 0px;
    padding: 0px;
    cursor: pointer;
    display: block;
    background-repeat: no-repeat;
}

.filledRatingStar {
    background-image: url(images/FilledStar.png);

}

.emptyRatingStar {
    background-image: url(images/EmptyStar.png);
}

.savedRatingStar {
    background-image: url(images/SavedStar.png);
}
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div>      
            <asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>
            &nbsp;
            <div id="DIV1" runat="server">
                &nbsp;
                <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                    <ContentTemplate>
                        <div style="float: left">
                            <cc1:Rating ID="Rating1" runat="server" Direction="LeftToRight" EmptyStarCssClass="emptyRatingStar"
                                FilledStarCssClass="filledRatingStar" Height="24px" HorizontalAlign="Left" OnChanged="Rating1_Changed"
                                StarCssClass="ratingStar" Style="float: left" WaitingStarCssClass="savedRatingStar"
                                Width="87px">
                            </cc1:Rating>
                        </div>
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <table>
                            <tr>
                                <td style="width: 3px; height: 24px">
                                    Alignment</td>
                                <td style="height: 24px; width: 97px;">
                                    <asp:DropDownList ID="DropAlign" runat="server" AutoPostBack="True" Width="93px">
                                        <asp:ListItem>Horizontal</asp:ListItem>
                                        <asp:ListItem>Vertical</asp:ListItem>
                                    </asp:DropDownList></td>
                            </tr>
                            <tr>
                                <td style="width: 3px; height: 24px">
                                    Direction</td>
                                <td style="height: 24px; width: 97px;">
                                    <asp:DropDownList ID="DropDeretion" runat="server" AutoPostBack="True" Width="94px">
                                        <asp:ListItem>Left to Right or Top to Bottom </asp:ListItem>
                                        <asp:ListItem>Right to Left or Bottom to Top</asp:ListItem>
                                    </asp:DropDownList></td>
                            </tr>
                        </table>
                    </ContentTemplate>
                </asp:UpdatePanel>
            </div>
    </div>

   
    </form>
</body>
</html>

后台代码:

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Threading;

public partial class Rating : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected override void OnLoad(EventArgs e)
    {
        base.OnLoad(e);
        this.Rating1.RatingAlign = (DropAlign.SelectedIndex == 0 ? Orientation.Horizontal : Orientation.Vertical);
        this.Rating1.RatingDirection = (DropDeretion.SelectedIndex == 0 ? AjaxControlToolkit.RatingDirection.LeftToRightTopToBottom : AjaxControlToolkit.RatingDirection.RightToLeftBottomToTop);

    }
    protected void Rating1_Changed(object sender, AjaxControlToolkit.RatingEventArgs e)
    {
        Thread.Sleep(400);
    }
}
还有三张星星的图片:


已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页