Post
Ask Question

How to Create Rating Control in ASP.Net With Bootstrap

Introduction
 
This article will help you to create a rating control in ASP.Net with Bootstrap instead of AJAX rating control.
 
Step 1

Download the CSS and JavaScript files from github.com.

Step 2
 
Open your Visual Studio, then add your downloaded file into your project then add index.aspx page and call your necessary files within the head tag from that downloaded folder.
  1. <head runat="server">  
  2.     <title></title>  
  3.     <link href="Bootstrap/css/bootstrap.min.css" rel="stylesheet" />  
  4.     <link href="Bootstrap/css/star-rating.css" rel="stylesheet" />  
  5.     <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  
  6.     <script src="Bootstrap/js/star-rating.js"></script>  
  7. </head>  
Step 3
 
Now call your rating control. Before calling your rating control please learn how to use Bootstrap from my previous article.
  1. <div class="row">  
  2.   <div class="col-lg-12">  
  3.    
  4.   <input id="input-21a" value="0" type="number" class="rating" data-symbol="*" min=0 max=5 step=0.5 data-size="xl" >  
  5.   <hr>  
  6.   <input id="input-21b" type="number" class="rating" min=0 max=5 step=0.5 data-glyphicon="false" data-star-captions="{}" data-default-caption="{rating} Stars" data-size="lg">  
  7.   <hr>  
  8.   <input id="input-21c" value="0" type="number" class="rating" min=0 max=8 step=0.5 data-size="xl" data-stars="8">  
  9.   <hr>  
  10.   <input id="input-21d" value="2" type="number" class="rating" min=0 max=5 step=0.5 data-size="sm">  
  11.   <hr>  
  12.   <input id="input-21e" value="0" type="number" class="rating" min=0 max=5 step=0.5 data-size="xs" >  
  13.   <hr>  
  14.   </div>  
  15. </div>  
Here, value is your filled start on page load, min is the minimum star value, max is the maximum star or maximum rating, data-size is your rating control size. 
For your better understanding please visit here.
 
Step 4
 
Now we can see how to get the rated value from this rating control using jQuery as in the following:
  1. <script>  
  2.        $(document).ready(function () {  
  3.            $("#input-21b").on("rating.change", function (event, value, caption) {  
  4.                alert("You rated: " + value + " = " + $(caption).text());  
  5.            });  
  6.        });  
  7.    </script>  
Step 5
 
Let's see how to get the rated value from code behind in C#. Add one hidden field in your design page and assign your rated value into your hidden field.
  1. <asp:HiddenField ID="hdfRatingValue" runat="server" />  
Now assign your rated value into your hidden field. Let's see how to do this using jQuery. 
  1. <script>  
  2.        $(document).ready(function () {  
  3.            $("#input-21b").on("rating.change", function (event, value, caption) {  
  4.                  
  5.                var ratingValue = $('#<%=hdfRatingValue.ClientID%>').val();  
  6.                ratingValue = value;  
  7.                alert(ratingValue);  
  8.            });  
  9.        });  
  10.    </script>  
Now you can get the rating value from code behind. Type hdfRating.value and save your value to the database.
 
Full Example
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="index.aspx.cs" Inherits="RatingControl.index" %>  
  2.   
  3. <!DOCTYPE html>  
  4.   
  5. <html xmlns="http://www.w3.org/1999/xhtml">  
  6. <head runat="server">  
  7.     <title></title>  
  8.     <link href="Bootstrap/css/bootstrap.min.css" rel="stylesheet" />  
  9.     <link href="Bootstrap/css/star-rating.css" rel="stylesheet" />  
  10.     <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  
  11.     <script src="Bootstrap/js/star-rating.js"></script>  
  12.   
  13.     <script>  
  14.         $(document).ready(function () {  
  15.             $("#input-21b").on("rating.change", function (event, value, caption) {  
  16.                   
  17.                 var ratingValue = $('#<%=hdfRatingValue.ClientID%>').val();  
  18.                 ratingValue = value;  
  19.                 alert(ratingValue);  
  20.             });  
  21.         });  
  22.     </script>  
  23. </head>  
  24. <body>  
  25.     <form id="form1" runat="server">  
  26.     <div>  
  27.          
  28.         <div class="row">  
  29. <div class="col-lg-12">  
  30.      
  31.     <input id="input-21a" value="0" type="number" class="rating" data-symbol="*" min=0 max=5 step=0.5 data-size="xl" >  
  32.     <hr>  
  33.     <input id="input-21b" type="number" class="rating" min=0 max=5 step=0.5 data-glyphicon="false" data-star-captions="{}" data-default-caption="{rating} Stars" data-size="lg">  
  34.     <hr>  
  35.     <input id="input-21c" value="0" type="number" class="rating" min=0 max=8 step=0.5 data-size="xl" data-stars="8">  
  36.     <hr>  
  37.     <input id="input-21d" value="2" type="number" class="rating" min=0 max=5 step=0.5 data-size="sm">  
  38.     <hr>  
  39.     <input id="input-21e" value="0" type="number" class="rating" min=0 max=5 step=0.5 data-size="xs" >  
  40.     <hr>  
  41.     </div>  
  42.         </div>  
  43.       
  44.     </div>  
  45.          <asp:HiddenField ID="hdfRatingValue" runat="server" />  
  46.     </form>  
  47. </body>  
  48. </html>  
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.UI;  
  6. using System.Web.UI.WebControls;  
  7.   
  8. namespace RatingControl  
  9. {  
  10.     public partial class index : System.Web.UI.Page  
  11.     {  
  12.         protected void Page_Load(object sender, EventArgs e)  
  13.         {  
  14.   
  15.         }  
  16.         public void saveRating()  
  17.         {  
  18.           string val= hdfRatingValue.Value;  
  19.         }  
  20.     }  
  21. }  
Output
 
 


Similar Articles