AjaxToolKit의 등급 제어를 사용하는 방법-JS 튜토리얼-php.cn

이 글은 주로 AjaxToolKit의 Rating 컨트롤을 사용하는 방법에 대한 관련 정보를 소개합니다. 관심 있는 친구들은 이를 참고할 수 있습니다.

AjaxToolKit의 Rating 컨트롤은 웹 페이지 평점(또는 투표) 기능을 처리하는 데 특별히 사용되는 Microsoft Ajax 컨트롤 라이브러리입니다. . 컨트롤 자체는 웹 페이지의 새로 고침이 아닌 기능을 지원합니다. 이를 사용할 때 UpdatePanel 컨트롤에 넣을 필요는 없습니다. AutoPostBack 속성을 False로 설정하기만 하면 됩니다. 이 컨트롤은 사용이 매우 간단하며 다양한 효과, 사용자 정의 함수 콜백 등을 설정할 수도 있습니다. 다음은 이를 사용할 때의 스크린샷입니다.

먼저 공통 속성의 기능에 대해 이야기해 보겠습니다.
ID: 당연히 모든 컨트롤에 서버 측 ID가 있다는 것은 누구나 알고 있습니다. .
BehaviorID: Ajax 클라이언트를 통해 컨트롤 객체를 얻을 때 사용되는 ID입니다. 콜백 함수 설정 시 $Find 메서드를 통해 찾습니다.
MaxRating: 컨트롤의 현재 최대값입니다. 이 값은 UI의 "별표" 아이콘 수를 직접 반영합니다.
CurrentRating: 현재 값, 즉 컨트롤이 현재 표시하는 값입니다. 이 값은 UI에서 켜져 있는 "별" 아이콘 수를 직접 반영합니다. 이 값의 범위는 0~MaxRating(포함) 사이입니다.
runat: 등록된 컨트롤은 서버측 동작이므로 이 값을 설정해야 합니다.
StarCssClass: "star" 아이콘의 스타일입니다. 필수의.
WaitingStarCssClass: 클라이언트 응답을 처리할 때 컨트롤이 서버와 상호 작용하는 동안 대기 상태에 있을 때의 "별" 아이콘 스타일입니다. 필수의.
FilledStarCssClass: "별표" 아이콘이 켜졌을 때의 스타일입니다. 필수의.
EmptyStarCssClass: "별표" 아이콘이 켜지지 않을 때의 스타일. 필수의.
CssClass: 등급 제어의 전반적인 스타일입니다. 필요한 경우 지정하십시오.
OnChanged: 는 사용자가 "별표" 아이콘을 클릭한 후 응답 이벤트를 처리하는 데 사용됩니다. 이 이벤트는 서버 측에서 처리됩니다.
AutoPostBack: 컨트롤이 자동으로 포스트백되는지 여부를 설정합니다. 일반적으로 이 값을 False로 설정합니다.
ReadOnly: 컨트롤의 읽기 전용 상태입니다. 읽기 전용 상태의 등급은 사용자가 클릭할 수 없습니다. 읽기 전용 등급에 대해 별도의 스타일을 설정할 수 있습니다.
사용 방법을 살펴보겠습니다.
준비 작업:
1. AjaxControlToolkit.dll 어셈블리가 프로젝트에서 올바르게 참조되는지 확인하세요. 이 어셈블리는 Visual Studio 2005의 베타 버전입니다. 설치 패키지를 다운로드하려면 Microsoft 공식 웹 사이트로 이동해야 합니다. Visual Studio 2008은 IDE와 함께 자동으로 설치되므로 직접 사용할 수 있습니다.
2. Visual Studio2008에서는 이 컨트롤이 도구 상자에 자동으로 추가되지 않으며 수동으로 도구 상자에 추가한 다음 페이지에 끌어서 놓아야 합니다. Visual Studio에서 도구 상자 부동 패널을 열고, 빈 탭(예: 일반 탭)을 선택하고, 마우스 오른쪽 버튼을 클릭하고, "선택..."을 선택하고, 팝업 대화 상자의 AjaxControlToolkit 어셈블리에서 해당 컨트롤을 찾을 수 있습니다. , 다음 그림과 같습니다.

3 위 대화 상자에서 AjaxControlToolkit과 관련된 컨트롤을 찾을 수 없는 경우 AjaxControlToolkit.dll 어셈블리에 대한 경로를 직접 지정해야 합니다. 독자가 파일을 찾지 못한 경우 여기에서 편리하게 다운로드할 수 있습니다.
AjaxControlToolkit.dll
4. 컨트롤을 추가한 후 표준 ASP.NET 컨트롤처럼 도구 상자에서 Rating 컨트롤을 사용할 수 있습니다.

준비가 완료되면 프로젝트에 새 웹 페이지를 만들고 페이지에 컨트롤을 배치합니다. 모든 Ajax 컨트롤에는 필요한 스크립트를 등록하는 역할을 하는 ScriptManager 컨트롤의 지원이 필요합니다. 고객. . 따라서 등급 컨트롤을 추가하기 전에 페이지에 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); 
}

로그인 후 복사

以下是运行时的效果：