[ASP.NET MVC]…”Más Cositas” que podemos hacer con jQuery

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 (EmptyStar FilledStar )

image

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:

  1. [AcceptVerbs(HttpVerbs.Post)]
  2. public JsonResult Rate(string rating)
  3. {
  4.     return Json("Valorado como " + rating);
  5.     
  6. }

2. Dentro de la vista Index:

– Creamos una nueva columna llamada Valoración,

  1. <th>
  2.     Valoración
  3. </th>

– Donde añadiremos los elementos de la valoración (“estrellas”), que definimos de la siguiente manera:

  1. <td>
  2.     <p>
  3.         <img src="../../Content/Imagenes/EmptyStar.png" alt="Star Rating" align="middle" id="1" title="Muy malo"/>
  4.         <img src="../../Content/Imagenes/EmptyStar.png" alt="Star Rating" align="middle" id="2" title="Malo"/>
  5.         <img src="../../Content/Imagenes/EmptyStar.png" alt="Star Rating" align="middle" id="3" title="Regular"/>
  6.         <img src="../../Content/Imagenes/EmptyStar.png" alt="Star Rating" align="middle" id="4" title="Bueno"/>
  7.         <img src="../../Content/Imagenes/EmptyStar.png" alt="Star Rating" align="middle" id="5" title="Excelente"/>
  8.     </p>
  9. </td>

Inicialmente el formato de la columna valoración es este image . 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.

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

  1. <script language="javascript" type="text/javascript">
  2.         $(function () {
  3.             $("img").mouseover(function () {
  4.                 giveRating($(this), "FilledStar.png");
  5.                 $(this).css("cursor", "pointer");
  6.             });
  7.  
  8.             $("img").mouseout(function () {
  9.                 giveRating($(this), "EmptyStar.png");
  10.             });
  11.  
  12.             $("img").click(function () {
  13.                 $("img").unbind("mouseout mouseover click");
  14.                 var url = "/Team/Rate?rating=" + $(this).attr("title");
  15.                 $.post(url, null, function (data) {
  16.                     alert(data);
  17.                 });
  18.             });
  19.         });
  20.  
  21.         function giveRating(img, image) {
  22.             img.attr("src", "/Content/Imagenes/" + image)
  23.                .prevAll("img").attr("src", "/Content/Imagenes/" + image);
  24.         }
  25.     </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.

image 

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:

image

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 🙂

2 comentarios en “[ASP.NET MVC]…”Más Cositas” que podemos hacer con jQuery”

  1. Excelente post, aunque una de las mayores practicidades de jQuery es que por lo general ya existen Plugins para cierta funcionalidad y esta es una de ellas.

    Cuando no existen, esto es un ejemplo de lo que se puede lograr, saludos desde Mexico.

  2. Tienes toda la razón Javier. Existen muchos plugins para prácticamente “todo”, pero no debemos dejar de crear nuestras propias “cositas”;)
    Un saludo. Y muchas gracias por el comentario

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *