AjaxToolKit之Rating控件的使用方法
AjaxToolKit中的Rating控件是微软Ajax控件库中专门用来处理网页评分（或投票）功能的控件，它本身支持网页无刷新功能，在使用的时候完全没有必要将它放在UpdatePanel控件里，而只需要将它的AutoPostBack属性设为False即可。该控件使用起来非常简单，而且还可以设置各种不同的效果，以及自定义函数回调等。下面是使用时候的一个截图
先说一下常用属性的功能：
ID：这个自然不用说了，大家都明白，所有的控件都会有一个服务器端的ID。
BehaviorID：通过Ajax客户端获取控件对象时所要使用的ID，这个在设置回调函数时通过$Find方法进行查找。
MaxRating：控件当前最大值。该值在UI上直接反映了“星形”图标的个数。
CurrentRating：当前值，即控件当前所显示的值。该值在UI上直接反映了被点亮的“星形”图标的数量。注意该值的范围在0-MaxRating之间（包括0和MaxRating）。
runat：注册控件为服务器端行为，必须设置该值。
StarCssClass：“星形”图标的样式。必须指定。
WaitingStarCssClass：当处理客户端响应时，控件与服务器进行交互期间处于等待状态时“星形”图标的样式。必须指定。
FilledStarCssClass：当“星形”图标被点亮时的样式。必须指定。
EmptyStarCssClass：当“星形”图标未被点亮时的样式。必须指定。
CssClass：Rating控件的整体样式。需要时指定。
OnChanged：用于处理用户点击“星形”图标后的响应事件。该事件在服务器端处理。
AutoPostBack：设置控件是否自动回传。一般情况下设置该值为False。
ReadOnly：控件的只读状态，处于只读状态下的Rating不能被用户点击，可以为只读状态的Rating设置单独的样式。
下面来看看如何使用。
准备工作：
1. 确保工程中正确引用了AjaxControlToolkit.dll程序集。该程序集在Visual Studio2005中为beta版本，需要自己去微软的官方网站下载安装包，Visual Studio2008中已经随IDE自动安装了，可以直接使用。
2. 在Visual Studio2008中，该控件没有被自动添加到工具箱中，需要手动添加到工具箱，然后拖放到页面上。你可以在Visual Studio中打开工具箱浮动面板，选择一个空白的Tab（如General Tab），点击右键，选择“选择项…”，在弹出的对话框中找到AjaxControlToolkit程序集中相应的控件，如下图。
3. 注意，如果你在上述对话框中没有找到有关AjaxControlToolkit的控件，则需要自己指定AjaxControlToolkit.dll程序集的路径。读者如果没有找到该文件的话这里方便给大家提供一个下载。
AjaxControlToolkit.dll
4. 添加好控件后，在工具箱中就可以像标准的ASP.NET控件一样使用Rating控件了。
准备工作做好之后，在工程中新建一个Web页面，将控件放到页面上，注意所有的Ajax控件都需要ScriptManager控件的支持，该控件负责在客户端注册必要的脚本。所以在添加Rating控件之前，先确保页面上有且仅有一个ScriptManager控件。下面是aspx文件的代码示例。
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="iFrameUpload.WebForm1" %>
<%@ Register Assembly="AjaxControlToolkit, Version=3.0.20820.0, Culture=neutral, PublicKeyToken=28f01b0e84b6d53e"
Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<!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>Untitled Page</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<ajaxToolkit:Rating ID="RatingRate" BehaviorID="RatingRate1" MaxRating="5" CurrentRating="3"
runat="server" StarCssClass="ratingStar" WaitingStarCssClass="waitingRatingStar"
FilledStarCssClass="filledRatingStar" EmptyStarCssClass="emptyRatingStar"
OnChanged="RatingRate_Changed" AutoPostBack="false">
</ajaxToolkit:Rating>
<script type="text/javascript">
Sys.Application.add_load(
function() {
$find("RatingRate1").add_EndClientCallback(
function(sender, e) {
var result = e.get_CallbackResult();
alert(result);
}
);
}
);
</script>
</div>
</form>
</body>
</html>
Rating控件的相关属性和事件都已经添加了，这里说一下脚本的含义。通过Sys.Application.add_load方法在页面全部加载完成后给Rating控件注册一个回调方法，通过$find(“RatingRate1”).add_EndClientCallback方法进行注册，用于接收服务端传递回来的值。这些脚本都是标准的Ajax框架提供的，这里就不做太多解释了，读者可以去查阅微软的MSDN，上面有很详细的介绍。
接下来是cs文件的代码。
protected void RatingRate_Changed(object sender, AjaxControlToolkit.RatingEventArgs e)
{
System.Threading.Thread.Sleep(300);
//TODO: Save e.Value to database.
e.CallbackResult = "success";
}
很简单，首先让线程停止300ms，这样我们可以有时间看到处于等待状态的Rating控件的样式。然后可以去处理数据保存（例如将Rating的当前值保存到数据库等），注意用户所选的值是通过e.Value属性得到的，该属性为字符串类型。然后通过e.CallbackResult属性传递一个回调值到客户端，客户端得到该值后进行相应的处理。
下面顺便给出css样式和示例图片下载，读者可以自己去尝试一下！注意Rating的当前值是不能被用户点击的，如初始化时Rating的CurrentRating值为3，则用户点击第三个“星形”图标则不会触发点击事件，另外就是Rating可以被用户反复点击，你可以在服务端进行处理，如当用户点击之后将控件设为只读状态等。
.ratingStar
{
font-size: 0pt;
width: 13px;
height: 12px;
margin: 0px;
padding: 0px;
cursor: pointer;
display: block;
background-repeat: no-repeat;
}
.waitingRatingStar /*normal mode empty style*/
{
background-image: url(Rating_default.gif);
}
.filledRatingStar /*normal mode filled style*/
{
background-image: url(Rating_normal.gif);
}
.emptyRatingStar /*readonly mode empty style*/
{
background-image: url(Rating_empty.gif);
}
以下是运行时的效果：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
ajaxToolkit:CalendarExtender演示与实现代码
Ajax的CalenderExtender的日期选择,下面可看到效果: Insus.NET使用ajaxToolkit:CalendarExtender,来实现日期选择功能.TextBox可以让用户输入,也可以点右边的小图,出现ajaxToolkit:CalendarExtender日期选择器. 可参考下面程序码: 复制代码 代码如下: <asp:TextBox ID="txtBookingDate" runat="server" CssClass="
-
jquery插件star-rating.js实现星级评分特效
特效介绍 jquery星级评分插件star-rating.js下载插件,点击星星或者心的左边,就是半分,右边就是1分.点击减号,分数置为0.不兼容IE8以下的浏览器. 演示图 使用方法 第一步.引入下面的代码: 复制代码 代码如下: <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet"> <script s
-
Android App中使用RatingBar实现星级打分功能的教程
RatingBar简单介绍 RatingBar是基于SeekBar(拖动条)和ProgressBar(状态条)的扩展,用星形来显示等级评定,在使用默认RatingBar时,用户可以通过触摸/拖动/按键(比如遥控器)来设置评分, RatingBar自带有两种模式 ,一个小风格 ratingBarStyleSmall,大风格为ratingBarStyleIndicator,大的只适合做指示,不适用与用户交互. 自定义RatingBar需要注意的地方 一般情况下,系统自带的RatingBar是远远无法
-
asp.net AjaxControlToolKit--TabContainer控件的介绍
AjaxControlToolKit--TabContainer控件的介绍收藏 1. Introduction: Tab本身就应该是个以页签形式显示组织网页内容的一个控件.在AJAX Control Tool Kit的控件中有TabContainer控件,它是一些TabPanel控件的载体,而每个TabPanel可以像标准的Panel控件一样,成为其它一些ASP.NET控件的容器.TabPanel通过它的三部分结构HeaderText, HeaderTemplate和ContentTempla
-
AjaxControlToolKit CalendarExtender(日历扩展控件)的使用方法
例子:只需要设置CalendarExtender的TargetControlID为需要显示日期的TextBox的ID即可以,textBox控件的readOnly属性设置为 false 主要代码: 复制代码 代码如下: <asp:ScriptManager ID="ScriptManager1" runat="server" EnableScriptGlobalization="True" EnableScriptLocalization=&
-
jQuery插件-jRating评分插件源码分析及使用方法
该插件被广泛应用于各种需要评分的页面当中,今天作为学习,把源码拿出来分析一下,顺便学习其使用方法. 一.插件使用一览. 复制代码 代码如下: <div> <div>第一个例子</div> <div id="16_1" class="myRating"></div> </div> 复制代码 代码如下: <link href="Script/jRating/jRating.jquer
-
ajaxToolkit:ModalPopupExtender演示及实现代码
ajaxToolkit:ModalPopupExtender可以让用户模拟新开一个窗口,以下演示,就是在模拟新开窗口作多项选项的功能. 演示例子中,是Repeater结合CheckBox进行多选,此功能实现,可以参考:http://www.jb51.net/article/33558.htm 选择的小图片,它将要被ajaxToolkit:ModalPopupExtender使用,因为需要设为服务控件,添加runat="server": 复制代码 代码如下: <img id=&q
-
ajaxToolkit:AccordionPane演示与应用实例
一个展开收合的ajaxToolkit:AccordionPane控件.Insus.NET在专案有用到它. 因为它可以节省显示空间.不过有点不足,就是用户刚开始使用,需要记得每个AccordionPane内容.或是需要使用一个显而可见的名字.下面的演示中,只是两个收合AccordionPane,如果多个的话,就会有上面提及的问题. 下面是HTML:ajaxToolkit:Accordion 复制代码 代码如下: <ajaxToolkit:Accordion ID="Accordion1&qu
-
Android控件之RatingBar自定义星级评分样式
一.RatingBar简单介绍 RatingBar是基于SeekBar(拖动条)和ProgressBar(状态条)的扩展,用星形来显示等级评定,在使用默认RatingBar时,用户可以通过触摸/拖动/按键(比如遥控器)来设置评分, RatingBar自带有两种模式 ,一个小风格 ratingBarStyleSmall,大风格为ratingBarStyleIndicator,大的只适合做指示,不适用与用户交互. 效果图展示: 二.实例 1.布局文件 <?xml version="1.0&qu
-
ajaxToolkit:TextBoxWatermarkExtender演示与实现代码
首先看看效果: 该控件的效果就是在TextBox控件上添加"水印"效果,也就是当TextBox为空时,显示提示消息,一旦TextBox聚焦,样式就消失. Insus.NET实现两行文字水印,其实也没有什么技术含量,即是加了几个空格而已. 复制代码 代码如下: <asp:TextBox ID="txtCCEmail" runat="server" TextMode="MultiLine" Height="50&