Voting System Like SO - C#, Asp.net, Webforms

Question

There are a lot of questions similar to this but none dealing with webforms and c# that I have found.

I have Linq-to-SQL, a Vote table where I want to record the vote records(Voteup/down/time/ipaddress/user etc)

Is this the way to do it or is there a better way:

Make updown imgs, hide an id of the object being voted on somewhere in there(where?) when you click an img jquery sends you to an ashx page that returns true if it was able to create the vote record and then set the img's to color/greyscale based on the response of the ashx page?

Bonus points for examples or links to examples =D

PS. I see a lot of views on this in a short amount of time. I will post my final code this evening.

Answer 1

I would do it the way you're saying, but in the database I'd make more use of the relational database features.

Such as having a users table with a one to many relationship to the questions table. If you want them (users) to be able to ask question too, you need a table with each users questions, that another one-to-many relationship. Then you also need a votes table that has a one-to-many relationship with the questions table and the users table, so you can keep track of which user voted on the question and which question it was.

The main thing is that if you use the relational database system properly, it'll make your life easier keeping track of things in the background, and therefore you'll give the user a better experience.

That's one thing. Then make your vote images clickable, so use onclick event, with JQuery that should be pretty simple.

Use AJAX to do the postback when clicking on the image, so you don't have to do a post on the whole page each time a user votes. That will increase user experience too. A lot of tutorials out there on AJAX with ASP.NET.

Hope this is of some help!

Answer 2

I think you've got the general idea. You can do it with traditional WebForms AJAX, or use jQuery a $.ajax() call to do the whole thing- register the vote, return a result, and modify the image.

Here's a framework for a jQuery approach:

Javascript:

function registerVote(voteType){
   $.ajax(function (){
          //get the name of the parent DIV 
          //(using the jQuery selector), which is the ID of the thing you're voting on
          //Use Success and Error callbacks to register a success or error. 
          //On success, change the selected vote image to the highlighted version
   })

}

HTML:

<div id="ThingToVoteOn1">
<img src="voteUp" onclick="registerVote('UP')">
<img src="voteDown" onclick="registerVote('DOWN')">

</div>