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.
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
- 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
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.
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
Now I will explain the source code of each page
We use this page to insert a new Poll and edit an existing 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.
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.
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
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.
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.
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.