In this blog post am going to explain how to develop an Asp.Net AJAX poll system using JQuery, which allows users to express there opinion and see the results. The system will have a back-end (admin part) to add and manage polls.
Click here to see the DEMO and DOWNLOAD the source
Asp.Net AJAX Poll Admin
- Create a new Poll with unlimited number of Choices
- Configure how to block repeated voting. (By IP address or Cookie)
- Activate/Deactivate Polls
- Edit/Delete existing poll
Asp.Net AJAX Poll User side
- Display an active poll randomly or by using the Poll ID (This is just for demo purpose you can change the logic as you wanted)
- Allow the user to vote and display the result without refreshing the whole page
Technologies used
- Asp.Net in the server side
- JQuery for client side processing and communication with server using AJAX
- SQL Server 2005 to store the data. We use Stored Procedures to interact with tables.
- Microsoft data application blocks for the data access layer.
Using JQuery to call Asp.Net functions from client side
Its really easy to call server side functions from client side using JQuery. Its efficient than using Asp.Net AJAX Updatepanels. For more details about using JQuery with Asp.Net page methods refer following great blog posts
http://encosia.com/2008/05/29/using-jquery-to-directly-call-aspnet-ajax-page-methods/
http://encosia.com/2008/06/05/3-mistakes-to-avoid-when-using-jquery-with-aspnet-ajax/
Working with Microsoft data application blocks data access layer
Microsoft data application block is part of Microsoft Enterprise library. It’s a free, ready to use and data access layer.
Please read following blog post to see how Microsoft data application block can easily reduce the database interaction code.
http://anzme.blogspot.com/2009/02/microsoft-enterprise-data-application.html
Database Schema
The database schema consists of three tables:
- Poll: This table stores the question and configuration for a poll
- PollChoices: This table stores the choices of each poll and the vote count for each choice.
- PollIPs: This table stores the IP address of all the voted users for each poll. This table will be used to block repeated vote per IP address.
Take a look at the schema shown below
DB Schema of Asp.Net Ajax Poll using JQuery
Now I will explain the source code of each page
1. AddPoll_CS.aspx
We use this page to insert a new Poll and edit an existing Poll.
Add Asp.Net AJAX Poll
In the HTML source we have one textbox (txtQuestion – required field) to enter the Poll Question, 3 radio buttons (rdoCookie, rdoIP & rdoNone) to specify how to block repeated voting, a check box (chkActive) to specify whether this poll is currently active or not (only active polls will be showed in the user side).
To enter the Poll choices we are using a HTML input texts (txtChoice). In the INSERT mode we will show two inputs by default and the user can add as many choices as he wants.
The hidden fields hidPollID, hidPollChoiceID will be used to UPDATE the Poll and Choices while in edit mode.
In the Javascript the function addFormField() will be used to add new Choices in the form.
The function showRowIndexs(); show the Choice number (Choice1, Choice 2 etc) while adding new choices.
The function removeFormField(id) will be used to remove the corresponding Choice from form and from the DB if in edit mode.
The C# source is easy and straightforward please read the inline comments in the C# source code to know how it work and let me know if you have any queries.
2. ListPoll_CS.aspx
List all the existing polls to edit or delete.
A simple Gridview is used to display the data. The code is straightforward and easy to understand
3. Poll_CS.aspx
This page will display a random active poll if the user visit this page directly (use this logic when you use the poll in user side ) or show a specific poll if the pollID is passed through the QueryString.
Asp.Net AJAX Poll
In the HTML source the literal litQuestion will show the Poll Question and the repeater rptChoices will show all the choices.
On clicking the HTML input button btnSubmit we will call an Asp.Net page method using JQuery. That page method will update the Poll DB and return the Poll results.
The Javascript function animateResults() will be used to animate the Poll result.
In the above javascript we will first check whether the user is already polled or not in the ready function and if the user is already polled we will just call the animateResults() and show the results.
Click here to see the DEMO and DOWNLOAD the source
I am using VS 2008 but the source is compatiable with .Net 2.0 also. To make it work in .Net 2.0 just remove the web.config in the zip and add a new one from VS 2005. Make sure to add the Connection string in web.config
I have only recently started working with JQuery and in no way am an expert of any technology, so I am sure the above scripts can be written in more effective and efficient manner. Please post your comments on any improvements.
March 2nd, 2009 at 8:53 PM
Really a very informative article. Would like to try this out soon……
March 3rd, 2009 at 12:47 PM
Great work……….
March 6th, 2009 at 11:18 PM
Watch out when using IP addresses to track anything related to a user. It is not uncommon for corporate entities to masquerade behind a proxy as a single address. Cookies offer a bit more flexibility, although the user can delete cookies or vote multiple times from different machine / browser combinations. If you require your users to be logged in to participate, you can tie it back to their account, but you will lose the ability for anonymous participation. It really depends on your needs, and a combination of strategies might be required, depending on how accurate you wish for you polling to be.
Otherwise, nicely done!
March 11th, 2009 at 10:23 PM
really cool…………
March 19th, 2009 at 10:57 AM
“To make it work in .Net 2.0 just remove the web.config in the zip and add a new one from VS 2005. Make sure to add the Connection string in web.config”
Do you mean I have to debug it on VS 2005 for the web.config file???
March 20th, 2009 at 11:16 AM
@Simon
No you can simply use the files directly but the web.config in the zip file may not work if you are using .Net 2.0… I am using only the connection string from the config file so you just remove the current web.config and use the connection string from your existing web.config.
March 21st, 2009 at 4:22 AM
Thanks for the information, Anz… That really help~~
March 27th, 2009 at 10:05 PM
@Joseph Ferris
Thank you for the comments. Yeah cookie tracking is the best way to block repeated voting when anonymous voting is allowed.
April 10th, 2009 at 7:13 PM
hi
I used all methods to call web method even I marked it as script method and it keeps give me ajax error
April 11th, 2009 at 12:26 PM
@Moh’ed
please post the details about the error you are getting..
April 18th, 2009 at 5:15 PM
Nice Example
Thank you alot
Good Luck
April 21st, 2009 at 7:16 AM
Looks really good mate. Will have to give it a real go in our next app.
April 28th, 2009 at 9:04 PM
Nice post…
May 2nd, 2009 at 11:45 PM
Thanks alot for this good example but after i vote it didn’t show result till i refresh Poll_CS.aspx and i got this javascript error :-
object doesn’t support this property or method
in line 54 and in page Poll_CS.aspx
Please Replay my message
May 20th, 2009 at 2:14 PM
Great example
June 13th, 2009 at 7:05 PM
Can you help me install this on my site?
June 15th, 2009 at 11:10 PM
BRAVO!
June 22nd, 2009 at 11:39 AM
Thanks you very much
June 22nd, 2009 at 5:19 PM
You are voted!
Track back from WebDevVote.com
July 14th, 2009 at 7:32 AM
hey man, i think that is great what are u doing, is really helpful in order to understand. maybe i use this code and modify to do something , i hope u don’t get mad.
thx!
bye
gracias!
August 6th, 2009 at 3:01 PM
hi it great article i got everything wat i want for my application .thnx u
September 22nd, 2009 at 4:42 PM
Marvelous !!!
exactly what I need
Thnx dude.
October 18th, 2009 at 3:23 PM
it is marveles . i love it very much. the source code very easy to understand and nodify’ thank you very much
October 30th, 2009 at 11:05 AM
Thanks A LOT. GREAT WORK. So Crazy :)
November 17th, 2009 at 3:59 PM
Thanks alot for this good example but after i vote it didn’t show result till i refresh Poll_CS.aspx and i got this javascript error :-
object doesn’t support this property or method
in line 54 and in page Poll_CS.aspx
November 25th, 2009 at 12:31 AM
This is working great, I was even able to convert this to VB to get it to work with our site. The issue I’m having however is converting this to a ASCX control and calling my control from my aspx page (either in VB or C#). It comes up fine, I select an option to vote but the results don’t appear. I’ve made sure the URL in the Page method is set to the aspx page. I’ve even got the AutoEventWireup=true. Any thoughts?
Shane
November 25th, 2009 at 8:05 PM
Second question, instead of using the input type=”button” is it possible to use the tag instead? i’ve tried it, of course its not working, not sure what to do.
January 2nd, 2010 at 11:55 AM
Great example :)
tnx…
January 13th, 2010 at 8:56 AM
excellent work.working very well.Thanks
February 19th, 2010 at 1:41 PM
Great work. I can see your effort. Its awesome. I love this site.
April 6th, 2010 at 4:43 PM
Have a go with & Preserve your iPad for 100 percent free! -> http://bit.ly/cFBuis
April 7th, 2010 at 5:47 PM
Hi. Your sourcecode/download link seems to be broken. Is there somewhere else we could get this?
April 9th, 2010 at 1:40 PM
I cant find the source code or see the demo.
Is there any new link to download?
Nice post.
May 21st, 2010 at 6:23 PM
This is really good information. I’m going to mark it as a favorite.
August 28th, 2010 at 7:50 AM
Very informative article of polling system with jQuery. Smooth going flow of whole process. Anyone can understand the steps you have given.
Great work. Appreciated.
August 31st, 2010 at 3:00 AM
Haa, very nice!
September 6th, 2010 at 2:48 PM
Perfect!! Thank you!
October 17th, 2010 at 9:29 AM
it is very use full work…….
October 26th, 2010 at 11:46 PM
[...] Asp.Net AJAX Poll using JQuery – A complete implementation with Admin part http://www.clientsideasp.net/2009/03/01/aspnet-ajax-poll-using-jquery-a-complete-implementation-with... [...]
November 22nd, 2010 at 3:50 PM
Hi
Very good work by u. I am facing one problem with the code u had given
I tried your code in my server. I am not able to call the funcion animateResults(); while user is voting for first time i.e.., after success of JQuery.ajax method. But webmethod in code behand file is calling successfully.
In local system the code which u given is working good but in server it is not working.
Please, tell me the solution it is very important to me.
Thanks & Regards
Ganesh
ganesh_519@yahoo.com
December 11th, 2010 at 1:57 AM
Thanks and a great work .
February 8th, 2011 at 7:45 AM
i have to create voting management system where user select the candidate which has been already added in the database and show the poll result.
http://soft-engineering.blogspot.com
February 16th, 2011 at 12:29 PM
AddPoll_CS.aspx, ListPoll_CS.aspx, Poll_CS.aspx i want to covert these three page into user control so that i can drag n drop on my page any where i want. So i copied all this code to crossponding user control page. every control is wrking fine but for POLL_CS.aspx i am getting object required exception. can u gide me how i can convert this pages into user control.
March 10th, 2011 at 12:36 PM
Thanq vry much for showing nice demo.I have a requirement for entering a comment along with a choice which was voted.For that i have taken textbox inside the repeater of poll_cs.aspx sme thing like…
<input type=”text” name=”txtPoll” id=’txtPoll’ />.
I got struckup for capturing the text of textbox which contains comment.
I have declared a variable tID and used as below(but failing to capture)..pls help me in getting the text of textbox.
var tID = $(“input[name='txtPoll"+cID+"]“).val(); //get the text of checked Choice
April 27th, 2011 at 5:08 PM
simply says, excellent work….
April 30th, 2011 at 9:48 PM
First, Thanks a lot for sharing this code,
it works great for me on my local machine,
but when I am trying to make it work on my host machine – godaddy – I am getting the following error:
———————————-
Description: The application attempted to perform an operation not allowed by the security policy. To grant this application the required permission please contact your system administrator or change the application’s trust level in the configuration file.
Exception Details: System.Security.SecurityException: That assembly does not allow partially trusted callers.
Stack Trace:
[SecurityException: That assembly does not allow partially trusted callers.]
Poll..ctor() in d:\hosting\6584138\html\eyeoncinema\App_Code\Poll.cs:30
poll_Poll_CS.Page_Load(Object sender, EventArgs e) in d:\hosting\6584138\html\eyeoncinema\UserControls\Poll\poll\Poll_CS.aspx.cs:31
System.Web.Util.CalliHelper.EventArgFunctionCaller(IntPtr fp, Object o, Object t, EventArgs e) +14
System.Web.Util.CalliEventHandlerDelegateProxy.Callback(Object sender, EventArgs e) +35
System.Web.UI.Control.OnLoad(EventArgs e) +99
System.Web.UI.Control.LoadRecursive() +50
System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +6785
System.Web.UI.Page.ProcessRequest(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +242
System.Web.UI.Page.ProcessRequest() +80
System.Web.UI.Page.ProcessRequestWithNoAssert(HttpContext context) +21
System.Web.UI.Page.ProcessRequest(HttpContext context) +49
ASP.usercontrols_poll_poll_poll_cs_aspx.ProcessRequest(HttpContext context) in App_Web_gzlosr8_.0.cs:0
System.Web.CallHandlerExecutionStep.System.Web.HttpApplication.IExecutionStep.Execute() +181
System.Web.HttpApplication.ExecuteStep(IExecutionStep step, Boolean& completedSynchronously) +75
———————————-
any help will be appreciated
July 18th, 2011 at 10:27 AM
81 errors when using VS 2010… any idea?
October 14th, 2011 at 10:36 AM
Thanks for sharing your project;
Can I use and modify your code and publish it as open source? I am in need for simple poll for an umbraco site and I do not want to build one from scratch.
November 15th, 2011 at 1:27 PM
Hi Ansar, thanks again for sharing your source code. My company has released umbraco polls widget based on your code;
http://our.umbraco.org/projects/website-utilities/mapteams-polls
source code at codeplex
http://mapteamspolls.codeplex.com/