Thursday 28 March 2013

Asp.Net voting system with jQuery, Ajax and C#

Asp.Net voting system with jQuery, Ajax and C#

 In this article i will show you how you can create a very coll voting system in asp.net using jquery ajax and c#. This article helps you to display user votes on blog post or on your forum.

Some of my previous asp.net and jquery article is as follows

Code to get uploaded file width and height in asp.net using c# , Better Way To Integrate Facebook Like Button In You Asp.net Website , Simple Signup Form in Asp.net Using C# ,Jquery Code To Get Page URL and Title | Javascript Code To Get Page Title ann Page URL , jQuery Mobile Calculator Using Jquery and HTML5 .

Now for this article create a new asp.net application. now add a new page and an Ajax page.

first create a new table in your data base.
CREATE TABLE [dbo].[VotingSystem](
    [Id] [int] IDENTITY(1,1) NOT NULL,
    [UpValue] [int] NULL,
    [DownValue] [int] NULL,
    [VotingMessage] [varchar](100) NULL,
 CONSTRAINT [PK_VotingSystem] PRIMARY KEY CLUSTERED
(
    [Id] ASC
)WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS  = ON, ALLOW_PAGE_LOCKS  = ON) ON [PRIMARY]
) ON [PRIMARY]

GO


After adding data your table look like as shown below.





In your .aspx page add the below html code.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="VotingSystem.aspx.cs" Inherits="Voting_system.VotingSystem" %>

<!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>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
    <link href="Styles/Site.css" rel="stylesheet" type="text/css" />
    <script language="javascript">
        $(document).ready(function () {

        });
        function UpdayeVotingValue(type, articleId, controlUpdateID, imgid) {
            $("#" + imgid).effect("bounce", { times: 3 }, 300);
            $.ajax({
                type: "POST",
                url: "Ajax-VoteCount.aspx?VodeTypeId=" + type + "&ArticleId=" + articleId,
                cache: false
            }).done(function (html) {
                if (html == "0") {
                    alert(html);
                } else {
                    $("#" + controlUpdateID).html("<h2>"+html+"</h2>");
                }
            });
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="divvotingsystem" runat="server">
     
    </div>
    </form>
</body>
</html>

In this url: "Ajax-VoteCount.aspx?VodeTypeId=" + type + "&ArticleId=" + articleId, is used for ajax request . Below is the file structure.

file structure

Now in your .cs file add the below code.
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.Text;

namespace Voting_system
{
    public partial class VotingSystem : System.Web.UI.Page
    {
      SqlConnection objcon = new SqlConnection("<Your connection string>");
        protected void Page_Load(object sender, EventArgs e)
        {
            try
            {
                DataTable objdt = new DataTable();
                StringBuilder _commentbuilder = new StringBuilder();
                string querymessage = "Select * from VotingSystem;";
                SqlDataAdapter objda = new SqlDataAdapter(querymessage, objcon);
                objcon.Open();
                objda.Fill(objdt);
                objcon.Close();
                if (objdt.Rows.Count > 0)
                {
                    _commentbuilder.Append("<table width=\"40%\" style=\"border: 1 solid black; border-collapse: collapse;\" border=\"1\">");
                    for (int i = 0; i < objdt.Rows.Count; i++)
                    {
                        _commentbuilder.Append(" <tr><td style=\"width: 10%;height:30px;\"><img src=\"Images/Up.gif\" class=\"updownimg\" onclick=\"javascript:UpdayeVotingValue(1," + objdt.Rows[i]["id"].ToString() + ",`U" + i.ToString() + "`,this.id);\" id=`imgu"+i.ToString()+"`/> </td><td style=\"width: 15%;\" align=\"center\"><div id=`U" + i.ToString() + "`><h2>" + objdt.Rows[i]["UpValue"].ToString() + "</h2></div></td><td rowspan=\"2\">" + objdt.Rows[i]["VotingMessage"].ToString() + "</td></tr>");
                        _commentbuilder.Append(" <tr><td style=\"width: 10%;height:30px;\"><img src=\"Images/down.gif\"  class=\"updownimg\"onclick=\"javascript:UpdayeVotingValue(2," + objdt.Rows[i]["id"].ToString() + ",`D" + i.ToString() + "`,this.id);\" id=`imgd" + i.ToString() + "`/></td><td align=\"center\"><div id=`D" + i.ToString() + "`><h2>" + objdt.Rows[i]["DownValue"].ToString() + "</h2></div></td></tr>");

                    }
                    _commentbuilder.Append("</table>");
                    divvotingsystem.InnerHtml = _commentbuilder.ToString();
                }
            }
            catch
            {

            }
        }
    }
}

Here i have preparred a string and vinded it to the div control.

Now in you ajax page remove all the html content except the page tag.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Ajax-VoteCount.aspx.cs" Inherits="Voting_system.Ajax_VoteCount" %>


now in your ajax cs page add the below code.
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;

namespace Voting_system
{
    public partial class Ajax_VoteCount : System.Web.UI.Page
    {
        SqlConnection objcon = new SqlConnection("<Your connection string>");
        protected void Page_Load(object sender, EventArgs e)
        {
            try
            {
                string voteTypeid = Request.QueryString["VodeTypeId"].ToString();
                string articleid = Request.QueryString["ArticleId"].ToString();
                string query = "Update VotingSystem set ";
                if (voteTypeid == "1")
                {
                    query = query + "UpValue=UpValue+1";
                }
                else
                {
                    query = query + "DownValue=DownValue+1";
                }
                query = query + " where id=" + articleid + "";
                SqlDataAdapter objda = new SqlDataAdapter(query, objcon);
                objcon.Open();
                objda.SelectCommand.ExecuteNonQuery();
                objcon.Close();
                //For getting the value of vote
                string datareturnquery = "select * from VotingSystem where id=" + articleid;
                DataTable objdata = new DataTable();
                SqlDataAdapter objdaval = new SqlDataAdapter(datareturnquery, objcon);
                objcon.Open();
                objdaval.Fill(objdata);
                objcon.Close();
                string returnvalue = "";
                if (voteTypeid == "1")
                {
                    returnvalue = objdata.Rows[0]["UpValue"].ToString();
                }
                else
                {
                    returnvalue = objdata.Rows[0]["DownValue"].ToString();
                }
                Response.Write(returnvalue);
            }
            catch
            {
                Response.Write("0");
            }
        }
    }
}

In above code i have detected the type and then according the type updating the value in table field.

Now we have done. run the application.

voting in asp.net

Now click on image for voting 

voting in asp.net

Thanks....................

____________________________________

DOWNLOAD
____________________________________
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)