Kilone.com

Rating Control in .NET without AJAX

by Omar AlBadri on 10/8/2008 1:11:00 PM

Need a rating control on a .NET system with out using AJAX? Read how here...

Rating Control in .NET without AJAX

I recently got a project where a client wanted to add a rating control to his article system. No problem I though, thinking I could use the AJAX control toolkit and would have the project done in a hour or two. When I finally got the source code I realized he was using a older version of DotNetNuke and updating the AJAX dll to 3.5 was causing all kind of errors. I realized that I would have to build one using only asp.NET controls and a little JavaScript and CSS

 

Getting Started

 You will need the following to get use this post

When we are done with this control we should get something that looks like this:

 

 

 Where when you hover over the stars they should light up, and when you select one they should record your request(in a post back)

 

1. The Control

Start by creating a web project and adding a user control called RatingControl.ascx.

Open up RatingControl.ascx and go to Source view
 

2. The HTML

The easiest way to get everything to line up is to use <ul> and  <li> and some sort of .NET control. One would think that the easiest way to do this would be with the ASP.NET ImageButton. The problem with this control is a) it requires a image in the src property and b) it acts funny in firefox.

Since we will be using CSS lets create a list of 5 Link buttons like so :
<ul id="ratinglist">
<li><asp:LinkButton ID="OneStar" runat="server" CssClass="EmptyStar1" ></asp:LinkButton> </li>
<li><asp:LinkButton ID="TwoStar" runat="server" CssClass="EmptyStar2" ></asp:LinkButton></li>
<li><asp:LinkButton ID="ThreeStar" runat="server" CssClass="EmptyStar3"></asp:LinkButton></li>
<li><asp:LinkButton ID="FourStar" runat="server" CssClass="EmptyStar4" ></asp:LinkButton></li>
<li><asp:LinkButton ID="FiveStar" runat="server" CssClass="EmptyStar5" ></asp:LinkButton></li>
</ul>

  1. Notice the ID of each of the LinkButtons, this is so we can capture when star was clicked
  2. Notice the CssClass are all different this will be important later
     

3. The Click events

The first thing we want to do is to register what star has been clicked and shine the proceeding stars. Double click on each of the link button so you create the click events. In the click events all what we are going to to do is to change the CSS Class of the control and then do any addition processing (ie update the data base etc etc)

protected void OneStar_Click(object sender, EventArgs e) {
OneStar.CssClass = "FilledStar"; }
protected void TwoStar_Click(object sender, EventArgs e) {
OneStar.CssClass = "FilledStar";
TwoStar.CssClass = "FilledStar"; }
protected void ThreeStar_Click(object sender, EventArgs e) {
OneStar.CssClass = "FilledStar";
TwoStar.CssClass = "FilledStar";
ThreeStar.CssClass = "FilledStar";
}
protected void FourStar_Click(object sender, EventArgs e)
{
OneStar.CssClass = "FilledStar";
TwoStar.CssClass = "FilledStar";
ThreeStar.CssClass = "FilledStar";
FourStar.CssClass = "FilledStar";
}
protected void FiveStar_Click(object sender, EventArgs e)
{
OneStar.CssClass = "FilledStar";
TwoStar.CssClass = "FilledStar";
ThreeStar.CssClass = "FilledStar";
FourStar.CssClass = "FilledStar";
FiveStar.CssClass = "FilledStar";
}

4. The CSS

Now we have everything setup its time to add the CSS. All we are going to do is add a Empty star image to the Empty star classes and a filled start to the FilledStar Class. Also we need some CSS to fix up the control: 

#ratinglist li
{
display: inline; 
}
 
a
{
    display:block;
    float:left;
}
 
.EmptyStar1
{
    background : url(../images/EmptyStar.png) no-repeat;
    width:13px;
    height:12px;
 
}
 
.EmptyStar2
{
    background         : url(../images/EmptyStar.png) no-repeat;
    width:13px;
    height:12px;
 
}
 
.EmptyStar3
{
    background         : url(../images/EmptyStar.png) no-repeat;
    width:13px;
    height:12px;
 
}
 
.EmptyStar4
{
    background         : url(../images/EmptyStar.png) no-repeat;
    width:13px;
    height:12px;
 
}
 
 
.EmptyStar5
{
    background         : url(../images/EmptyStar.png) no-repeat;
    width:13px;
    height:12px;
 
}
  
.EmptyStar1:Hover
{
     background         : url(../images/FilledStar.png) no-repeat;
     width:13px;
     height:12px;
}
  
