How to create AJAX Rating control in ASP.NET?
In this article I have explained in detail about AJAX Rating in ASP.NET. Normally we are like to give rating if user post good response, if we you are create rating in your website use below code to get rating points by user.
Rating Control Properties
CurrentRating - It is used to set initial default rating value
MaxRating - It is used to set Maximum rating value
StarCssClass - It is denoted CSS class for a visible star
WaitingStarCssClass - This CSS class is used to denote which picture is show when star is waiting mode
FilledStarCssClass - This CSS class is used to denote which picture is show when star is filled
EmptyStarCssClass - This CSS class is used to denote which picture is show when star is empty
RatingAlign - it is show of your start alignment like horizontal or vertical
RatingDirection - Orientation of the stars (LeftToRightTopToBottom or RightToLeftBottomToTop)
OnChanged - Postback event fire when the rating is changed (auto Postback=true)
Client side:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!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>AJAX Rating Control</title>
<style type="text/css">
.ratingStar
{
font-size: 0pt;
width: 13px;
height: 12px;
cursor: pointer;
display: block;
background-repeat: no-repeat;
}
.filledStar
{
background-image: url(image/FilledStar.png);
}
.emptyStar
{
background-image: url(Image/EmptyStar.png);
}
.savedStar
{
background-image: url(Image/SavedStar.png);
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<table cellpadding="0" cellspacing="0" align="center" width="500">
<tr>
<td height="40">
<b>AJAX Rating Control Example</b>
</td>
</tr>
<tr>
<td height="50">
1) Rate the user reponse?
</td>
</tr>
<tr>
<td height="50" align="center">
<asp:Rating ID="Rating1" runat="server" StarCssClass="ratingStar" WaitingStarCssClass="savedStar"
FilledStarCssClass="filledStar" EmptyStarCssClass="emptyStar" AutoPostBack="true" CurrentRating="1" MaxRating="5"
OnChanged="Rating1_Changed"></asp:Rating>
</td>
</tr>
<tr>
<td height="50">
<asp:Label ID="lblRatePoint" runat="server"></asp:Label>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
Server side
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Rating1_Changed(object sender, AjaxControlToolkit.RatingEventArgs e)
{
lblRatePoint.Text="Selected Rating is " + e.Value.ToString();
}
}
Output
Source Code Detail:
Here with I have attached source code of AJAX Rating Control example download and try to learn this concept.
Front End : ASP.NET
Code Behind: C#
Conclusion:
I hope this article help to know AJAX Rating Control.
It is very valuable article.I inserted this to my project, It is very easy to understand . Now I need to add the value to database and show the average or point vise rating.
Thanks to posting this article.