웹 프론트엔드 JS 튜토리얼 AjaxToolKit의 등급 제어를 사용하는 방법

AjaxToolKit의 등급 제어를 사용하는 방법

May 23, 2018 pm 05:06 PM
사용방법

이 글은 주로 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); 
}
로그인 후 복사

以下是运行时的效果:

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

全面解析$.Ajax()方法参数(图文教程)

探讨Ajax中有关readyState和status的问题

基于Ajax技术实现文件上传带进度条

위 내용은 AjaxToolKit의 등급 제어를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

Video Face Swap

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

DirectX 복구 도구를 사용하는 방법은 무엇입니까? DirectX 복구 도구의 자세한 사용법 DirectX 복구 도구를 사용하는 방법은 무엇입니까? DirectX 복구 도구의 자세한 사용법 Mar 15, 2024 am 08:31 AM

DirectX 복구 도구는 현재 시스템의 DirectX 상태를 감지하는 전문 시스템 도구로, 이상이 발견되면 직접 복구할 수 있습니다. DirectX 복구 도구를 사용하는 방법을 모르는 사용자가 많을 수 있습니다. 아래의 자세한 튜토리얼을 살펴보겠습니다. 1. 수리 도구 소프트웨어를 사용하여 수리 감지를 수행합니다. 2. 복구가 완료된 후 C++ 구성 요소에 비정상적인 문제가 있다는 메시지가 나타나면 취소 버튼을 클릭한 후 도구 메뉴 표시줄을 클릭하세요. 3. 옵션 버튼을 클릭하고 확장을 선택한 후 확장 시작 버튼을 클릭합니다. 4. 확장이 완료된 후 다시 감지하여 수리합니다. 5. 복구 도구 작업을 완료한 후에도 문제가 여전히 해결되지 않으면 오류를 보고한 프로그램을 제거하고 다시 설치해 볼 수 있습니다.

HTTP 525 상태 코드 소개: 정의 및 적용 살펴보기 HTTP 525 상태 코드 소개: 정의 및 적용 살펴보기 Feb 18, 2024 pm 10:12 PM

HTTP 525 상태 코드 소개: 정의 및 사용법 이해 HTTP(HypertextTransferProtocol) 525 상태 코드는 SSL 핸드셰이크 프로세스 중에 서버에 오류가 발생하여 보안 연결을 설정할 수 없음을 의미합니다. TLS(전송 계층 보안) 핸드셰이크 중에 오류가 발생하면 서버는 이 상태 코드를 반환합니다. 이 상태 코드는 서버 오류 범주에 속하며 일반적으로 서버 구성 또는 설정 문제를 나타냅니다. 클라이언트가 HTTPS를 통해 서버에 연결을 시도하면 서버에는 아무 것도 없습니다.

바이두 넷디스크 사용법-바이두 넷디스크 사용법 바이두 넷디스크 사용법-바이두 넷디스크 사용법 Mar 04, 2024 pm 09:28 PM

아직도 Baidu Netdisk 사용법을 모르는 친구들이 많으므로 아래에서 편집자가 Baidu Netdisk 사용법을 설명해 드리겠습니다. 필요하신 분들은 서둘러서 살펴보시면 도움이 될 것입니다. 1단계: Baidu Netdisk를 설치한 후 직접 로그인합니다(그림 참조). 2단계: 그런 다음 페이지 프롬프트에 따라 "내 공유" 및 "전송 목록"을 선택합니다(그림 참조). 친구 공유"를 사용하면 사진과 파일을 친구들과 직접 공유할 수 있습니다(그림 참조). 4단계: 그런 다음 "공유"를 선택한 다음 컴퓨터 파일이나 네트워크 디스크 파일을 선택합니다(그림 참조). 다섯 번째 1단계: 그런 다음 친구를 찾을 수 있습니다(그림 참조). 6단계: "기능 보물 상자"(그림 참조)에서 필요한 기능을 찾을 수도 있습니다. 위 내용은 편집자의 의견입니다.

KMS 활성화 도구란 무엇입니까? KMS 활성화 도구를 사용하는 방법은 무엇입니까? KMS 활성화 도구를 사용하는 방법은 무엇입니까? KMS 활성화 도구란 무엇입니까? KMS 활성화 도구를 사용하는 방법은 무엇입니까? KMS 활성화 도구를 사용하는 방법은 무엇입니까? Mar 18, 2024 am 11:07 AM

