Post
Ask Question

Star Rating With DotVVM And CSS

Today there are many websites and online stores that have evaluation systems and interactive elements so that visitors and customers can make a rating on products, services or companies through reviews, usually a 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:
  1. 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.
  1. <dot:RadioButton id="star5" CheckedItem="{value: Rating}" CheckedValue="5" /> 
  2. <label for="star5" title="5 Stars">5</label>  

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

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

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

  13. <dot:RadioButton id="star1" CheckedItem="{value: Rating}" CheckedValue="1" /> 
  14. <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,
 
Star rating with DotVVM and CSS
 

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,
  1. <dot:RadioButton id="star5" CheckedItem="{value: Rating}" CheckedValue="5" />   
HTML code,
  1. <input id="star5" type="radio" name="ko_unique_1" data-bind="checked: Rating, checkedValue: '5', attr: {}" value="5">   
Our result will be as follows,
 
Star rating with DotVVM and CSS
 
Source code
 
DefaultViewModel.cs
  1. namespace StarRating.ViewModels  
  2. {  
  3.     public class DefaultViewModel : MasterPageViewModel  
  4.     {  
  5.     public string Title { get; set;}  
  6.         public string Rating { get; set; }  
  7.   
  8.         public DefaultViewModel()  
  9.     {  
  10.         Title = "DotVVM Star Rating";  
  11.             Rating = "1";  
  12.     }  
  13.     }  
  14. }   
Default.dothtml 
  1. @viewModel StarRating.ViewModels.DefaultViewModel, StarRating  
  2. @masterPage Views/MasterPage.dotmaster  
  3. <dot:Content ContentPlaceHolderID="MainContent">  
  4.   
  5.     <h1><b>{{value: Title}}</b></h1>  
  6.   
  7.     <div class="starrating risingstar d-flex-star justify-content-center-star flex-row-reverse-star">  
  8.         <dot:RadioButton id="star5" CheckedItem="{value: Rating}" CheckedValue="5" />  
  9.         <label for="star5" title="5 Stars">5</label>  
  10.   
  11.         <dot:RadioButton id="star4" CheckedItem="{value: Rating}" CheckedValue="4" />  
  12.         <label for="star4" title="4 Stars">4</label>  
  13.   
  14.         <dot:RadioButton id="star3" CheckedItem="{value: Rating}" CheckedValue="3" />  
  15.         <label for="star3" title="3 Stars">3</label>  
  16.   
  17.         <dot:RadioButton id="star2" CheckedItem="{value: Rating}" CheckedValue="2" />  
  18.         <label for="star2" title="2 Stars">2</label>  
  19.   
  20.         <dot:RadioButton id="star1" CheckedItem="{value: Rating}" CheckedValue="1" />  
  21.         <label for="star1" title="1 Stars">1</label>  
  22.     </div>  
  23.   
  24.     <br />  
  25.     <b>Selected rating: <font size="6" color="#004C88"> {{value: Rating}} </font> </b>  
  26.   
  27. </dot:Content>  
MasterPage.dotmaster
  1. @viewModel StarRating.ViewModels.MasterPageViewModel, StarRating  
  2. <!DOCTYPE html>  
  3.   
  4. <html lang="en" xmlns="http://www.w3.org/1999/xhtml">  
  5. <head>  
  6.     <meta charset="utf-8" />  
  7.     <title>DotVVM Star rating</title>  
  8.   
  9.     <style>  
  10.         @import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);  
  11.   
  12.         .flex-row-reverse-star {  
  13.             -webkit-box-orient: horizontal !important;  
  14.             -webkit-box-direction: reverse !important;  
  15.             -webkit-flex-direction: row-reverse !important;  
  16.             -ms-flex-direction: row-reverse !important;  
  17.             flex-direction: row-reverse !important  
  18.         }  
  19.   
  20.         .justify-content-center-star {  
  21.             -webkit-box-pack: center !important;  
  22.             -webkit-justify-content: center !important;  
  23.             -ms-flex-pack: center !important;  
  24.             justify-content: center !important  
  25.         }  
  26.   
  27.         .d-flex-star {  
  28.             display: -webkit-box !important;  
  29.             display: -webkit-flex !important;  
  30.             display: -ms-flexbox !important;  
  31.             display: flex !important  
  32.         }  
  33.   
  34.         .starrating > input {  
  35.             display: none;  
  36.         }  
  37.         /* Remove radio buttons */  
  38.   
  39.         .starrating > label:before {  
  40.             content: "\f005"; /* Star */  
  41.             margin: 2px;  
  42.             font-size: 8em;  
  43.             font-family: FontAwesome;  
  44.             display: inline-block;  
  45.         }  
  46.   
  47.         .starrating > label {  
  48.             color: #222222; /* Start color when not clicked */  
  49.         }  
  50.   
  51.         .starrating > input:checked ~ label {  
  52.             color: #ffca08;  
  53.         }  
  54.         /* Set yellow color when star checked */  
  55.   
  56.         .starrating > input:hover ~ label {  
  57.             color: #ffca08;  
  58.         }  
  59.         /* Set yellow color when star hover */  
  60.   
  61.     </style>  
  62. </head>  
  63. <body>  
  64.     <dot:ContentPlaceHolder ID="MainContent" />  
  65. </body>  
  66. </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
Thank you.


Similar Articles