Crear un control de clasificación (VB)

por Christian Wenz

Descargar PDF

Muchos sitios web, desde los de comercio electrónico a los de comunidad, ofrecen a sus usuarios la posibilidad de calificar artículos o elementos. Esto normalmente requiere un esfuerzo de codificación, pero tenemos a nuestra disposición el kit de herramientas de control.

Información general

Muchos sitios web, desde los de comercio electrónico a los de comunidad, ofrecen a sus usuarios la posibilidad de calificar artículos o elementos. Esto normalmente requiere un esfuerzo de codificación, pero tenemos a nuestra disposición el kit de herramientas de control.

Pasos

En primer lugar, necesita (al menos) dos tipos de imágenes: una para un elemento de clasificación rellenado y otra para un elemento de clasificación vacío. Un elemento de clasificación suele ser una estrella o una sonrisa. En este escenario encontrará tres archivos, smiley.png, 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 de ASP.NET y empiece agregándole un control ScriptManager:

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

A continuación, agregue el control Rating desde el kit de herramientas de control de AJAX de ASP.NET. Los atributos siguientes deben establecerse 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 (estrella) está vacío
• FilledStarCssClass la clase CSS que se va a usar cuando un elemento de clasificación (estrella) está rellenado
• 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 devuelve una clasificación de estrellas al servidor

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

<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 hacer mediante 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 presentación puede parecer un poco caótica.

Por último, el resultado de la clasificación debe mostrarse al usuario (o, al menos, guardarse en una base de datos). Por lo tanto, agregue una etiqueta para la salida de un mensaje de texto y un botón Enviar para volver a publicar el formulario de clasificación en el 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 luego acceda a su propiedad CurrentRating, que es el número de los elementos de clasificación seleccionados (en nuestro ejemplo, un valor entre 0 y 5).

<script runat="server">
 Sub Page_Load()
 If Page.IsPostBack Then
 Label1.Text = "Your rating: " & r1.CurrentRating
 End If
 End Sub
</script>

Guarde la página y cárguela en el explorador. Al mantener el puntero 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.

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

Anterior