Create Polling System with Asp.net & jQuery

Hi,
You can find many polling system on internet that are working .But here is the
one which is merged with jQuery poll. You can use this with update panel and with out update panel as well.


At first Create the database using the following script :

SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
CREATE TABLE [dbo].[Poll](
[PollID] [int] IDENTITY(1,1) NOT NULL,
[Name] [nvarchar](400) COLLATE SQL_Latin1_General_CP1_CI_AS NOT NULL,
[Published] [bit] NOT NULL,
[CreatedOn] [datetime] NULL
)

script for poll question answer:

SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
CREATE TABLE [dbo].[YourPollAnswer](
[PollAnswerID] [int] IDENTITY(1,1) NOT NULL,
[PollID] [int] NOT NULL,
[PollAnswerName] [nvarchar](400) COLLATE SQL_Latin1_General_CP1_CI_AS NOT NULL,
[Count] [int] NOT NULL,
[DisplayOrder] [int] NOT NULL,
[CreatedOn] [datetime] NULL


)

Stored Procedures for selecting and updating counts/votes

update YourPollAnswer set [Count] = ([Count]+1) where PollAnswerID = @PollAnswerID and PollID = @PollID


select PollAnswerName,[Count],PollAnswerID,PollID,DisplayOrder,CreatedOn from YourPollAnswer where PollID=@PollID
------------------------



Now create the aspx page :
------------------------------------------------------------------------
<asp:ScriptManager ID="scrMgr" runat="server"></asp:ScriptManager>
<table width="90%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<asp:UpdatePanel ID="upPanelPoll" RenderMode="Block" runat="server">
<ContentTemplate>
<div>
<div id="poll-container">
<span class="black12"><strong>
<asp:Label ID="lblQuestion" runat="server"></asp:Label></strong></span><br />
<p>
<asp:RadioButtonList ID="rblPollAnswers" CssClass="black12" runat="server" DataTextField="PollAnswerName"
DataValueField="PollAnswerID">
</asp:RadioButtonList>
<asp:Button ID="btnsubmit" runat="server" Text="Vote" OnClientClick="javascript:return CheckAnswer();"
class="vote_button" OnClick="btnsubmit_Click" />
</p>
</div>
<div id="poll-results" style="display: none;">
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</td>
</tr>
<tr>
<td>
 
</td>
</tr>
</table>
<script type="text/javascript">
function CheckAnswer()
{
var all=document.getElementsByTagName("input");
var check=0;
for(i=0;i<all.length;i++)
{
if(all[i].type == "radio" && all[i].checked == true)
{
check=0;
break;
}
else
{
check=1;
}
}
if(check == 1)
{
alert("Please select answer before voting.");
return false;
}
}
</script>
------------------------------------------------------------------------
Now, Create an JS file which will contains the necessary JavaScript functions :
------------------------------------------------------------------------

var OPT_ID = 0;
var OPT_TITLE = 1;
var OPT_VOTES = 2;
var votedID;

function animateResults() {
$("#poll-results div").each(function() {
var percentage = $(this).next().text();
$(this).css({ width: "0%" }).animate({
width: percentage
}, 'slow');
});
}
$("#btnshowresult").click(function() {
// alert('show result');
$("#divfill").fadeOut('normal', function() {
$(this).css("display", "none");
$("#divresult").fadeIn('normal', function() {
$("#divresult").css("display", "block");
});
});
});

$("#btnshowpoll").click(function() {
//alert('Show poll');
$("#divresult").fadeOut('normal', function() {
$("#divresult").css("display", "none");
$("#divfill").fadeIn('normal', function() {
$("#divfill").css("display", "block");
});
});
});

function loadResults(data) {
//alert('here');
var total_votes = 0;
var percent;
for (id in data) {
total_votes = total_votes + parseInt(data[id][OPT_VOTES]);
}
//alert(total_votes);

var results_html = "Poll Results\n

\n";
for (id in data) {
percent = Math.round((parseInt(data[id][OPT_VOTES]) / parseInt(total_votes)) * 100);
if (data[id][OPT_ID] !== votedID) {
results_html = results_html + "

" + data[id][OPT_TITLE] + "

 

" + percent + "%

\n";
} else {
results_html = results_html + "

" + data[id][OPT_TITLE] + "

 

" + percent + "%

\n";
}
}

results_html = results_html + "

\n
Total Votes : " + total_votes + "
<input type='button' class='voteagain_button' style='margin-left:20px;' id='btnret' value='Vote Again' onclick='backtopoll()' />\n";



$("#poll-container").fadeOut('normal', function() {
$(this).css("display", "none");
$("#poll-results").empty();
$("#poll-results").append(results_html).fadeIn('normal', function() {
$("#poll-results").css("display", "block");
animateResults();
});
});
}
function backtopoll() {
$("#poll-results").fadeOut('normal', function() {
$("#poll-results").css("display", "none");
$("#poll-container").fadeIn('normal', function() {
$("#poll-container").css("display", "block");
});
});
}