.FilledStar
{
    background         : url(../images/FilledStar.png) no-repeat;
     width:13px;
     height:12px;
}


 

 Go ahead and add the User Control to the Default.aspx page and run the project. You can know click on a star and it should stay hilighted and it should highlight the previous stars. Now lets use some JavaScript to hilight the preceding stars when you hover on one.
 

5. The JavaScript

If you noticed we named the CSS Class for each control EmptyStar1, EmptyStar2, etc the reason for this was to make out JavaScript easier to highlight the stars. We will get a number of starts to Light up OR unlight and change a property of the CSS to make it light up. Add the following code to the top of the RatingControl.ascx

<script type="text/JavaScript"> 
function HiStars(stars)
{
    var Class = '.EmptyStar';
    var element ='background';
    var value ='url(../images/FilledStar.png) no-repeat';
    var cssRules;
 
    if (document.all)
    {
        cssRules = 'rules';
    }
    else if (document.getElementById)
    {
        cssRules = 'cssRules';
    }
   
    for(var i =1;i<=stars;i++)
    {
        theClass = Class + i.toString();
       
        for (var S = 0; S < document.styleSheets.length; S++)
        {
            for (var R = 0; R < document.styleSheets[S][cssRules].length; R++)
            {
                if (document.styleSheets[S][cssRules][R].selectorText == theClass)
                {
                    document.styleSheets[S][cssRules][R].style[element] = value;
                }
            }
        }
     }
    
 }
   
function UnHiStars(stars)
{
    var Class = '.EmptyStar';
    var element ='background';
    var value ='url(../images/EmptyStar.png) no-repeat';
    var cssRules;

    if (document.all)
    {
        cssRules = 'rules';
    }
    else if (document.getElementById)
    {
        cssRules = 'cssRules';
    }
   
    for(var i =1;i<=stars;i++)
    {
        theClass = Class + i.toString();
       
        for (var S = 0; S < document.styleSheets.length; S++)
        {
            for (var R = 0; R < document.styleSheets[S][cssRules].length; R++)
            {
                if (document.styleSheets[S][cssRules][R].selectorText == theClass)
                {
                    document.styleSheets[S][cssRules][R].style[element] = value;
                }
            }
        }
     }
    
 }
</script> 

 In the above script we are seeing how many stars to light and replacing the BACKGROUND property of the CSS Element with the image of a FilledStar, then when we Roll off a star we replace that with a image of a empty star
 

6. Adding to the HTML

Now we need to finsh up with the HTML code and add two events: onmouseover and onmouseout that will call the javascript we created above and light or unlight the stars. We do not need to do this for the First Star  as we will user CSS instead.

 

  <ul id="ratinglist">  
    <li><asp:LinkButton ID="OneStar" Visible="true" runat="server" CssClass="EmptyStar1" onclick="OneStar_Click" ></asp:LinkButton> </li>
    <li><asp:LinkButton ID="TwoStar" runat="server" CssClass="EmptyStar2" onclick="TwoStar_Click" onmouseover="HiStars(2);" onmouseout="UnHiStars(2);" ></asp:LinkButton></li>
    <li><asp:LinkButton ID="ThreeStar" runat="server" CssClass="EmptyStar3" onmouseover="HiStars(3);" onmouseoutJavaScript="UnHiStars(3);"  onclick="ThreeStar_Click"></asp:LinkButton></li>
    <li><asp:LinkButton ID="FourStar" runat="server" CssClass="EmptyStar4" onclick="FourStar_Click" onmouseover="HiStars(4);" onmouseout="UnHiStars(4);"  ></asp:LinkButton></li>
    <li><asp:LinkButton ID="FiveStar" runat="server" CssClass="EmptyStar5" onmouseover="HiStars(5);" onmouseout="UnHiStars(5);"  onclick="FiveStar_Click" ></asp:LinkButton></li>     </ul>

7. Run the Project

Run the project now and you should see the stars light up when you hover over them.

8. Download

Download the project here and give me your feed back and comments below

 

 

 

 

Comments

    • Comment by: gfhhgf

    fhgfhfhfh

    • Comment by: Prahsant

    nice control but if u click on 5 starr rating u cant come back to 2nd star so ifu want to add that just remove css class on click event or change css class to emptyStar :P rating control roxxx :)

    • Comment by: sdfds

    sdfs

    • Comment by: Mojtaba

    message from IRAN :)

    thanks thats great

    try more, me 2

Post your comment

Thanks for your comments

Be nice ;)

  • Comment