KMS 정품 인증 도구는 Microsoft Windows 및 Office 제품을 정품 인증하는 데 사용되는 소프트웨어 도구입니다. KMS는 KeyManagementService의 약자로 키 관리 서비스입니다. KMS 정품 인증 도구는 컴퓨터가 가상 KMS 서버에 연결하여 Windows 및 Office 제품을 정품 인증할 수 있도록 KMS 서버의 기능을 시뮬레이션합니다. KMS 활성화 도구는 크기가 작고 기능이 강력합니다. 한 번의 클릭으로 영구적으로 활성화할 수 있으며, 인터넷에 연결하지 않고도 모든 버전의 Windows 시스템과 Office 소프트웨어를 활성화할 수 있습니다. 그리고 자주 업데이트되는 Windows 정품 인증 도구를 소개하겠습니다. KMS 정품 인증 작업을 소개하겠습니다.

win10 명령 프롬프트를 올바르게 사용하여 자동 복구 작업을 수행하는 방법 win10 명령 프롬프트를 올바르게 사용하여 자동 복구 작업을 수행하는 방법 Dec 30, 2023 pm 03:17 PM

컴퓨터를 오래 사용할수록 고장이 날 확률이 높아집니다. 이때 친구들은 각자의 방법을 사용하여 수리해야 합니다. 그러면 가장 쉬운 방법은 무엇입니까? 오늘은 명령 프롬프트를 사용하여 복구하는 방법에 대한 튜토리얼을 가져오겠습니다. win10 자동 복구 명령 프롬프트를 사용하는 방법: 1. "Win+R"을 누르고 cmd를 입력하여 "명령 프롬프트"를 엽니다. 2. chkdsk를 입력하여 복구 명령을 봅니다. 3. 다른 위치를 보려면 추가할 수도 있습니다. "d"와 같은 다른 파티션 4. 실행 명령 chkdskd:/F를 입력합니다. 5. 수정 과정에서 비어 있으면 Y를 입력하여 계속할 수 있습니다.

빠르게 복사하여 붙여넣는 방법 알아보기 빠르게 복사하여 붙여넣는 방법 알아보기 Feb 18, 2024 pm 03:25 PM

복사-붙여넣기 단축키 사용 방법 복사-붙여넣기는 매일 컴퓨터를 사용할 때 자주 접하게 되는 작업입니다. 업무 효율을 높이기 위해서는 복사, 붙여넣기 단축키를 익히는 것이 매우 중요합니다. 이 기사에서는 독자가 복사 및 붙여넣기 작업을 보다 편리하게 수행할 수 있도록 일반적으로 사용되는 복사 및 붙여넣기 바로 가기 키를 소개합니다. 복사 단축키: Ctrl+CCtrl+C는 복사 단축키입니다. Ctrl 키를 누른 상태에서 C 키를 누르면 선택한 텍스트, 파일, 그림 등을 클립보드에 복사할 수 있습니다. 이 단축키를 사용하려면

단축키를 사용하여 셀을 병합하는 방법 단축키를 사용하여 셀을 병합하는 방법 Feb 26, 2024 am 10:27 AM

셀 병합에 단축키를 사용하는 방법 일상 업무에서 테이블을 편집하고 서식을 지정해야 하는 경우가 많습니다. 셀 병합은 인접한 여러 셀을 하나의 셀로 병합하여 테이블의 아름다움과 정보 표시 효과를 향상시킬 수 있는 일반적인 작업입니다. Microsoft Excel 및 Google Sheets와 같은 주류 스프레드시트 소프트웨어에서 셀 병합 작업은 매우 간단하며 단축키를 통해 수행할 수 있습니다. 다음은 이 두 소프트웨어에서 셀을 병합하는 단축키 사용법을 소개합니다. 존재하다

팟플레이어 사용법 - 팟플레이어 사용법 팟플레이어 사용법 - 팟플레이어 사용법 Mar 04, 2024 pm 06:10 PM

팟플레이어는 매우 강력한 미디어 플레이어이지만, 아직도 많은 친구들이 팟플레이어 사용법을 모르고 있습니다. 오늘은 모든 분들께 도움이 되었으면 하는 마음으로 팟플레이어 사용법을 자세히 소개하겠습니다. 1. PotPlayer 단축키 PotPlayer 플레이어의 기본 공통 단축키는 다음과 같습니다. (1) 재생/일시 정지: 스페이스 (2) 볼륨: 마우스 휠, 상하 화살표 키 (3) 앞으로/뒤로: 왼쪽 및 오른쪽 화살표 키 (4) 북마크: P-북마크 추가, H-View 북마크 (5) 전체화면/복원: Enter (6) 속도: C-가속, 7) 이전/다음 프레임: D/

See all articles