Comment utiliser le contrôle Rating d'AjaxToolKit-js tutoriel-php.cn

Comment utiliser le contrôle Rating d'AjaxToolKit

亚连

Libérer： 2018-05-23 17:06:23

original

1439 Les gens l'ont consulté

Cet article présente principalement les informations pertinentes sur la façon d'utiliser le contrôle Rating d'AjaxToolKit. Les amis intéressés peuvent s'y référer

Le contrôle Rating d'AjaxToolKit est spécialement utilisé pour traiter les pages Web de la bibliothèque de contrôles Microsoft Ajax. . Le contrôle avec la fonction de notation (ou de vote) prend lui-même en charge la fonction de non-actualisation de la page Web. Lors de son utilisation, il n'est pas nécessaire de le placer dans le contrôle UpdatePanel. Il vous suffit de définir sa propriété AutoPostBack sur False. Ce contrôle est très simple à utiliser et vous pouvez également définir divers effets, rappels de fonctions personnalisés, etc. Ce qui suit est une capture d'écran lors de son utilisation

Parlons d'abord des fonctions des attributs communs :
ID : Inutile de dire que tout le monde sait que tous les contrôles auront un identifiant côté serveur.
BehaviorID : L'ID à utiliser lors de l'obtention de l'objet de contrôle via le client Ajax. Il est trouvé via la méthode $Find lors de la définition de la fonction de rappel.
MaxRating : La valeur maximale actuelle du contrôle. Cette valeur reflète directement le nombre d'icônes « étoiles » sur l'interface utilisateur.
CurrentRating : Valeur actuelle, qui est la valeur actuellement affichée par le contrôle. Cette valeur reflète directement le nombre d'icônes « étoiles » allumées sur l'interface utilisateur. Notez que la plage de cette valeur est comprise entre 0 et MaxRating (inclus).
runat : Le contrôle enregistré est un comportement côté serveur et cette valeur doit être définie.
StarCssClass : Le style de l'icône "étoile". Requis.
WaitingStarCssClass : Le style de l'icône "étoile" lorsque le contrôle est dans un état d'attente lors de l'interaction avec le serveur lors du traitement de la réponse du client. Requis.
FilledStarCssClass : Le style lorsque l'icône "étoile" est allumée. Requis.
EmptyStarCssClass : Le style lorsque l'icône "étoile" n'est pas allumée. Requis.
CssClass : Le style général du contrôle Rating. Précisez si besoin.
OnChanged : est utilisé pour gérer l'événement de réponse après que l'utilisateur a cliqué sur l'icône "étoile". Cet événement est géré côté serveur.
AutoPostBack : Définissez si le contrôle publie automatiquement. Normalement, définissez cette valeur sur False.
Lecture seule : L'état en lecture seule du contrôle. L'utilisateur ne peut pas cliquer sur la note en lecture seule. Vous pouvez définir un style distinct pour la lecture. -seulement Note.
Voyons comment l'utiliser.
Travail de préparation :
1. Assurez-vous que l'assembly AjaxControlToolkit.dll est correctement référencé dans le projet. Cet assembly est une version bêta de Visual Studio 2005. Vous devez vous rendre sur le site officiel de Microsoft pour télécharger le package d'installation. Visual Studio 2008 a été automatiquement installé avec l'IDE et peut être utilisé directement.
2. Dans Visual Studio2008, ce contrôle n'est pas automatiquement ajouté à la boîte à outils. Il doit être ajouté manuellement à la boîte à outils, puis glissé-déposé sur la page. Vous pouvez ouvrir le panneau flottant de la boîte à outils dans Visual Studio, sélectionner un onglet vide (tel que l'onglet Général), cliquer avec le bouton droit, sélectionner "Sélectionner..." et rechercher le contrôle correspondant dans l'assembly AjaxControlToolkit dans la boîte de dialogue contextuelle. , comme indiqué ci-dessous.

3. Notez que si vous ne trouvez pas le contrôle AjaxControlToolkit dans la boîte de dialogue ci-dessus, vous devez spécifier vous-même le chemin d'accès à l'assembly AjaxControlToolkit.dll. Si le lecteur ne trouve pas le fichier, voici un téléchargement pratique pour vous.
AjaxControlToolkit.dll
4. Après avoir ajouté le contrôle, vous pouvez utiliser le contrôle Rating dans la boîte à outils comme un contrôle ASP.NET standard.

Une fois les préparatifs terminés, créez une nouvelle page Web dans le projet et placez les contrôles sur la page. Notez que tous les contrôles Ajax nécessitent ScriptManager. Prise en charge du contrôle, qui est responsable de l'enregistrement des scripts nécessaires côté client. Ainsi, avant d'ajouter le contrôle Rating, assurez-vous qu'il y a un et un seul contrôle ScriptManager sur la page. Vous trouverez ci-dessous un exemple de code pour un fichier 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>

Copier après la connexion

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

Copier après la connexion

很简单，首先让线程停止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); 
}

Copier après la connexion

以下是运行时的效果：