Click here to Skip to main content
Click here to Skip to main content
Search within:



 
Comments & Discussions (31)

ASP.NET Rating Control

By , 18 Apr 2011
 

Introduction

There are many free rating controls on the internet, but I didn't find any control which fits these features:

  • Works well in UpdatePanel, GridView
  • Easy to customize UI and behavior
  • Auto generates JavaScript (does not need an external JS file)

So I decided to write an ASP.NET custom control as per my requirements.

Using the Code

How to use this control?

  1. Add a reference to the control,
  2. and: 
    <%@ Page Language="C#" AutoEventWireup="true" 
	Codebehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>

<%@ Register Namespace="ASPnetRater" Assembly="ASPnetRater" TagPrefix="cc" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <cc:Rater ID="Rater1" runat="server" 
		ImageOff="/assets/images/rating_grey_star.gif"
                Value="3" MaxValue="5" ImageOn="/assets/images/rating_red_star.gif"
                ToolTip="I'm a rater" OnCommand="Rater1_Command" 
		ImageOver="/assets/images/rating_yellow_star.gif"></cc:Rater>
        </div>
    </form>
</body>
</html>

This is the result:

Normal Status

Hover Status

Points of Interest

If you want the control to work well in an UpdatePanel, please make the control become a trigger of UpdatePanel: 

ScriptManager1.RegisterAsyncPostBackControl(Rater1);

History

  • April 08, 2009: First draft
  • April 15, 2010: Updates
    • Fixed a bug while posting back, as reported by yuyejian
    • Uses the Enabled property to enable/disable the control
    • Image's URL supports URLs like "~/assets/..."
  • June 29, 2010: Updated source code
    • Fixed bug reported by maorray (Doesn't save/load the value of the rater to ControlState)
  • April 18, 2011: Updated source code
    • Added CommandName property
    • Calls base.RaiseBubbleEvent() in OnCommand()
    • This update will help the parent control such as GridView, DataList and the like to catch OnItemCommand event.

License

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

About the Author

 taihip
Web Developer SEA-Solutions
Vietnam Vietnam
Member
No Biography provided

Article Top
 
Sign Up to vote   Poor Excellent
Add a reason or comment to your vote: x
Votes of 3 or less require a comment

Comments and Discussions

 
You must Sign In to use this message board.
Search this forum  
    Spacing  Noise  Layout  Per page   
First PrevNext
GeneralMy vote of 3memberTapan Parida18 Oct '12 - 2:12 
hiiiiii
Sign In·View Thread·Permalink
Question5 Stars!memberldsgomes16 Jun '12 - 7:14 
thank you! its not very often that you actually find a control that actually works the way you dream of! fantastic sample Smile | :)
Sign In·View Thread·Permalink
AnswerRe: 5 Stars!membervijayviki728 Nov '12 - 23:05 
DLL Not Download Howw to work..
Sign In·View Thread·Permalink
GeneralRe: 5 Stars!membertaihip28 Nov '12 - 23:59 
I guess that the package you downloaded doesn't contain compiled DLL. You have to compile it yourself.
Sign In·View Thread·Permalink
GeneralRe: 5 Stars!membervijayviki729 Nov '12 - 0:58 
UnKnown Server Tag Error ..any method ..
Sign In·View Thread·Permalink
GeneralRe: 5 Stars!membertaihip9 Dec '12 - 16:29 
Hi, I have got a sample for the control.
 
http://www.mediafire.com/?616zfkdu2w54cs6[^]
 
Hope this help.
 
Tai
Sign In·View Thread·Permalink
GeneralRe: 5 Stars!membervijayviki712 Dec '12 - 20:18 
Ya Thanks taihip !!..Nice
Sign In·View Thread·Permalink
QuestionExample needed on Rater Controlmemberpremalvala25 Jul '11 - 3:48 
Hi
 
I am new to asp programming, can I have a some working sample code for this control, as I am not sure how to call events and how to pass selected values.
 
