Créer un contrôle de notation

Date de publication : 08 mai 2009

Par Christian Wenz
 Pascal ROZE (Traducteur) (Page perso) (Blog)
 

De nombreux sites, des sites d'e-commerce aux sites communautaires, permettent à leurs utilisateurs de noter des articles ou autres. Cela nécessite généralement un certain effort, mais nous avons le Control Toolkit à notre disposition pour nous aider dans cette tâche.

               Version PDF (Miroir)   Version hors-ligne (Miroir)

Traduction
Vue générale
Etapes


Traduction

Cet article est la traduction la plus fidèle possible de l'article original: en Creating a Rating Control


Vue générale

De nombreux sites, des sites d'e-commerce aux sites communautaires, permettent à leurs utilisateurs de noter des articles ou autres. Cela nécessite généralement un certain effort, mais nous avons le Control Toolkit à notre disposition pour nous aider dans cette tâche.


Etapes

Pour commencer, vous avez besoin (au minimum) de 2 images: une pour un élément de notation rempli et une pour un élément de notation vide. Un élément de notation est généralement une étoile ou un smiley. Dans ce tutoriel, vous trouverez 3 fichiers, smiley.png, empty.png et smiley-done.png dans le code source joint.

Ensuite, créez une nouvelle page ASP.NET et commencez par y ajouter un contrôle ScriptManager: 

<asp:ScriptManager ID="asm" runat="server" />
Puis, ajoutez le contrôle Rating présent dans l'ASP.NET AJAX Control Toolkit. Les attributs suivants doivent être définis:
- CurrentRating: la note par défaut
- MaxRating: la note maximale
- EmptyStarCssClass: la classe CSS utilisée quand un élément de notation ("étoile") est vide
- EmptyStarCssClass: la classe CSS utilisée quand un élément de notation ("étoile") est rempli
- StarCsslass: la classe CSS utilisée pour une stat visible
- WaitingStarCssClass: la classe CSS utilisée lorsque la notation est en cours d'envoi au serveur.

Ci-dessous le code pour un créer un contrôle de notation avec 5 éléments (smileys), dont aucun séléctionné initialement. 

<ajaxToolkit:Rating ID="r1" runat="server"      
	 	CurrentRating="0" MaxRating="5"      
	 	EmptyStarCssClass="emptypng" 
	 	FilledStarCssClass="smileypng"      
	 	StarCssClass="smileypng" 
	 	WaitingStarCssClass="donesmileypng"/>
Les 3 classes CSS référencées doivent afficher la bonne image, ce qui est facile en utilisant les CSS: 

<style type="text/css">      
	.emptypng { background-image: url(empty.png); width: 32px; height: 32px; }      
	.smileypng { background-image: url(smiley.png); width: 32px; height: 32px; }      
	.donesmileypng { background-image: url(smiley-done.png); width: 32px; height: 32px; } 
</style>
Côté serveur, on accède au contrôle en utilisant son ID et on récupère la note via la propriété CurrentRating qui retourne le nombre d'éléments de notation sélectionnés, dans notre exemple une valeur entre 0 et 5. 

<script runat="server">      
	void Page_Load()      
	{           
		if (Page.IsPostBack)           
		{                
			Label1.Text = "Your rating: " + r1.CurrentRating;           
		}      
	} 
</script>
Sauvegardez la page et chargez la dans votre navigateur. Quand vous survolez un élément de notation (initialement vide), un effet Javascript se produit: la note change. Quand vous cliquez sur l'une des étoiles, la note actuelle est conservée. Pour finir, quand vous soumettez la form, le code côté serveur affiche la note sélectionnée.

Créer un contrôle de notation avec un minimum de code.


               Version PDF (Miroir)   Version hors-ligne (Miroir)

Valid XHTML 1.1!Valid CSS!

Copyright © 2009 Equipe Dotnet. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts. Droits de diffusion permanents accordés à Developpez LLC. Cette page est déposée.

 
 
Developpez.com

Nous contacter

Participez

Informations légales

 
Services

Forum Microsoft DotNET

Blogs

Hébergement

 
Partenaires

Hébergement Web