当前位置: 首页 > news >正文

AjaxToolKit之Rating控件的使用(http://www.soaspx.com/dotnet/ajax/ajaxtech/ajaxtech_20091021_1219.html)...

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) ; }

     以下是运行时的效果。

 

转载于:https://www.cnblogs.com/zhangwei595806165/archive/2012/05/15/2502105.html

相关文章:

  • 运行java web项目时报错:Several ports (8005, 8080, 8009) required
  • 备忘,查询信号质量的AT
  • Json学习整理
  • 将hdfs 上的文件通过shell脚本 导入到hive上面
  • 浅谈双绞线在视频监控系统中的实际应用
  • [linux] C语言Linux系统编程进程基本概念
  • Solr部署到tomcat,通过war包
  • FreeTextBox使用详解
  • 《Unity3D 实战核心技术详解》书中关于矩阵的错误
  • CSS3无图片实现华丽折页菜单效果(多浏览器兼容)
  • Intellij IDEA 2017.3 基于编辑器的REST客户端介绍
  • 让集成的Intel82845g支持1440x900
  • ubuntu 下面手动创建引用程序启动项(转)
  • [LeetCode] Copy List with Random Pointer 拷贝带有随机指针的链表
  • UIM卡 PIN 码特点
  • [Vue CLI 3] 配置解析之 css.extract
  • 【跃迁之路】【641天】程序员高效学习方法论探索系列(实验阶段398-2018.11.14)...
  • classpath对获取配置文件的影响
  • JavaWeb(学习笔记二)
  • JS题目及答案整理
  • JS字符串转数字方法总结
  • Less 日常用法
  • Phpstorm怎样批量删除空行?
  • vuex 笔记整理
  • 两列自适应布局方案整理
  • 浏览器缓存机制分析
  • 面试总结JavaScript篇
  • 前端性能优化--懒加载和预加载
  • 少走弯路,给Java 1~5 年程序员的建议
  • 使用 Node.js 的 nodemailer 模块发送邮件(支持 QQ、163 等、支持附件)
  • 使用docker-compose进行多节点部署
  • 新手搭建网站的主要流程
  • 一道闭包题引发的思考
  • 用Python写一份独特的元宵节祝福
  • ​RecSys 2022 | 面向人岗匹配的双向选择偏好建模
  • #NOIP 2014#day.2 T1 无限网络发射器选址
  • (C语言)求出1,2,5三个数不同个数组合为100的组合个数
  • (Matlab)遗传算法优化的BP神经网络实现回归预测
  • (分布式缓存)Redis分片集群
  • (附源码)spring boot公选课在线选课系统 毕业设计 142011
  • (附源码)springboot教学评价 毕业设计 641310
  • (九十四)函数和二维数组
  • (六)什么是Vite——热更新时vite、webpack做了什么
  • (小白学Java)Java简介和基本配置
  • (译)计算距离、方位和更多经纬度之间的点
  • (转载)VS2010/MFC编程入门之三十四(菜单:VS2010菜单资源详解)
  • .htaccess配置重写url引擎
  • .NET 跨平台图形库 SkiaSharp 基础应用
  • .NET 指南:抽象化实现的基类
  • .NET6 命令行启动及发布单个Exe文件
  • .Net程序猿乐Android发展---(10)框架布局FrameLayout
  • .NET框架
  • .NET学习教程二——.net基础定义+VS常用设置
  • .net中的Queue和Stack
  • @JsonSerialize注解的使用