Click here to Skip to main content
Click here to Skip to main content
Go to top

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

, 11 Jul 2012
Rate this:
Please Sign up or sign in to vote.
This article will show how to create a Rating control in ASP.NET using Buttons, JavaScript, and CSS.

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

License

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

Share

About the Author

ASP.NETGuy

United States United States
No Biography provided

Comments and Discussions

 
GeneralMy vote of 2 Pinmemberluffykund19-Mar-14 4:53 
GeneralMy vote of 1 PinmemberR koyee27-Mar-13 22:33 
Questionget value from rating Pinmembersabodh2-Feb-13 6:18 
QuestionSolved the problem PinmemberAmandeep wadhwa29-Nov-12 19:03 
QuestionFacing the problem again... PinmemberAmandeep wadhwa29-Nov-12 18:24 
QuestionFacing the problem PinmemberAmandeep wadhwa29-Nov-12 17:45 
GeneralMy vote of 3 PinmemberRobertaMac18-Oct-12 13:59 
GeneralMy vote of 3 PinmemberPeter_Olson10-Jul-12 9:01 
GeneralRe: My vote of 3 PinmemberASP.NETGuy10-Jul-12 18:58 
GeneralRe: My vote of 3 PinmemberPeter_Olson10-Jul-12 21:41 
GeneralRe: My vote of 3 PinmemberASP.NETGuy10-Jul-12 23:03 
GeneralRe: My vote of 3 PinmemberQuentin in SA14-Oct-13 20:06 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

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

| Advertise | Privacy | Mobile
Web02 | 2.8.140916.1 | Last Updated 11 Jul 2012
Article Copyright 2012 by ASP.NETGuy
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid