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.