any feedback will really help me to understand the control easily.
 
Response appreciated.
 
Regards,
Sign In·View Thread·Permalink
AnswerRe: Example needed on Rater Controlmembertaihip25 Jul '11 - 4:15 
Hi,
 
I have uploaded a working sample to http://www.mediafire.com/?aqk5qzek041jjwm[^]
 
Glad to help you.
Tai
Sign In·View Thread·Permalink
QuestionDataList [modified]memberzoran Jancic zozo18 Apr '11 - 1:46 
What modifications are required to use this control inside od DataList's item to select/edit DataList items? I would like to make DataList's item enter it's edit mode when a user clicks on ASPnetRater control that is inside of ItemTemplate. Something like this (this acctualy doesn't fire onItemCommand and doesn't make DataList's item enter editing mode):
 
            <asp:DataList ID="themes" runat="server" onitemcommand="themes_ItemCommand">                
                <ItemTemplate>
                        <cc:Rater 
                            ID="Rater1" 
                            runat="server" 
                            Value='0' 
                            MaxValue="5" 
                            ToolTip="Rate this!" 
                            ImageOff="~/images/EmptyStar.gif"
                            ImageOn="~/images/FilledStar.gif"
	                    ImageOver="~/images/FilledStar.gif"
                            commandName='EditItem'
                        ></cc:Rater>
                </ItemTemplate>
                <EditItemTemplate>
                        <cc:Rater 
                            ID="Rater1" 
                            runat="server" 
                            Value='0' 
                            MaxValue="5" 
                            ToolTip="Rate this!" 
                            ImageOff="~/images/EmptyStar.gif"
                            ImageOn="~/images/FilledStar.gif"
	                    ImageOver="~/images/FilledStar.gif"
                            commandName='UpdateItem'
                        ></cc:Rater>
                </EditItemTemplate>
            </asp:DataList>

modified on Monday, April 18, 2011 8:03 AM
Sign In·View Thread·Permalink
AnswerRe: DataListmembertaihip18 Apr '11 - 15:34 
Hi,
Actually, my control does not support CommandName property. I posted an update to make the control supports CommandName and can raise OnItemCommand well. Hope this help.
 
Note: you have to wait for the editor approves the update pack.
 
Tai
Sign In·View Thread·Permalink
GeneralRe: DataListmemberzoran Jancic zozo18 Apr '11 - 20:25 
That's great! Thank you very much!
Sign In·View Thread·Permalink
GeneralMouse OvermemberMember 42101356 Dec '10 - 21:41 
Hi,
 
I'm having a problem on the mouse over. It does not show the intended image specified in the ImageOver property.
 
Here is how my control looks like.
 
<cc:Rater ID="AspNetRater1" runat="server" ImageOff="Portals/_default/Skins/MinimalExtropy/rating/ratingStarEmpty.png"
                                    Value="4" MaxValue="5" ImageOn="Portals/_default/Skins/MinimalExtropy/rating/ratingStarFilled.png"
                                    ImageOver="Portals/_default/Skins/MinimalExtropy/rating/ratingStarFilled.png"
                                    ToolTip="I'm a rater"></cc:Rater>
 
The ImageOn property shows the image fine.
 
Thanks for the help.
Sign In·View Thread·Permalink
GeneralRe: Mouse Overmembertaihip6 Dec '10 - 21:56 
I tested on case: ImageOn == ImageOver. It works well on IE8, FF and Chrome. Which browser are you using?
Sign In·View Thread·Permalink
QuestionRe: Mouse OvermemberMember 42101356 Dec '10 - 22:15 
Hi,
 
I'm using IE 8 and site is in DNN.
 
