Créer un contrôle de notation

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

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.

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.