您好,欢迎访问一九零五行业门户网

AjaxToolKit怎么使用Rating控件

这次给大家带来ajaxtoolkit怎么使用rating控件,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">   <p>   <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>   </p>   </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);  }
以下是运行时的效果:
相信看了本文案例你已经掌握了方法,更多精彩请关注其它相关文章!
推荐阅读:
$.ajax()方法的参数如何使用
ajax怎么对xml文件进行增删改查
以上就是ajaxtoolkit怎么使用rating控件的详细内容。
其它类似信息

推荐信息