hi frienz,
Ajax rating is one of the nice feature they are giving 'n it's very easy t0 implement also
Demo
Documentation
u need to have a style sheet where u r controlling the rating
<style type="text/css">
.ratingStar{white-space:nowrap;margin:1em;height:14px;}
.ratingStar .ratingItem {font-size: 0pt;width: 30px;height: 20px;margin: 0px;padding: 0px;display: block;background-repeat: no-repeat;cursor:pointer;}
.ratingStar .Filled {background-image: url(pic/brightstar.JPG);}
.ratingStar .Empty {background-image: url(pic/graystar.JPG);}
.ratingStar .Saved {background-image: url(pic/brightstar.JPG);}
</style>
Add ajax script manager
<ajaxToolkit:ToolkitScriptManager runat="Server" EnableScriptGlobalization="true" EnableScriptLocalization="true" ID="ToolkitScriptManager1" />
one demo pic
<asp:Image ImageUrl="~/pic/hair.jpg" ID="yfgdf" runat="server" />
add ajax rating control
<ajaxToolkit:Rating runat="server" ID="rateItem" MaxRating="5" CurrentRating="1"
CssClass="ratingStar" StarCssClass="ratingItem" WaitingStarCssClass="Saved"
FilledStarCssClass="Filled" EmptyStarCssClass="Empty" AutoPostBack="True"
OnChanged="rate_Changed" ></ajaxToolkit:Rating>
one label to show the rating
<asp:Label ID="lblRate" runat="server"></asp:Label>
On server side
// event wil b fired on rating change
protected void rate_Changed(object sender, AjaxControlToolkit.RatingEventArgs e)
{
Rate(int.Parse(e.Value));
}
private void Rate(int rate)
{
lblRate.Text = "You have rated " + rate.ToString() + " star";
//rateItem.ReadOnly = true;
}
Ajax rating is one of the nice feature they are giving 'n it's very easy t0 implement also
Demo
Documentation
u need to have a style sheet where u r controlling the rating
<style type="text/css">
.ratingStar{white-space:nowrap;margin:1em;height:14px;}
.ratingStar .ratingItem {font-size: 0pt;width: 30px;height: 20px;margin: 0px;padding: 0px;display: block;background-repeat: no-repeat;cursor:pointer;}
.ratingStar .Filled {background-image: url(pic/brightstar.JPG);}
.ratingStar .Empty {background-image: url(pic/graystar.JPG);}
.ratingStar .Saved {background-image: url(pic/brightstar.JPG);}
</style>
Add ajax script manager
<ajaxToolkit:ToolkitScriptManager runat="Server" EnableScriptGlobalization="true" EnableScriptLocalization="true" ID="ToolkitScriptManager1" />
one demo pic
<asp:Image ImageUrl="~/pic/hair.jpg" ID="yfgdf" runat="server" />
add ajax rating control
<ajaxToolkit:Rating runat="server" ID="rateItem" MaxRating="5" CurrentRating="1"
CssClass="ratingStar" StarCssClass="ratingItem" WaitingStarCssClass="Saved"
FilledStarCssClass="Filled" EmptyStarCssClass="Empty" AutoPostBack="True"
OnChanged="rate_Changed" ></ajaxToolkit:Rating>
one label to show the rating
<asp:Label ID="lblRate" runat="server"></asp:Label>
On server side
// event wil b fired on rating change
protected void rate_Changed(object sender, AjaxControlToolkit.RatingEventArgs e)
{
Rate(int.Parse(e.Value));
}
private void Rate(int rate)
{
lblRate.Text = "You have rated " + rate.ToString() + " star";
//rateItem.ReadOnly = true;
}
Have a nice day... 'N happy Coding :)