In this article I will explain with an example, how to use the ASP.Net AJAX Rating Control in ItemTemplate ASP.Net GridView.
This article also explains, how to save the Rating value of the ASP.Net AJAX the Rating Control inside GridView to database and also populate the Average Rating value from database, saved for each Rating Control in GridView.
 
 

Register AJAX Control Toolkit

You will need to register the AJAXControlToolKit assembly in order to use the AJAX Control Toolkit’s controls.
You need to place the following line just below the @Page directive.
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %> 
 
 

Database

I have made use of two tables namely Fruits and Fruit_Ratings. The schema and the data present in both the tables are as follows.

Fruits

Using ASP.Net AJAX Rating Control inside GridView TemplateField ItemTemplate
 

Fruit_Ratings

Using ASP.Net AJAX Rating Control inside GridView TemplateField ItemTemplate
 
 

Using the ASP.Net AJAX Control Toolkit Rating Extender Control

1. Drag an ASP.Net AJAX ScriptManager on the page.
2. Register the AJAX Control Toolkit Library after adding reference to your project
 <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
 
Note: For more reference regarding usage of the ASP.Net AJAX Rating Control, please refer my article ASP.Net AJAX Rating Control Example
 
 

HTML Markup

The HTML Markup consists of following controls
ScriptManager - For enabling ASP.Net AJAX.
GridView - For display the fruit name and rating value.
The GridView consists of BoundField column and TemplateField column.
TemplateField - The TemplateField column consists of ItemTemplate.
ItemTemplate - The ItemTemplate contains of a Rating.
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:GridView ID="gvFruits" runat="server" AutoGenerateColumns="false" DataKeyNames="FruitId">
    <Columns>
        <asp:BoundField DataField="FruitName" HeaderText="Fruit Name" />
        <asp:TemplateField HeaderText="Fruit Ratings">
            <ItemTemplate>
                <cc1:Rating ID="Rating1" AutoPostBack="true" OnChanged="OnRatingChanged" runat="server"
                    StarCssClass="Star" WaitingStarCssClass="WaitingStar" EmptyStarCssClass="Star"
                    FilledStarCssClass="FilledStar" CurrentRating='<%# Eval("Rating")%>'>
                </cc1:Rating>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView> 
 
 

Namespaces

You will need to import the following namespaces
C#
using System.Data;
using System.Configuration;
using System.Data.SqlClient;
using AjaxControlToolkit;
 
VB.Net
Imports System.Data
Imports System.Configuration
Imports System.Data.SqlClient
Imports AjaxControlToolkit
 
 

Binding the ASP.Net GridView

The GridView is populated in the Page_Load event of the ASP.Net Page using the following code. The Query written gets the FruitId, FruitName and the Average Rating of each Fruit.
C#
protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        gvFruits.DataSource = GetData("SELECT FruitId, FruitName, ISNULL((SELECT AVG(Rating) FROM Fruit_Ratings WHERE FruitId = Fruits.FruitId), 0) Rating FROM Fruits");
        gvFruits.DataBind();
    }
}
 
private static DataTable GetData(string query)
{
    string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(constr))
    {
        using (SqlDataAdapter sda = new SqlDataAdapter(query, con))
        {
            using (DataTable dt = new DataTable())
            {
                sda.Fill(dt);
                return dt;
            }
        }
    }
}
 
VB.Net
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
    If Not IsPostBack Then
        gvFruits.DataSource = GetData("SELECT FruitId, FruitName, ISNULL((SELECT AVG(Rating) FROM Fruit_Ratings WHERE FruitId = Fruits.FruitId), 0) Rating FROM Fruits")
        gvFruits.DataBind()
    End If
End Sub
 
Private Shared Function GetData(ByVal query As String) As DataTable
    Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
    Using con As SqlConnection = New SqlConnection(constr)
        Using sda As SqlDataAdapter = New SqlDataAdapter(query, con)
            Using dt As DataTable = New DataTable()
                sda.Fill(dt)
                Return dt
            End Using
        End Using
    End Using
End Function
 
 

Inserting and saving the User Ratings to SQL Server Database Table

In the HTML Markup you will notice that I have set AutoPostBack property to true and also have set the OnChanged event for the Rating Extender control.
Thus when user clicks on any of the Rating Stars inside the GridView ItemTemplate, the following event is fired where the User Selected Rating is available in the RatingEventArgs Value property while the FruitId is fetched from the DataKeys property of the GridView, both are then finally inserted into database table.
C#
protected void OnRatingChanged(object sender, RatingEventArgs e)
{
    int rowIndex = ((senderas Rating).NamingContainer as GridViewRow).RowIndex;
    string sql = "INSERT INTO Fruit_Ratings VALUES(@FruitId, @Rating)";
    int fruitId = Convert.ToInt32(gvFruits.DataKeys[rowIndex].Value);
    string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(constr))
    {
        using (SqlCommand cmd = new SqlCommand(sql, con))
        {
            cmd.Parameters.AddWithValue("@FruitId", fruitId);
            cmd.Parameters.AddWithValue("@Rating", e.Value);
            con.Open();
            cmd.ExecuteNonQuery();
            con.Close();
        }
    }
    Response.Redirect(Request.Url.AbsoluteUri);
}
 
VB.Net
Protected Sub OnRatingChanged(ByVal sender As Object, ByVal e As RatingEventArgs)
    Dim rowIndex As Integer = (TryCast((TryCast(sender,Rating)).NamingContainer, GridViewRow)).RowIndex
    Dim sql As String = "INSERT INTO Fruit_Ratings VALUES(@FruitId, @Rating)"
    Dim fruitId As Integer = Convert.ToInt32(gvFruits.DataKeys(rowIndex).Value)
    Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
 
    Using con As SqlConnection = New SqlConnection(constr)
 
        Using cmd As SqlCommand =  New SqlCommand(sql, con)
            cmd.Parameters.AddWithValue("@FruitId", fruitId)
            cmd.Parameters.AddWithValue("@Rating", e.Value)
            con.Open()
            cmd.ExecuteNonQuery()
            con.Close()
        End Using
    End Using
    Response.Redirect(Request.Url.AbsoluteUri)
End Sub
 
 

CSS Style classes for the ASP.Net AJAX Rating Control

Following CSS Style Classes are used for the ASP.Net AJAX Rating Control to display the different types of stars.
<style type="text/css">
    .Star {
        background-image: url(images/Star.gif);
        height: 17px;
        width: 17px;
    }
 
    .WaitingStar {
        background-image: url(images/WaitingStar.gif);
        height: 17px;
        width: 17px;
    }
 
    .FilledStar {
        background-image: url(images/FilledStar.gif);
        height: 17px;
        width: 17px;
    }
</style>
 
 

Screenshot

Using ASP.Net AJAX Rating Control inside GridView TemplateField ItemTemplate
 
 

Demo

View Demo
 
 

Downloads

Download Code