Usage of AJAX RATING Control in ASP.NET

By James H

Rating is common for every thing to know the view of the Visitor. Normally we use to see this rating in the articles, shopping cart(Beside products) etc. So I have thought to provide some information on this control which i had implemented in our project.

The Rating control provides an intuitive rating experience that allows users to select the number of stars that represents their rating. The page designer can specify the initial rating, the maximum rating to allow, the alignment and direction of the stars, and custom styles for the different states a star can have. Rating also supports a ClientCallBack event that allows custom code to run after the user has rated something.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AjaxRatingcontrol.aspx.cs"
    Inherits="AjaxRatingcontrol" %>

<%@ 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></title>
    
<style type="text/css">
        .ratingEmpty
        {
            background-image: url(images/ratingStarEmpty.gif);
            width: 18px;
            height: 18px;
        }
        .ratingFilled
        {
            background-image: url(images/ratingStarFilled.gif);
            width: 18px;
            height: 18px;
        }
        .ratingSaved
        {
            background-image: url(images/ratingStarSaved.gif);
            width: 18px;
            height: 18px;
        }
     
</style>
</head>
<body>
    
<form id="form1" runat="server">
    
<div>
        
<asp:ScriptManager ID="ScriptManager1" runat="server">
        
</asp:ScriptManager>
        
<asp:UpdatePanel ID="pnlRating" runat="server">
            
<ContentTemplate>
                 
<table width="35%">
                     
<tr>
                         
<td width="27%">
                              
<b>Average Rating:</b>
                         
</td>
                         
<td>
                              
<asp:Rating ID="ratingControl" AutoPostBack="true" runat="server" OnChanged="RatingControlChanged"
                                  
StarCssClass="ratingEmpty" WaitingStarCssClass="ratingSaved" EmptyStarCssClass="ratingEmpty"
                                  
FilledStarCssClass="ratingFilled">
                              
</asp:Rating>
                              
<b>
                                  
<asp:Label ID="lbltxt" runat="server" />
                              
</b>
                         
</td>
                     
</tr>
                     
<tr>
                         
<td colspan="2">
                            The Rating control provides an intuitive rating experience that allows users to
                            select the number of stars that represents their rating. The page designer can specify
                            the initial rating, the maximum rating to allow, the alignment and direction of
                            the stars, and custom styles for the different states a star can have. Rating also
                            supports a ClientCallBack event that allows custom code to run after the user has
                            rated something.
                          
</td>
                     
</tr>
                 
</table>
            
</ContentTemplate>
        
</asp:UpdatePanel>
    
</div>
    
</form>
</body>
</html>

The Code Behind is given below

using
System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Data;
using System.Configuration;

public partial class AjaxRatingcontrol : System.Web.UI.Page
{
    SqlConnection con =
new SqlConnection(ConfigurationManager.ConnectionStrings["TESTDB"].ConnectionString);
    
protected void Page_Load(object sender, EventArgs e)
    {
         
if (!IsPostBack)
        {
             BindRatingControl();
        }
    }
    
protected void RatingControlChanged(object sender, AjaxControlToolkit.RatingEventArgs e)
    {
        con.
Open();
        SqlCommand cmd =
new SqlCommand("insert into RatingDetails(Rate)values(@Rating)", con);
        cmd.Parameters.AddWithValue(
"@Rating", ratingControl.CurrentRating);
         cmd.ExecuteNonQuery();
         con.
Close();
        BindRatingControl();
    }
    
protected void BindRatingControl()
    {
        int total = 0;

        DataTable dt =
new DataTable();
        con.
Open();
        SqlCommand cmd =
new SqlCommand("Select Rate from RatingDetails", con);
        SqlDataAdapter da =
new SqlDataAdapter(cmd);
        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);
            ratingControl.CurrentRating = average;
            lbltxt.Text = dt.Rows.
Count + "user(s) have rated this article";
        }
     }
}

Popularity  (1883 Views)
Biography - James H
Having 2 years of Experience in .NET Technologies .Provides self implemented solutions. Mark as helpful answer if it is helpful to you.

My Blog My Articles My FAQ'S


Create New Account
Article Discussion: Usage of AJAX RATING Control in ASP.NET
James H posted at Tuesday, September 20, 2011 7:38 AM