Implementación de un sistema de clasificación de estrellas con DotVVM y CSS

En la actualidad son muchas las páginas web y tiendas en línea que poseen sistemas de evaluación y elementos de interacción para que los visitantes y clientes puedan realizar una calificación sobre productos, servicios o empresas mediante reseñas (reviews), normalmente en la escala del 1 al 5.

El estilo de clasificación que la mayoría de las páginas web y aplicaciones utiliza es la Clasificación por Estrellas.

En este blog aprenderemos paso a paso como implementar un sistema de estrellas simple con DotVVM - ASP.NET Core y CSS.

Página web DotVVM

Viewmodel

En el Viewmodel vamos a definir dos atributos para nuestra pagina web:

public string Title { get; set;}
public string Rating { get; set; }

Title para el título de la página y Rating para almacenar en este atributo el valor seleccionado por el usuario en el sistema de clasificación por estrellas. Asimismo, en esta variable podemos poner por defecto el valor predefinido que tendrá el sistema, en este caso será el valor de 1. Para aplicaciones futuras, por ejemplo, si se desea recuperar la calificación realizada por un usuario determinado de la base de datos, el valor deberá ser asignado a este atributo Rating.

View

En la vista de la página, para el sistema de clasificación, se empleará el control DotVVM RadioButton para cada uno de los elementos de clasificación, en este caso, son 5 en total.

<dot:RadioButton id="star5" CheckedItem="{value: Rating}" CheckedValue="5" />
<label for="star5" title="5 Stars">5</label>

<dot:RadioButton id="star4" CheckedItem="{value: Rating}" CheckedValue="4" />
<label for="star4" title="4 Stars">4</label>

<dot:RadioButton id="star3" CheckedItem="{value: Rating}" CheckedValue="3" />
<label for="star3" title="3 Stars">3</label>

<dot:RadioButton id="star2" CheckedItem="{value: Rating}" CheckedValue="2" />
<label for="star2" title="2 Stars">2</label>

<dot:RadioButton id="star1" CheckedItem="{value: Rating}" CheckedValue="1" />
<label for="star1" title="1 Stars">1</label>

De forma adicional, también se agrega un label a cada uno de los componentes del RadioButton a través de su Id. Hasta el momento, tenemos algo como esto:

Estilos CSS

Hasta el momento ya tenemos nuestro sistema de clasificación, pero nos falta agregarle vida a la página, sobre todo a la sección de puntuación, para ello agregaremos una fuente de estilos para cumplir con estos objetivos.

En la actualidad, existe una gran variedad de bibliotecas que nos proporcionan una fuente de estilos e iconos para nuestras aplicaciones. Para nuestro caso haremos uso de Font Awesome, para emplear iconos en forma de estrella para reemplazar el icono circular tradicional del RadioButton. La fuente de estilos la podemos encontrar en:

http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css.

Con la implementación de estos estilos, lograremos los siguientes objetivos:

• Quitar botones de radio (las formas circulares).
• Asignar iconos en forma de estrella en cada uno de los DotVVM RadioButton.
• Establecer un color negro inicial para las estrellas no seleccionadas.
• Establecer un color amarillo cuando la estrella es marcada.
• Establecer un color amarillo cuando la estrella pasa el ratón.

Un aspecto muy importante por mencionar es que si bien es cierto en la pagina web estamos hablando de controles DotVVM, estos a la final serán traducidos en etiquetas HTML que permitirán aplicar estilos y propiedades sobre estas etiquetas HTML. Por ejemplo:

Código DotVVM:

<dot:RadioButton id="star5" CheckedItem="{value: Rating}" CheckedValue="5" />

Código HTML:

<input id="star5" type="radio" name="ko_unique_1" data-bind="checked: Rating, checkedValue: '5', attr: {}" value="5">

Nuestro resultado será el siguiente:

Código fuente

DefaultViewModel.cs

namespace StarRating.ViewModels
{
    public class DefaultViewModel : MasterPageViewModel
    {
    public string Title { get; set;}
        public string Rating { get; set; }

        public DefaultViewModel()
    {
        Title = "DotVVM Star Rating";
            Rating = "1";
    }
    }
}

Default.dothtml

@viewModel StarRating.ViewModels.DefaultViewModel, StarRating
@masterPage Views/MasterPage.dotmaster
<dot:Content ContentPlaceHolderID="MainContent">

    <h1><b>{{value: Title}}</b></h1>

    <div class="starrating risingstar d-flex-star justify-content-center-star flex-row-reverse-star">
        <dot:RadioButton id="star5" CheckedItem="{value: Rating}" CheckedValue="5" />
        <label for="star5" title="5 Stars">5</label>

        <dot:RadioButton id="star4" CheckedItem="{value: Rating}" CheckedValue="4" />
        <label for="star4" title="4 Stars">4</label>

        <dot:RadioButton id="star3" CheckedItem="{value: Rating}" CheckedValue="3" />
        <label for="star3" title="3 Stars">3</label>

        <dot:RadioButton id="star2" CheckedItem="{value: Rating}" CheckedValue="2" />
        <label for="star2" title="2 Stars">2</label>

        <dot:RadioButton id="star1" CheckedItem="{value: Rating}" CheckedValue="1" />
        <label for="star1" title="1 Stars">1</label>
    </div>

    <br />
    <b>Selected rating: <font size="6" color="#004C88"> {{value: Rating}} </font> </b>

</dot:Content>

MasterPage.dotmaster