Thanks.
Sign In·View Thread·Permalink
AnswerRe: Mouse Overmembertaihip6 Dec '10 - 22:31 
I cannot reproduce the bug on my machine. I guess that my JS script has a problem with your environment. Could you do some debugs? The script of hover event is generated in Rater.RenderHoverScript().
Sign In·View Thread·Permalink
GeneralRe: Mouse OvermemberMember 42101357 Dec '10 - 22:13 
Thanks, issue sorted. I added "~" in the image properties.
Sign In·View Thread·Permalink
Questionhow i get vote value in csmemberyuyejian13 Apr '10 - 21:41 
how i get vote value in cs
lbllabel.Text ="Your Rate this : "+ Rater1.Value+ " Star";???
Sign In·View Thread·Permalink
AnswerRe: how i get vote value in csmembertaihip14 Apr '10 - 5:36 
Yes, that's right Smile | :)
Sign In·View Thread·Permalink
GeneralRe: how i get vote value in csmemberyuyejian14 Apr '10 - 18:56 
but
1、 when I clicked that,it still show the value that in aspx set value
code is :
<cc:Rater ID="Rater1" runat="server"
ImageOff="passive_star.gif"
Value="2" MaxValue="5" ImageOn="end_star.gif"
ToolTip="I'm a rater" OnCommand="Rater1_Command"
ImageOver="active_star.gif"></cc:Rater>
nbsp;<asp:Label ID="lbllabel" runat="server">
2、how to lock options after clicked ??/
 
thanx a lot!!!!
Sign In·View Thread·Permalink
GeneralRe: how i get vote value in csmembertaihip15 Apr '10 - 2:58 
yeah, that's my fault. I fixed by adding "Value = ...":
 
void IPostBackEventHandler.RaisePostBackEvent(string eventArgument)
        {
            Value = Convert.ToInt32(eventArgument);
            OnCommand(new CommandEventArgs(this.UniqueID, Convert.ToInt32(eventArgument)));
        }
 
To disable rater:
if (Enabled)
                    {
                        writer.AddAttribute(HtmlTextWriterAttribute.Onclick, Page.ClientScript.GetPostBackClientHyperlink(this, i.ToString()));
                        writer.AddAttribute("onmouseover", "javascript:RatingHover(this)");
                        writer.AddAttribute("onmouseout", "javascript:RatingRefresh(this)");
                    }
 
I'll also update the rater to support image's URL "~/image/image_name.gif".
Thanks
Sign In·View Thread·Permalink
GeneralProblem with UpdatePanelmemberMember 39168742 Feb '10 - 2:03 
I've got the trigger set up, and it works fine.
 
However, I also need to add some Javascript to my update panel which reinitialises a TinyMCE editor on postbacks. As soon as I add this in a script block...
 

Sys.WebForms.PageRequestManager.getInstance().add_initializeRequest(<%=this.ClientID%>_InitializeRequestHandler);
function <%=this.ClientID%>_InitializeRequestHandler(sender, args) {
}
 
...it breaks the Rater. When I click on it, I'm getting:
Uncaught Sys.ArgumentNullException: Sys.ArgumentNullException: Value cannot be null.
Parameter name: postBackElement
 

Any ideas?
 
Mike
Sign In·View Thread·Permalink
GeneralRe: Problem with UpdatePanelmembertaihip2 Feb '10 - 5:11 
Hello Mike,
 
Sorry, I never faced this exception.
Have you tried to isolate the problem? the problem just show up when using the Rater?
If yes, I will take a look at the rater's JS.
 
Tai
Sign In·View Thread·Permalink
GeneralRe: Problem with UpdatePanelmemberMember 39168742 Feb '10 - 5:13 
Hi - yes, it's just when using the Rater.
 
I've had to work around it for now by using the AjaxControlToolkit "Rating" control rather than this, and that seems to work fine.
 
Thanks,
 
Mike
Sign In·View Thread·Permalink
GeneralRe: Problem with UpdatePanelmembertaihip3 Feb '10 - 3:47 
I can't reproduce your issue. Plz look into my code and let me know how I can reproduce.
<%@ Page Language="C#" AutoEventWireup="true" Codebehind="Default.aspx.cs" Inherits="AJAXEnabledWebApplication1._Default" ValidateRequest="false" %>
 
