Categories
Asp, Asp.net

Ajax Rating Control Example With Database

ModalPopUp Extender Example in Asp.Net

Ajax Rating Control Example With Database

In this tutorial i will explain about Ajax Rating Control Example With Database.Here we have a Ajax Rating Control, like what we have seen on many website or forums for feedback and reviews of products.

We are storing every rating on database, and then showing that how much user have been already rated, and what is average rating.

Stored Procedure to Fetch & Insert Data:

--stored procedure to insert data--

create procedure InsertRating
(
@Rvalue int
)
as
begin
insert into tbl_rating(rvalue) values (@Rvalue)
end

go

--Stored procedure to select data--

create procedure Selectrating
as
begin
select Rvalue from tbl_rating
end

Design View:

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

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Ajax Rating Control Example With Database</title>
<style type="text/css">
body
{
margin:0px auto;
width:980px;
text-align:center;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;	
}
h2
{
font-size:30px;
text-align:center;	
}
.text
{
color:#090;
text-align:center;
font-size:14px;	
width:100%;
}
.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;
}
.hr
{
clear:both;	
margin-top:60px;
border-bottom:solid 2px rgba(0,0,0,0.4);
}
.footer
{
width: 100%;
text-align: center;
padding-top: 0px;
font-size: 16px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<h2>Ajax Rating Control Example With Database</h2>
<div class="text">
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></asp:ToolkitScriptManager>
Rate This Tutorial
<div style="padding-left:46%">
<br />
<asp:Rating ID="Rating1" runat="server" AutoPostBack="true" StarCssClass="blankstar" WaitingStarCssClass="waitingstar"
FilledStarCssClass="shiningstar" EmptyStarCssClass="blankstar" OnChanged="Rating1_Changed"></asp:Rating>
</div>
<br />
<br />
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>, 
<asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
</div>

<!--hr-->
<br /><br />
<hr />

<!--footer-->
<div class="footer">
<p>&copy; 2013 All rights reserved by HighTechnology.in
<a href="http://hightechnology.in" target="_blank">HighTechnology.in</a>
| Hosting Partner <a href="http://www.grootstech.com" target="_blank">Grootstech Solutions</a></p>
</div>
</form>
</body>
</html>

Code View:

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

public partial class Index : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            bindratings();
        }
    }
    protected void Rating1_Changed(object sender, AjaxControlToolkit.RatingEventArgs e)
    {
            SqlConnection con = new SqlConnection("Data Source=.;Initial Catalog=session;User ID=sa;Password=mann");
            con.Open();
            SqlCommand cmd = new SqlCommand("InsertRating", con);
            cmd.CommandType = CommandType.StoredProcedure;
            cmd.Parameters.AddWithValue("@rvalue", SqlDbType.Int).Value = Rating1.CurrentRating;
            cmd.ExecuteNonQuery();
            con.Close();
            bindratings();
    }
    public void bindratings()
    {
             int rtotal = 0;
             SqlConnection con = new SqlConnection("Data Source=.;Initial Catalog=session;User ID=sa;Password=mann");
             con.Open();
             SqlCommand cmd = new SqlCommand("selectrating", con);
             cmd.CommandType = CommandType.StoredProcedure;
             SqlDataAdapter da = new SqlDataAdapter(cmd);
             DataTable dt = new DataTable();
             da.Fill(dt);
             if (dt.Rows.Count > 0)
             {
             for (int getrating = 0; getrating < dt.Rows.Count; getrating++)
             {
                rtotal += Convert.ToInt32(dt.Rows[getrating][0].ToString());
             }
             int average = rtotal / (dt.Rows.Count);
             Rating1.CurrentRating = average;
             Label1.Text = dt.Rows.Count + " " + "Users have rated this Tutorial";
             Label2.Text = "Average rating for this Tutorial is" + " " + Convert.ToString(average);
             }
         }
}

Ajax Rating Control Example With Database