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?
- Add a reference to the control,
- 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.
