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

ASP.NETGuy

Rate me:

3.91/5 (21 votes)

11 Jul 2012CPOL2 min read

58.4K

2.4K

This article will show how to create a Rating control in ASP.NET using Buttons, JavaScript, and 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:

Empty: Will set the background of the button to an empty star.
Filled: Will set the background of the button to a filled star.

CSS

<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.

HTML

<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.

JavaScript

<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 !!

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Written By

ASP.NETGuy

United States

This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.