Introduction
This is another way to create / show Rating in ASP.NET page using Buttons, JavaScript and CSS.
Background
There are many ways of implementing a Rating control in ASP.NET / HTML page.
But many of the solutions use complex coding or Custom Controls or AJAX Toolkit control.
This is where I came up with a simple approach to show Rating (1-5) using Command Buttons, CSS and little JavaScript code.
How it works
It is very simple:
- Take 2 Images one empty star and another filled star.
- Create two CSS styles. One style will set the back ground to empty star. Another style will set the Background to filled star.
- Create 5 Buttons and set the background to empty star. So, when the page loads, 5 empty stars will be shown.
- Call javascript function on mouse hover and client click events of each button. With in the function, set the CSS style of each button to empty image / filled image.
Step 1
Take 2 Images. 1 - an empty star. 2- a filled star. (Doesnt require much skills. Can be created in Paint / obtain from Internet)
Step 2
Create the below Style sheet script. This basically has two styles:
- Empty: Will set the background of the button to an empty star.
- Filled: Will set the background of the button to a filled star.
<style type="text/css">
.Empty
{
background: url("../Empty.gif") no-repeat right top;
}
.Empty:hover
{
background: url("../Filled.gif") no-repeat right top;
}
.Filled
{
background: url("../Filled.gif") no-repeat right top;
}
</style>
Step 3
Create Buttons that resemble the Rating control. The below code will display 5 stars whose initial styling is set to "Empty".
OnClientClick and onmoseover a Java Script function is being called. A value in between 1-5 is being passed as arguement to this java script to identify the rating.
<form id="form1" runat="server">
<asp:Button BorderStyle="None" ID="Rating1" onmouseover="return Decide(1);" OnClientClick="return Decide(1);"
Height="20px" Width="20px" CssClass="Empty" runat="server" />
<asp:Button BorderStyle="None" ID="Rating2" onmouseover="return Decide(2);" OnClientClick="return Decide(2);"
Height="20px" Width="20px" CssClass="Empty" runat="server" />
<asp:Button BorderStyle="None" ID="Rating3" onmouseover="return Decide(3);" OnClientClick="return Decide(3);"
Height="20px" Width="20px" CssClass="Empty" runat="server" />
<asp:Button BorderStyle="None" ID="Rating4" onmouseover="return Decide(4);" OnClientClick="return Decide(4);"
Height="20px" Width="20px" CssClass="Empty" runat="server" />
<asp:Button BorderStyle="None" ID="Rating5" onmouseover="return Decide(5);" OnClientClick="return Decide(5);"
Height="20px" Width="20px" CssClass="Empty" runat="server" />
<br />
<br />
<asp:Label ID="lblRate" runat="server" Text=""></asp:Label>
</form>
Step 4
Write Java Script function to control the Styling based on the selected button.
<script type="text/javascript">
function Decide(option) {
var temp = "";
document.getElementById('lblRate').innerText = "";
if (option == 1) {
document.getElementById('Rating1').className = "Filled";
document.getElementById('Rating2').className = "Empty";
document.getElementById('Rating3').className = "Empty";
document.getElementById('Rating4').className = "Empty";
document.getElementById('Rating5').className = "Empty";
temp = "1-Poor";
}
if (option == 2) {
document.getElementById('Rating1').className = "Filled";
document.getElementById('Rating2').className = "Filled";
document.getElementById('Rating3').className = "Empty";
document.getElementById('Rating4').className = "Empty";
document.getElementById('Rating5').className = "Empty";
temp = "2-Ok";
}
if (option == 3) {
document.getElementById('Rating1').className = "Filled";
document.getElementById('Rating2').className = "Filled";
document.getElementById('Rating3').className = "Filled";
document.getElementById('Rating4').className = "Empty";
document.getElementById('Rating5').className = "Empty";
temp = "3-Fair";
}
if (option == 4) {
document.getElementById('Rating1').className = "Filled";
document.getElementById('Rating2').className = "Filled";
document.getElementById('Rating3').className = "Filled";
document.getElementById('Rating4').className = "Filled";
document.getElementById('Rating5').className = "Empty";
temp = "4-Good";
}
if (option == 5) {
document.getElementById('Rating1').className = "Filled";
document.getElementById('Rating2').className = "Filled";
document.getElementById('Rating3').className = "Filled";
document.getElementById('Rating4').className = "Filled";
document.getElementById('Rating5').className = "Filled";
temp = "5-Nice";
}
document.getElementById('lblRate').innerText = temp;
return false;
}
</script>
Step 5
Enjoy the result.
Conclusion
Please see the attachment to get the sample code. This is pure HTML with Javascript and doesnt require any C# / code behind.
This is another simple way of Showing Rating in ASP.NET /HTML Page.
If you find any issues / please post them. If you like it, please rate it !!
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.