Calificador con estrellas para Asp .NET MVC (bootstrap stars rating)

Version docs.com: https://doc.co/Xje5LZ

Aunque no existe un componente de bootstrap para hacer el típico calificador con estrellas (rating, en inglés). Se presentan varias librerías en internet que nos permite utilizar algunos componentes de bootstrap para poder lograr la funcionalidad. En esta ocasión estaremos utilizando la librería bootstrap-rating.mvc, escrita por simonray, y que nos facilita la instalación al entregarnos un empaquetado Nuget.

El primer paso recomendado es actualizar los empaquetados Nuget que la plantilla MVC que Visual Studio provee.
*Al día de la publicación de este post las principales version son: jquery v3.1.1 y bootstrap v3.3.7

Una vez actualizados los paquetes preinstalados, ahora si nos enfocaremos en el paquete (en realidad los paquetes) que nos ofrecerán la funcionalidad esperada. Y para lograr esto, es cuestión de solo abrir la ‘Consola de manejador de Paquetes’ (Package Manager Console, en inglés) e instalar el paquete:

Adicionalmente será necesario instalar también el paquete, que es la paquetería del proyecto Font Awesome que include los iconos glyphs del proyecto bootstrap a utilizar:

Con este par de paquetes Nuget instalados, el siguiente paso consistirá en añadir las referencias a los archivos correspondientes CSS:

el de JavaScript:

Por último, para comenzar a usar el componente en su forma más básica solo basta con llamar el método extendido de la clase Html:

Pero está claro y es de esperarse que la librería nos entregue mayor funcionalidad en el componente. Entre las diferentes funcionalidades que el paquete nos ofrece esta la de pasarle un valor en un objeto modelo (@Model), hacer evaluaciones fraccionadas, marcar el componente como deshabilitado o solo de lectura, utilizar otro glyphs (icono), etc. Aquí el demo de estas funcionalidades así como el código necesario para realizar la función esperada.

Adicionalmente a las funciones que el empaquetado nuget prevee, con el siguiente código javascript podemos extender la funcionalidad. Con él podemos agregar el pequeño cuadro donde se ve el valor se calificación seleccionado, mostrar un tooltip del valor seleccionas o mostrar una alerta javascript para el manejador de eventos.

Aquí la dirección del demo: http://jlknowledgebase.jorgelevy.com/RatingControl

Y aquí el código del proyecto para tu referencia: https://github.com/KodiakMx/KnowledgeBase/tree/master/RatingControl

  • Kenar Roan

    Hola tengo un problema cuando le paso el modelo.
    Erro: La conversión especificada no es válida.
    Codigo:@(Html.BootstrapRating(model => model.Estrellas)
    .Class(“rating-tooltip”)
    .Set(BootstrapRatingOptions.filledSymbols, “fa fa-star fa-3x”)
    .Set(BootstrapRatingOptions.emptySymbols, “fa fa-star-o fa-3x”))

    • Hola Kenar,

      Qué tipo de dato es tu propiedad Estrellas? Usualmente este, debe de ser de tipo ‘double’.

      Saludos

      • Kenar Roan

        Es tipo int se puede convertir a bouble de alguna manera sin cambiarlo del modelo.

        • La primera opción que pienso es que extiendas la clase y hagas una propiedad tipo double que haga el convert.

      • Kenar Roan

        es de tipo int hay alguna manera para convertirlo.