How to update guest side of votes with WebForms
I am trying to implement a vote very similar to Stack Overflow. There are several elements that have a vote button next to it. Currently it works for me, but it works server side, sends messages and takes a while to reload data. Here is the stream:
- Click the vote button,
- it triggers a javascript function that clicks a hidden ASP.NET button (it was done this way because there were multiple vote buttons on the page),
- the button starts,
- it updates the database and then
- the page goes back and refreshes showing the update.
How can I use javascript and AJAX to eliminate this bad user experience? I want it to work like Stack Overflow, but I am not using MVC. Any help, examples, suggestions would be great. Thank.
Update:
I've got this implemented, but when I put breakpoints in the web method it doesn't even fire and I always get an error. Any ideas?
JavaScript:
<script type="text/javascript">
$(document).ready(function () {
$("[id^=VoteMeUp]").click(function (event) {
var dta = '{ "VoteId":' + $(event.target).val() + '}';
$.ajax(
{
type: 'POST',
data: dta,
url: 'Default.aspx/SaveUpVote',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
//$(event.target).text("Vote Casted");
alert("Vote Casted");
},
error: function (x, y, z) {
alert("Oops. An error occured. Vote not casted! Please try again later.");
}
}
);
});
});
</script>
Code Behind (you can use C #, I'm familiar with both):
Imports System.Web.Services
Imports System.Web.Script.Services
<WebMethod()>
Public Shared Function SaveUpVote(ByVal VoteID As Integer) As Boolean
Dim test As Boolean = False
Dim mySQL As New SQLHandler
test = mySQL.UpdateVoteByID(VoteID)
Return test
End Function
HTML:
<input type="image" src="images/vote.png" id="VoteMeUp1" value="321" />
source to share
If poll is selected for this button, call the server method using ajax (for aspx) as follows:
$(document).ready(function() {
$("[id^=VoteMeUp]").click(function(event) {
var dta = '{ "VoteId":' + $(event.target).val() + '}';
$.ajax(
{
type: 'POST',
data: dta,
url: 'Default.aspx/SaveUpVote',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(data) {
$(event.target).text("Vote Casted");
},
error: function(x, y, z) {
alert("Oops. An error occured. Vote not casted! Please try again later.");
}
}
);
});
});
In Default.aspx.cs
[WebMethod]
public static void SaveUpVote(int VoteId)
{
string UpdateSQL = "UPDATE TableName SET Votes = Votes + 1 WHERE PKID = @VoteId";
//do DB stuff
return;
}
Example HTML: ...
<body>
<button id="VoteMeUp1" value="817">1 - Vote for this</button>
<button id="VoteMeUp2" value="818">2 - Vote for that</button>
</body>
...
source to share
The easiest way to do this is with WebMethods.
Add a ScriptManager to your page with EnablePageMethods set to true
The aspx page:
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true" />
Assign the web method attribute to the method that increases the voices in your (C # here) code behind:
C # code behind:
[System.Web.Services.WebMethod]
[System.Web.Script.Services.ScriptMethod]
public string ChangeVote(string Arg){
...logic to change votes
}
in your javascript event, you can access the code through pagemethods and define functions to invoke success and failure:
JavaScript:
PageMethods.ChangeVote("sent item", OnChangeVoteComplete,OnChangeVoteFail);
function OnChangeVoteComplete(arg){
//arg is the returned data
}
function OnChangeVoteFail(arg){
//do something if it failed
}
the success function receives the data returned by the WebMethod. You can use this to update the display on the page.
source to share
When you use UpVote button clicks, make an ajax call to the server where you are making the request, re-query the database to increase the vote.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
</head>
<body>
<a href="#" id="aUpVote">Vote UP </a>
</body>
<script type="text/javascript">
$(function(){
$("#aUpVote").click(function(){
$.post("myajaxserverpage.aspx?qid=12",function(data){
alert(data);
});
});
});
</script>
</head>
and on the server page (myajaxsever.aspx) read the values and run a query to increase the value of the Vote column. The qid value is the id of the question, which you can read from the page because it will be dynamic.
source to share