Simple way to Design Rating in ASP.NET using JavaScript, CSS

• Download source code

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:

1. Empty: Will set the background of the button to an empty star.
2. 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 !!