我想实现投票非常相似，堆栈溢出的。有迹象表明，都有它旁边的按钮投票多个项目。目前，我有工作，但它的完成服务器端，帖子后面，需要一段时间才能重新加载数据。这里是流：
您点击投票按钮， 在它触发一个JavaScript函数，点击一个隐藏的ASP.NET按钮（这样做是这种方式，因为每个网页有多个投票按钮）， 按钮火灾， 在其更新的数据库，然后 页回和刷新，显示更新。我如何利用JavaScript和AJAX来消除这种不好的用户体验？我想它的工作像堆栈溢出的，但我不使用MVC。任何帮助，实例，建议将是巨大的。谢谢你。
更新：
我有这样的实现，但是当我把断点上的Web方法，它甚至不火，我总是得到错误警报。任何想法？
的javascript：
＆LT;脚本类型=文/ JavaScript的＆GT;
$（文件）。就绪（函数（）{
$（[编号^ = VoteMeUp]）。点击（函数（事件）{
VAR DTA ='{VoteId：+ $（将event.target）.VAL（）+'};
$阿贾克斯（
{
键入：POST，
数据：DTA，
网址：Default.aspx的/ SaveUpVote'，
的contentType：应用/ JSON的;字符集= UTF-8，
数据类型：JSON，
成功：功能（数据）{
//$(event.target).text("Vote，铸造）;
警报（投票，铸造）;
}，
错误：函数（X，Y，Z）{
警报（哎呀发生错误的投票无法铸造请稍后重试！）;
}
}
）;
}）;
}）;
＆LT; / SCRIPT＆GT;
code背后（您可以使用C＃，我熟悉这两种）：
导入System.Web.Services
进口System.Web.Script.Services
＆LT;的WebMethod（）＆GT;
公共共享功能SaveUpVote（BYVAL VoteID为整数）作为布尔
昏暗的测试由于布尔= FALSE
昏暗的MySQL作为新SQLHandler
测试= mySQL.UpdateVoteByID（VoteID）
返回测试
端功能
HTML：
＆LT;输入类型=形象SRC =图像/ vote.pngID =VoteMeUp1值=321/＆GT;
解决方案
在赞成和反对票数投给一个给定的按钮，调用使用AJAX（对于ASPX）如下服务器方法：
$（文件）。就绪（函数（）{
$（[编号^ = VoteMeUp]）。点击（函数（事件）{
VAR DTA ='{VoteId：+ $（将event.target）.VAL（）+'};
$阿贾克斯（
{
键入：POST，
数据：DTA，
网址：Default.aspx的/ SaveUpVote'，
的contentType：应用/ JSON的;字符集= UTF-8，
数据类型：JSON，
成功：功能（数据）{
$（将event.target）的.text（投票，铸造）;
}，
错误：函数（X，Y，Z）{
警报（哎呀发生错误的投票无法铸造请稍后重试！）;
}
}
）;
}）;
}）;
在Default.aspx.cs
[WebMethod的]
公共静态无效SaveUpVote（INT VoteId）
{
串即updateSQL =UPDATE表名SET票数=票数+ 1，其中PKID = @VoteId;
//做数据库的东西
返回;
}
HTML示例： ......
＆LT;身体GT;
＆LT;按钮ID =VoteMeUp1值=817大于1 - 投票该＆lt; /按钮＆GT;
＆LT;按钮ID =VoteMeUp2值=818→2 - 投票为＆LT; /按钮＆GT;
＆LT; /身体GT;
...
I'm trying to implement voting very similar to Stack Overflow's. There are multiple items that all have a vote button next to it. Currently, I have it working, but it's done server side, posts back, and takes a while to reload the data. Here is the flow:
You click the vote button, it fires a javascript function which clicks a hidden ASP.NET button (did it this way because there are multiple vote buttons per page), the button fires, it updates the database, and then the page posts back and refreshes, showing the update.How do I leverage javascript and AJAX to eliminate this bad user experience? I want it to work like Stack Overflow's, but I'm not using MVC. Any help, examples, suggestions would be great. Thanks.
Update:
I have this implemented, but when I place breakpoints on the Web Method it doesn't even fire and I always get the error alert. 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" />
解决方案
When a vote is cast for a given 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;
}
Sample HTML: ...
<body>
<button id="VoteMeUp1" value="817">1 - Vote for this</button>
<button id="VoteMeUp2" value="818">2 - Vote for that</button>
</body>
...
相关推荐
最新文章