In this post am gonna provide a simple Ajax rating control sample. When u change the rating by clicking the Star, the value will be displayed in a Label control. It will be useful when you develop a shopping cart kind of application. I have also attached the star images necessary for this sample.
Design Code:
<cc:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</cc:ToolkitScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<cc:Rating ID="Rating1" runat="server" MaxRating="5" CurrentRating="1" CssClass="ratingStar" StarCssClass="ratingItem" EmptyStarCssClass="Empty" AutoPostBack="True" OnChanged="Rating1_Changed1">
</cc:Rating>
</ContentTemplate>
</asp:UpdatePanel>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
C# Code:
const int RATING1_MINIMUM = 1;
const int RATING1_MAXIMUM = 5;
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
Evaluate_Rating1(Rating1.CurrentRating);
}
}
public void Evaluate_Rating1(int value)
{
Label1.Text = EvaluateRating(value, Rating1.MaxRating, RATING1_MINIMUM, RATING1_MAXIMUM);
}
public static string EvaluateRating(int value, int maximalValue, int minimumRange, int maximumRange)
{
int stepDelta = (minimumRange == 0) ? 1 : 0;
double delta = (double)(maximumRange - minimumRange) / (maximalValue - 1);
double result = delta * value - delta * stepDelta;
return FormatResult(result);
}
public static string FormatResult(double value)
{
return String.Format("{0:g}", value);
}
protected void Rating1_Changed1(object sender, AjaxControlToolkit.RatingEventArgs e)
{
Evaluate_Rating1(int.Parse(e.Value));
}
CSS Code:
.ratingStar
{
white-space:nowrap;
margin:1em;
height:14px;
}
.ratingStar .ratingItem
{
font-size: 0pt;
width: 13px;
height: 12px;
margin: 0px;
padding: 0px;
display: block;
background-repeat: no-repeat;
cursor:pointer;
}
.ratingStar .Filled
{
background-image: url(../images/ratingStarFilled.png);
}
.ratingStar .Empty
{
background-image: url(../images/ratingStarEmpty.png);
}
.ratingStar .Saved
{
background-image: url(../images/ratingStarSaved.png);
}
Images:


Hi there, its pleasant article regwrding media print, we all
ReplyDeletebe aware of media is a impressive source of data.
These are inn fact wonderful ideas in regarding blogging.
ReplyDeleteYou have touched some good points here. Anyy way keep up
wrinting.