AjaxToolKit之Rating控件的使用方法_AJAX相关

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

以下是运行时的效果:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索ajax
, ajaxtoolkit
Rating
ajaxtoolkit、ajax control toolkit、ajaxtoolkit 官方下载、ajaxtoolkit下载、asp.net ajaxtoolkit,以便于您获取更多的相关知识。

时间: 2024-10-23 02:31:14

AjaxToolKit之Rating控件的使用方法_AJAX相关的相关文章

ajax获取php页面的返回参数,控件赋值的方法_AJAX相关

js页面 $.ajax({ type : "get", url : "", //跳转页面 data :"m=content&c=favorite&a=del_favorite&shoucangId="+_id,//传递的参数 datatype : "html", async:'false', success : function(data) //返回值 { if(data !=null) { var s

VISUAL C++中的OCX控件的使用方法

新一代32位操作系统WINDOWS 95舍弃了VBX控件,取而代之的是OCX控件.OCX控件具有功能强大,界面美观的特点,然而许多参考书中并没有详细阐述OCX控件的使用方法,使得一些如数据库表格,远程数据控件等接口复杂的OCX难于使用.这里将详细阐述OCX的使用方法. 首先提醒读者要注意的是:使用OCX构件之前,必须登记注册,否则不能使用.安装VISUAL C++时,系统自动注册登记软件附带的OCX控件.如果不幸没有登记,那么请使用REGSVR32应用程序来注册.以VISUAL C++ 5.0为

win7系统提示你尚未正确安装工行网银控件的解决方法

  win7系统提示你尚未正确安装工行网银控件的解决方法           步骤一:打开我们在win7 32位系统中常用的浏览器,然后找到菜单栏中的"工具"打开菜单之后点击"Internet选项"打开Internet属性设置窗口,并把窗口设置切换到"安全"这个选项卡. win7系统 步骤二:在安全的选项卡下,我们看到下方有一个名为"自定义级别"的按钮,我们点击这个按钮之后,会进入到一个新的窗口进行设置,在窗口下方的列表里面找

浅析c#中WebBrowser控件的使用方法

以下是对c#中WebBrowser控件的使用方法进行了详细的分析介绍,需要的朋友参考下   首先先来简单介绍一下webbrowser控件,这个控件是可以实现在form窗体中添加网页内容的.如图,我在form中加入了百度api,(百度地图api调用博客里有讲) 使用这个控件其实很简单 (1)第一步只要在form_load中输入 复制代码 代码如下: webBrowser1.Navigate(Application.StartupPath + " /map.html");//引号中为网页代

asp.net简单页面控件赋值实现方法_实用技巧

本文实例讲述了asp.net简单页面控件赋值的方法.分享给大家供大家参考,具体如下: /// <summary> /// 赋值 表名,控件名,要查询的唯一数据 /// </summary> protected void SetEvaluate(string TableName, string UpName, string Id) { ContentPlaceHolder cph = (ContentPlaceHolder)Page.Master.FindControl("

ASP.NET笔记之广告控件的使用方法_实用技巧

广告控件的使用方法: 广告文件是一个XML文件,广告文件中所有的标签属性被分析后放到adProperties字典中,用以属性编辑. ads.xml 复制代码 代码如下: <?xml version="1.0" encoding="utf-8"?>  <!--广告文件是一个XML文件--> <Advertisements>   <Ad>     <ImageUrl>4rwbgzby.gif</Image

Android仿英语流利说取词放大控件的实现方法(附demo源码下载)_Android

本文实例讲述了Android仿英语流利说取词放大控件的实现方法.分享给大家供大家参考,具体如下: 1 取词放大控件 英语流利说是一款非常帮的口语学习app,在app的修炼页面长按屏幕,会弹出一个放大镜,当手指移到某个单词的附近,可以看到该英文单词会被选中,效果如下图所示: 2 代码示例 该控件挺有意思,于是我写了个简单的demo,完整实例代码点击此处本站下载.,程序运行后的效果如下: 3 实现原理 该控件的实现原理比较简单,下面介绍几个比较重要的类 ① WordView 在实习该控件的过程中,我

javascript-如何在js里为activex控件里的方法传入byte的数组

问题描述 如何在js里为activex控件里的方法传入byte的数组 我现在有一个activex的控件,它里面有个方法需要传入byte数组,控件里面的方法是usb_write(byte[] Q_index, byte[] Q_type, byte[] pQ_data),这个在js中如何为它里面传byte[]类型的参数啊 解决方案 try xxx.usb_write([1,2,3,5],[1,2,3,5],[1,2,3,5])

MFC中WMP控件的使用方法的疑惑

问题描述 MFC中WMP控件的使用方法的疑惑 在用MFC做一个音乐播放器,插入WMP控件后,不知道如何使用它,怎么才能调用到他本身自带的类,比如fullscreen,怎么才能用他来设置全屏