Créer un contrôle de notation

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.

Article lu   fois.

Les deux auteurs

Site personnel

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

Traduction

Cet article est la traduction la plus fidèle possible de l'article original: 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:

 
Sélectionnez

<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.

 
Sélectionnez

<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:

 
Sélectionnez

<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.

 
Sélectionnez

<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.

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

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

  

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.