Crear un control de clasificación (C#)

por Christian Wenz

Descargar código o Descargar PDF

Muchos sitios web, desde comercio electrónico hasta sitios de la comunidad, ofrecen a sus usuarios tarifas o artículos. Esto normalmente requiere cierto esfuerzo de codificación, pero tenemos el kit de herramientas de control para nuestra eliminación.

Información general

Muchos sitios web, desde comercio electrónico hasta sitios de la comunidad, ofrecen a sus usuarios tarifas o artículos. Esto normalmente requiere cierto esfuerzo de codificación, pero tenemos el kit de herramientas de control para nuestra eliminación.

Pasos

En primer lugar, necesita (al menos) dos tipos de imágenes: una para un elemento de calificación rellenado y otra para un elemento de clasificación vacío. Un elemento de clasificación suele ser una estrella o un smiley. En este escenario, encontrará tres archivos: Smiley. png y Empty. png y Smiley-done. png como parte de las descargas de código fuente de este tutorial.

A continuación, cree un nuevo archivo ASP.NET y empiece por agregarle un ScriptManager control:

<asp:ScriptManager ID="asm" runat="server" />

A continuación, agregue el control Rating de ASP.NET AJAX control Toolkit. Se deben establecer los siguientes atributos para este ejemplo:

  • CurrentRating la clasificación inicial que se va a usar
  • MaxRating la clasificación máxima
  • EmptyStarCssClass la clase CSS que se va a usar cuando un elemento de clasificación (Star) esté vacío
  • FilledStarCssClass la clase CSS que se va a usar cuando se rellena un elemento de clasificación (Star)
  • StarCssClass la clase CSS que se va a usar para una estadística visible
  • WaitingStarCssClass la clase CSS que se va a usar mientras se envía una clasificación por estrellas al servidor

Y este es el marcado que crea un control de clasificación con cinco elementos (sonrisais) de los que no se rellena inicialmente ninguno:

<ajaxToolkit:Rating ID="r1" runat="server"
 CurrentRating="0" MaxRating="5"
 EmptyStarCssClass="emptypng" FilledStarCssClass="smileypng"
 StarCssClass="smileypng" WaitingStarCssClass="donesmileypng"/>

Las tres clases CSS a las que se hace referencia ahora deben mostrar los archivos de imagen adecuados, lo que es fácil de usar con 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>

Asegúrese de proporcionar el ancho y el alto de las tres imágenes; de lo contrario, la pantalla puede parecer un poco desordenado.

Por último, el resultado de la clasificación debe mostrarse al usuario (o, al menos, guardarse en una base de datos). Por tanto, agregue una etiqueta para la salida de un mensaje de texto y un botón de envío para devolver el formulario de clasificación al servidor:

<asp:Label ID="Label1" runat="server" />
<input type="submit" id="Submit1" runat="server" value="Rate!" />

En el código del lado servidor, acceda al control clasificación a través de su ID y, a continuación, acceda a su propiedad CurrentRating, que es el número de los elementos de clasificación seleccionados, en el ejemplo un valor entre 0 y 5.

<script runat="server">
 void Page_Load()
 {
 if (Page.IsPostBack)
 {
 Label1.Text = "Your rating: " + r1.CurrentRating;
 }
 }
</script>

Guarde la página y cargarla en el explorador. Al mantener el mouse sobre los elementos de clasificación (inicialmente vacíos), se produce un efecto de JavaScript: la clasificación cambia. Al hacer clic en el conjunto de estrellas, se conserva la clasificación actual. Por último, al enviar el formulario, el código del lado servidor genera la clasificación seleccionada.

crear un sistema de clasificación con código mínimo

Creación de un sistema de clasificación con código mínimo (haga clic para ver la imagen de tamaño completo)