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">
  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) {
  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" %>
  3. <!DOCTYPE html>
  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>
  13. <script>
  14. $(document).ready(function () {
  15. $("#input-21b").on("rating.change", function (event, value, caption) {
  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>
  28. <div class="row">
  29. <div class="col-lg-12">
  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>
  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;
  8. namespace RatingControl
  9. {
  10. public partial class index : System.Web.UI.Page
  11. {
  12. protected void Page_Load(object sender, EventArgs e)
  13. {
  15. }
  16. public void saveRating()
  17. {
  18. string val= hdfRatingValue.Value;
  19. }
  20. }
  21. }
Output