<%@ Register Namespace="ASPnetRater" Assembly="ASPnetRater" TagPrefix="cc" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
    <!-- OF COURSE YOU NEED TO ADAPT NEXT LINE TO YOUR tiny_mce.js PATH -->
 
    <script type="text/javascript" src="/jscripts/tiny_mce/tiny_mce.js"></script>
 
    <script type="text/javascript">
        tinyMCE.init({
	        mode : "textareas"
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <div>
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <textarea name="content" cols="50" rows="15">This is some content that will be editable with TinyMCE.</textarea>
                    <cc:Rater ID="Rater1" runat="server" ImageOff="/images/rating_grey_star.gif" Value="3"
                        MaxValue="5" ImageOn="/images/rating_red_star.gif" ToolTip="I'm a rater" OnCommand="Rater1_Command"
                        ImageOver="/images/rating_yellow_star.gif"></cc:Rater>
                </ContentTemplate>
            </asp:UpdatePanel>
        </div>
    </form>
 
    <script type="text/javascript">
        Sys.WebForms.PageRequestManager.getInstance().add_initializeRequest(<%=this.ClientID%>_InitializeRequestHandler);
            function <%=this.ClientID%>_InitializeRequestHandler(sender, args) {
                //do something
            }
    </script>
 
</body>
</html>
 
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
 
namespace AJAXEnabledWebApplication1
{
    public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            ScriptManager1.RegisterAsyncPostBackControl(Rater1);
        }
 
        protected void Rater1_Command(object sender, EventArgs e)
        {
            ScriptManager.RegisterStartupScript(this.UpdatePanel1, typeof(string), "initMCE", "tinyMCE.init({mode : \"textareas\"});", true);
        }
    }
}
 
 
Thanks,
Tai
Sign In·View Thread·Permalink
Last Visit: 31 Dec '99 - 18:00     Last Update: 25 May '13 - 9:13Refresh12 Next »

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

About Article
An ASP.NET rating control
Type Article
Licence CPOL
First Posted 13 Apr 2009
Views 44,723
Downloads 2,198
Bookmarked 71 times

, +
Top News

Old Japanese Man Creates Amazing Art Using Excel (Wait, Excel?)

Get the Insider News free each morning.
Related Videos
Introduction To Controller And Action (ASP.Net MVC Part-1).mp4
Video #4 - Domain and VM Techniques - Part 1
Rating Control using Custom Web Control
AJAX ASP.NET Rating Control
A rating system to rate your online articles and display the ratings graphically
Simple rating control using jQuery
Ajax rating control is not in one line
ShaperRater - A Rating Control
Rating Demystified: Ajax Way, Amazon Way*
Using Telerik RadControls With DotNetNuke. Complete Rating And Comments Solution
Convert Currency Values with a Custom Control
Event Calendar [ ASP.NET 2.0 / C# ]
Mobile Application Development in ASP.NET
Simple way to Design Rating in ASP.NET using JavaScript, CSS
Combo Control
SVG Based Star Rating Control
COMET (or Reverse AJAX) based Grid Control for ASP.NET Web Applications - Scalable, High Performance and Low Latency Grid Control
ASP.NET Real-time Currency Converter using API (Google, Yahoo), Web service, and jQuery Ajax
Custom ASP.NET Ajax Control for Loan Payment Calculation
WYSIWYG For Custom Web Controls
Positioning your UI elements in a WebControl
Changing your monitor's refresh rate
Permalink | Advertise | Privacy | Mobile
Web03 | 2.6.130523.1 | Last Updated 18 Apr 2011
Article Copyright 2009 by taihip
Everything else Copyright © CodeProject, 1999-2013
Terms of Use
Layout: fixed | fluid