Star Rating Using AJAX

In this section we will learn about Star rating concept using Ajax.

 

Introduction

 

AJAX (Asynchronous JavaScript and XML) is a technique for creating fast and dynamic web pages. AJAX allows web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page.

 

Step 1 Create table (table name like UserRating)

 

 

 

Step 2 Open your Visual Studio and add folder in your solution explorer

 

 

 

Step 3 And insert image for rating

 

 

 

Step 4 Add a web from (like Default.aspx), and define CSS

<style type="text/css">
body {
margin: 0px auto;
width: 980px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
background: #C9C9C9;
}
.blankstar {
background-image: url(images/blank_star.png);
width: 16px;
height: 16px;
}
.waitingstar {
background-image: url(images/half_star.png);
width: 16px;
height: 16px;
}
.shiningstar {
background-image: url(images/shining_star.png);
width: 16px;
height: 16px;
}
</style>

Design your web form

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<%-- Use ScriptManager from your Ajax toolkit--%>
<br />
<h1>C-sharpcorner</h1>
<br />
<asp:Rating ID="Rating1" runat="server" AutoPostBack="true" StarCssClass="blankstar"
WaitingStarCssClass="Halfstar" FilledStarCssClass="shiningstar"
EmptyStarCssClass="blankstar" OnChanged="Rating1_Changed">
</asp:Rating>
<%--use rating control from your ajax toolkit--%>
<br />
<br />
<br />
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>,
<asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>

Step 5 Code behind (Default.aspx.cs)

 

On page load 

Label1.Text = "0 Users have rated this Product";
Label2.Text = "Average rating for this Product is 0";

if (!IsPostBack)
{
BindRatings();
}

Step 6 Create change event insert your rating to database table

protected void Rating1_Changed(object sender, AjaxControlToolkit.RatingEventArgs e)
{
con.Open();
SqlCommand cmd = new SqlCommand("INSERT INTO UserRating(Rating) VALUES (@Rating)", con);// insert rating to UserRating table
cmd.Parameters.AddWithValue("@Rating", SqlDbType.Int).Value = Rating1.CurrentRating;
cmd.ExecuteNonQuery();
con.Close();
BindRatings();
}

Step 7 Bind rating value from database table and calculate average rating

public void BindRatings()
{
int Total = 0;
con.Open();
SqlCommand cmd = new SqlCommand("SELECT Rating FROM UserRating", con);
SqlDataAdapter da = new SqlDataAdapter(cmd);
DataTable dt = new DataTable();
da.Fill(dt);
if (dt.Rows.Count > 0)
{
for (int i = 0; i < dt.Rows.Count; i++)
{
Total += Convert.ToInt32(dt.Rows[i][0].ToString());
}
int Average = Total / (dt.Rows.Count); // calculate Average rating
Rating1.CurrentRating = Average;
Label1.Text = dt.Rows.Count + " " + "Users have rated ";
Label2.Text = "Average rating for C-sharpcorner is" + " " + Convert.ToString(Average);
}
}

Here is your complete code ( Default.aspx.cs)

using System;
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
public partial class _Default : System.Web.UI.Page
{
SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString);
protected void Page_Load(object sender, EventArgs e)
{
Label1.Text = "0 Users have rated this Product";
Label2.Text = "Average rating for this Product is 0";

if (!IsPostBack)
{
BindRatings();
}
}
protected void Rating1_Changed(object sender, AjaxControlToolkit.RatingEventArgs e)
{
con.Open();
SqlCommand cmd = new SqlCommand("INSERT INTO UserRating(Rating) VALUES (@Rating)", con);// insert rating to UserRating table
cmd.Parameters.AddWithValue("@Rating", SqlDbType.Int).Value = Rating1.CurrentRating;
cmd.ExecuteNonQuery();
con.Close();
BindRatings();
}
public void BindRatings()
{
int Total = 0;
con.Open();
SqlCommand cmd = new SqlCommand("SELECT Rating FROM UserRating", con);
SqlDataAdapter da = new SqlDataAdapter(cmd);
DataTable dt = new DataTable();
da.Fill(dt);
if (dt.Rows.Count > 0)
{
for (int i = 0; i < dt.Rows.Count; i++)
{
Total += Convert.ToInt32(dt.Rows[i][0].ToString());
}
int Average = Total / (dt.Rows.Count); // calculate Average rating
Rating1.CurrentRating = Average;
Label1.Text = dt.Rows.Count + " " + "Users have rated ";
Label2.Text = "Average rating for C-sharpcorner is" + " " + Convert.ToString(Average);
}
}
}

Output