@viewModel StarRating.ViewModels.MasterPageViewModel, StarRating

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta charset="utf-8" />

    <title>DotVVM Star rating</title>

<span class="nt">&lt;style&gt;</span>
    <span class="k">@import</span> <span class="sx">url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css)</span><span class="p">;</span>

    <span class="nc">.flex-row-reverse-star</span> <span class="p">{</span>
        <span class="nl">-webkit-box-orient</span><span class="p">:</span> <span class="n">horizontal</span> <span class="cp">!important</span><span class="p">;</span>
        <span class="nl">-webkit-box-direction</span><span class="p">:</span> <span class="n">reverse</span> <span class="cp">!important</span><span class="p">;</span>
        <span class="nl">-webkit-flex-direction</span><span class="p">:</span> <span class="n">row-reverse</span> <span class="cp">!important</span><span class="p">;</span>
        <span class="nl">-ms-flex-direction</span><span class="p">:</span> <span class="n">row-reverse</span> <span class="cp">!important</span><span class="p">;</span>
        <span class="nl">flex-direction</span><span class="p">:</span> <span class="n">row-reverse</span> <span class="cp">!important</span>
    <span class="p">}</span>

    <span class="nc">.justify-content-center-star</span> <span class="p">{</span>
        <span class="nl">-webkit-box-pack</span><span class="p">:</span> <span class="nb">center</span> <span class="cp">!important</span><span class="p">;</span>
        <span class="nl">-webkit-justify-content</span><span class="p">:</span> <span class="nb">center</span> <span class="cp">!important</span><span class="p">;</span>
        <span class="nl">-ms-flex-pack</span><span class="p">:</span> <span class="nb">center</span> <span class="cp">!important</span><span class="p">;</span>
        <span class="nl">justify-content</span><span class="p">:</span> <span class="nb">center</span> <span class="cp">!important</span>
    <span class="p">}</span>

    <span class="nc">.d-flex-star</span> <span class="p">{</span>
        <span class="nl">display</span><span class="p">:</span> <span class="n">-webkit-box</span> <span class="cp">!important</span><span class="p">;</span>
        <span class="nl">display</span><span class="p">:</span> <span class="n">-webkit-flex</span> <span class="cp">!important</span><span class="p">;</span>
        <span class="nl">display</span><span class="p">:</span> <span class="n">-ms-flexbox</span> <span class="cp">!important</span><span class="p">;</span>
        <span class="nl">display</span><span class="p">:</span> <span class="n">flex</span> <span class="cp">!important</span>
    <span class="p">}</span>

    <span class="nc">.starrating</span> <span class="o">&gt;</span> <span class="nt">input</span> <span class="p">{</span>
        <span class="nl">display</span><span class="p">:</span> <span class="nb">none</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="c">/* Remove radio buttons */</span>

    <span class="nc">.starrating</span> <span class="o">&gt;</span> <span class="nt">label</span><span class="nd">:before</span> <span class="p">{</span>
        <span class="nl">content</span><span class="p">:</span> <span class="s1">"\f005"</span><span class="p">;</span> <span class="c">/* Star */</span>
        <span class="nl">margin</span><span class="p">:</span> <span class="m">2px</span><span class="p">;</span>
        <span class="nl">font-size</span><span class="p">:</span> <span class="m">8em</span><span class="p">;</span>
        <span class="nl">font-family</span><span class="p">:</span> <span class="n">FontAwesome</span><span class="p">;</span>
        <span class="nl">display</span><span class="p">:</span> <span class="n">inline-block</span><span class="p">;</span>
    <span class="p">}</span>

    <span class="nc">.starrating</span> <span class="o">&gt;</span> <span class="nt">label</span> <span class="p">{</span>
        <span class="nl">color</span><span class="p">:</span> <span class="m">#222222</span><span class="p">;</span> <span class="c">/* Start color when not clicked */</span>
    <span class="p">}</span>

    <span class="nc">.starrating</span> <span class="o">&gt;</span> <span class="nt">input</span><span class="nd">:checked</span> <span class="o">~</span> <span class="nt">label</span> <span class="p">{</span>
        <span class="nl">color</span><span class="p">:</span> <span class="m">#ffca08</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="c">/* Set yellow color when star checked */</span>

    <span class="nc">.starrating</span> <span class="o">&gt;</span> <span class="nt">input</span><span class="nd">:hover</span> <span class="o">~</span> <span class="nt">label</span> <span class="p">{</span>
        <span class="nl">color</span><span class="p">:</span> <span class="m">#ffca08</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="c">/* Set yellow color when star hover */</span>

<span class="nt">&lt;/style&gt;</span>



    

    




</head>

<body>

    <dot:ContentPlaceHolder ID="MainContent" />

</body>

</html>

Próximos pasos…

Con estas instrucciones hemos aprendido a crear un sistema de clasificación del 1 al 5 a través de estrellas con DotVVM y estilos CSS.

El código fuente de esta implementación se lo puede encontrar en este repositorio: DotVVM Star Rating.

Recursos adicionales

¿Deseas saber cuáles son los pasos para crear una aplicación DotVVM? Para ello puedes revisar este articulo: Pasos para crear una aplicación MVVM (Model-View-Viewmodel) con DotVVM y ASP.NET Core.

¿Quieres dar tus primeros pasos en el desarrollo de aplicaciones web con ASP.NET Core y DotVVM? Aprende más en este tutorial: DotVVM y ASP.NET Core: Implementación de operaciones CRUD.

¡Gracias!
Nos vemos en Twitter!! :)