Siguiendo en la línea del último artículo, vamos a ver otra aplicación sencilla que podemos implementar utilizando jQuery. En este caso vamos a programar un sistema de valoración mediante el cual los usuarios pueden votar a los distintos equipos que se muestran publicados en nuestra página web. Para ello partimos de la aplicación Example1, que utilizamos en un articulo anterior, y vamos a ir realizando las siguientes modificaciones:
1. Añadimos las imágenes (EmptyStar.png, FilledStar.png) que vamos a utilizar para conseguir el efecto deseado al mover el ratón sobre las mismas ( )
2. Dentro del controlador TeamController, donde mostramos los equipos almacenados en nuestro modelo de datos, añadimos un resultado de acción que se encargará de cargar el valor que seleccionamos a través de la vista en formato json. Para ello ejecutamos el siguiente código:
- [AcceptVerbs(HttpVerbs.Post)]
- public JsonResult Rate(string rating)
- {
- return Json("Valorado como " + rating);
- }
2. Dentro de la vista Index:
– Creamos una nueva columna llamada Valoración,
- <th>
- Valoración
- </th>
– Donde añadiremos los elementos de la valoración (“estrellas”), que definimos de la siguiente manera:
- <td>
- <p>
- <img src="../../Content/Imagenes/EmptyStar.png" alt="Star Rating" align="middle" id="1" title="Muy malo"/>
- <img src="../../Content/Imagenes/EmptyStar.png" alt="Star Rating" align="middle" id="2" title="Malo"/>
- <img src="../../Content/Imagenes/EmptyStar.png" alt="Star Rating" align="middle" id="3" title="Regular"/>
- <img src="../../Content/Imagenes/EmptyStar.png" alt="Star Rating" align="middle" id="4" title="Bueno"/>
- <img src="../../Content/Imagenes/EmptyStar.png" alt="Star Rating" align="middle" id="5" title="Excelente"/>
- </p>
- </td>
Inicialmente el formato de la columna valoración es este . Cada una de las imágenes se identifica mediante un id y un title específico. Este último atributo es el que se devuelve como parámetro a la acción Rate cuando hacemos clic sobre el sistema de valoración, y que nos permite mostrar el valor seleccionado.
– Finalmente, añadimos la referencia al código jquery para que la vista funcione correctamente.
- <script language="javascript" type="text/javascript" src="../../Scripts/jquery-1.4.1.js"></script>
– Y el código jQuery correspondiente que nos permite realizar la valoración. Dentro de dicho código vamos a implementar 3 eventos.
1. Mouseover (cuando pasamos el ratón por encima de las imágenes). Se ejecuta la función giveRating, mediante la cual se carga la imagen FilledStar.png, y se aplica un estilo específico.
2.Mouseout (cuando quitamos el ratón). Se ejecuta la función giveRating, y en este caso cargamos la imagen EmptyStar.png
3.Click (cuando hacemos click sobre una de las imágenes), desvinculamos todos los eventos asociados a dicha imagen (mediante .unbind) y enviamos la petición post con los parámetros correspondientes:
– url o la acción del controlador
– datos
– función de respuesta, que se ejecuta cuando la acción del controlador devuelve la información json
- <script language="javascript" type="text/javascript">
- $(function () {
- $("img").mouseover(function () {
- giveRating($(this), "FilledStar.png");
- $(this).css("cursor", "pointer");
- });
- $("img").mouseout(function () {
- giveRating($(this), "EmptyStar.png");
- });
- $("img").click(function () {
- $("img").unbind("mouseout mouseover click");
- var url = "/Team/Rate?rating=" + $(this).attr("title");
- $.post(url, null, function (data) {
- alert(data);
- });
- });
- });
- function giveRating(img, image) {
- img.attr("src", "/Content/Imagenes/" + image)
- .prevAll("img").attr("src", "/Content/Imagenes/" + image);
- }
- </script>
Si ejecutamos la aplicación y accedemos a la vista correspondiente, vemos que aparece la columna de Valoración que hemos añadido y en la cual, si nos desplazamos por encima de las “estrellas” vemos el efecto configurado.
Además cuando seleccionamos un valor concreto, nos aparece una alerta con el mensaje correspondiente indicando la valoración realizada, tal y como lo hemos configurado:
Y esto es sólo una pequeña muestra…y mejorable, de lo que se puede hacer para conseguir que nuestros sitios web presenten alguna característica 2.0. Si os animáis a contribuir con vuestras ideas, ya sabéis 🙂