How to Create Rating Control in ASP.Net With Bootstrap

Sesuraj
9y
46.4k
0
3

100

Article

RatingControl.zip

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.

<head runat="server">
<title></title>
<link href="Bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="Bootstrap/css/star-rating.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="Bootstrap/js/star-rating.js"></script>
</head>

Step 3

Now call your rating control. Before calling your rating control please learn how to use Bootstrap from my previous article.

<div class="row">
<div class="col-lg-12">
<input id="input-21a" value="0" type="number" class="rating" data-symbol="*" min=0 max=5 step=0.5 data-size="xl" >
<hr>
<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">
<hr>
<input id="input-21c" value="0" type="number" class="rating" min=0 max=8 step=0.5 data-size="xl" data-stars="8">
<hr>
<input id="input-21d" value="2" type="number" class="rating" min=0 max=5 step=0.5 data-size="sm">
<hr>
<input id="input-21e" value="0" type="number" class="rating" min=0 max=5 step=0.5 data-size="xs" >
<hr>
</div>
</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:

<script>
$(document).ready(function () {
$("#input-21b").on("rating.change", function (event, value, caption) {
alert("You rated: " + value + " = " + $(caption).text());
});
});
</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.

<asp:HiddenField ID="hdfRatingValue" runat="server" />

Now assign your rated value into your hidden field. Let's see how to do this using jQuery.

<script>
$(document).ready(function () {
$("#input-21b").on("rating.change", function (event, value, caption) {
var ratingValue = $('#<%=hdfRatingValue.ClientID%>').val();
ratingValue = value;
alert(ratingValue);
});
});
</script>

Now you can get the rating value from code behind. Type hdfRating.value and save your value to the database.

Full Example

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="index.aspx.cs" Inherits="RatingControl.index" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="Bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="Bootstrap/css/star-rating.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="Bootstrap/js/star-rating.js"></script>
<script>
$(document).ready(function () {
$("#input-21b").on("rating.change", function (event, value, caption) {
var ratingValue = $('#<%=hdfRatingValue.ClientID%>').val();
ratingValue = value;
alert(ratingValue);
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div class="row">
<div class="col-lg-12">
<input id="input-21a" value="0" type="number" class="rating" data-symbol="*" min=0 max=5 step=0.5 data-size="xl" >
<hr>
<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">
<hr>
<input id="input-21c" value="0" type="number" class="rating" min=0 max=8 step=0.5 data-size="xl" data-stars="8">
<hr>
<input id="input-21d" value="2" type="number" class="rating" min=0 max=5 step=0.5 data-size="sm">
<hr>
<input id="input-21e" value="0" type="number" class="rating" min=0 max=5 step=0.5 data-size="xs" >
<hr>
</div>
</div>
</div>
<asp:HiddenField ID="hdfRatingValue" runat="server" />
</form>
</body>
</html>