Star rating with DotVVM and CSS

Today there are many websites and online stores that have evaluation systems and interaction elements so that visitors and customers can make a rating on products, services or companies through reviews, usually 1 to 5 scale.

The classification style that most web pages and applications use is Star Rating.

In this blog we will learn how to implement a simple star system with DotVVM - ASP.NET Core and CSS.

DotVVM website

Viewmodel

In the Viewmodel we will define two attributes for our website:

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

Title for the page title and Rating to save the value selected by the user in the star rating system. Also, in this variable we can default to the predefined value that the system will have, in this case it will be the value of 1. For future applications, for example, if you want to retrieve the rating made by a particular user from the database, the value must be assigned to this Rating attribute.

View

In the page view, for the classification system, the DotVVM RadioButton control will be used for each of the classification elements, in this case, there are 5 in 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>

In addition, a label is also added to each of the components of the RadioButton through its Id. So far, we have something like this:

CSS Styles

So far we have our ranking system, but we need to add style to the page, especially to the scoring section, for this we will add a font of styles to meet these objectives.

Today, there are a variety of packages that provide us with a font of styles and icons for our applications. For our case we will use Font Awesome, to use star-shaped icons to replace the traditional circular icon of the RadioButton. The font of styles can be found in:

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

With the implementation of these styles, we will achieve the following objectives:

• Remove radio buttons (circular shapes).
• Assign star-shaped icons on each of the DotVVM RadioButtons.
• Set a starting black color for unselected stars.
• Set a yellow color when the star is marked.
• Set a yellow color when the star hovers the mouse.

A very important aspect to mention is about DotVVM controls, which will be translated into HTML tags that will allow you to apply styles and properties over these HTML tags. For example:

DotVVM code:

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

HTML code:

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

Our result will be as follows:

Source code

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>

    <style>
        @import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);

        .flex-row-reverse-star {
            -webkit-box-orient: horizontal !important;
            -webkit-box-direction: reverse !important;
            -webkit-flex-direction: row-reverse !important;
            -ms-flex-direction: row-reverse !important;
            flex-direction: row-reverse !important
        }

        .justify-content-center-star {
            -webkit-box-pack: center !important;
            -webkit-justify-content: center !important;
            -ms-flex-pack: center !important;
            justify-content: center !important
        }

        .d-flex-star {
            display: -webkit-box !important;
            display: -webkit-flex !important;
            display: -ms-flexbox !important;
            display: flex !important
        }

        .starrating > input {
            display: none;
        }
        /* Remove radio buttons */

        .starrating > label:before {
            content: "\f005"; /* Star */
            margin: 2px;
            font-size: 8em;
            font-family: FontAwesome;
            display: inline-block;
        }

        .starrating > label {
            color: #222222; /* Start color when not clicked */
        }

        .starrating > input:checked ~ label {
            color: #ffca08;
        }
        /* Set yellow color when star checked */

        .starrating > input:hover ~ label {
            color: #ffca08;
        }
        /* Set yellow color when star hover */

    </style>



</head>
<body>
    <dot:ContentPlaceHolder ID="MainContent" />
</body>
</html>

What's next?

With these instructions we have learned how to create a rating system from 1 to 5 through stars with DotVVM and CSS styles.

The source code for this implementation can be found in this repository: DotVVM Star Rating

Additional resources

Do you want to know what are the steps to create a DotVVM app? To do this you can review this article: Steps to create an MVVM application (Model-View-Viewmodel) with DotVVM and ASP.NET Core.

Do you want to take your first steps in developing web applications with ASP.NET Core and DotVVM? Learn more in this tutorial: DotVVM and ASP.NET Core: Implementing CRUD operations.

Thank you!
See you on Twitter!! :)