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.
推荐.NET配套的通用数据层ORM框架:CYQ.Data 通用数据层框架
新浪微博粉丝精灵,刷粉丝、刷评论、刷转发、企业商家微博营销必备工具"