Javascript 如何使用WebForms更新客户端投票

我试图实现与堆栈溢出非常相似的投票。有多个项目旁边都有一个投票按钮。目前，我让它工作，但它是在服务器端完成的，发回，并需要一段时间来重新加载数据。以下是流程：

你点击投票按钮

它触发一个javascript函数，单击一个隐藏的ASP.NET按钮（这样做是因为每页有多个投票按钮）

按钮启动

它更新数据库，然后

页面发回并刷新，显示更新

如何利用javascript和AJAX消除这种糟糕的用户体验？我希望它像堆栈溢出一样工作，但我不使用MVC。任何帮助、例子和建议都会很好。谢谢

更新：

<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> 

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

<input type="image" src="images/vote.png" id="VoteMeUp1" value="321" />

我已经实现了这一点，但是当我在Web方法上放置断点时，它甚至不会触发，并且我总是收到错误警报。有什么想法吗

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> 

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

<input type="image" src="images/vote.png" id="VoteMeUp1" value="321" />

$（文档）.ready（函数（）{
$（“[id^=VoteMeUp]”。单击（函数（事件）{
var dta='{“VoteId”：'+$（event.target.val（）+'}'；
$.ajax(
{
键入：“POST”，
数据：dta，
url:'Default.aspx/SaveUpVote'，
contentType:“应用程序/json；字符集=utf-8”，
数据类型：“json”，
成功：功能（数据）{
//$（event.target）.text（“投票表决”）；
警惕（“投票表决”）；
},
错误：函数（x，y，z）{
警报（“哎呀，发生了一个错误。投票未被铸造！请稍后再试。”）；
}
}
);
});
});

代码隐藏（您可以使用C，我对这两种语言都很熟悉）：

<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> 

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

<input type="image" src="images/vote.png" id="VoteMeUp1" value="321" />

导入System.Web.Services
导入System.Web.Script.Services
作为布尔值的公共共享函数SaveUpVote（ByVal VoteID为整数）
作为布尔值的Dim测试=False
Dim mySQL作为新的SQLHandler
test=mySQL.UpdateVoteByID（VoteID）
回归试验
端函数

HTML:

<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> 

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

<input type="image" src="images/vote.png" id="VoteMeUp1" value="321" />

---

单击UpVote按钮时，对服务器进行ajax调用，在服务器上对数据库执行查询以增加投票

<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>

$（函数（）{
$（“#aUpVote”）。单击（函数（）{
$.post（“myajaxserverpage.aspx？qid=12”，函数（数据）{
警报（数据）；
});     
});
});

---

在服务器页面（myajaxsever.aspx）中，读取值并执行查询以增加投票列值。qid的值是您可以从页面中读取的问题id，因为它将是动态的。

当对给定按钮进行投票时，使用ajax调用服务器方法（对于aspx），如下所示：

  $(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.");
            }
          }
        );
    });
  });

在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;
    }

示例HTML：

1-投赞成票
2-投赞成票

---

最简单的方法是WebMethods

在EnablePageMethods设置为true的情况下，向页面添加ScriptManager

aspx页面：

<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true" />

在javascript事件中，您可以通过pagemethods访问隐藏的代码，并定义调用成功和失败案例的函数：

javascript:

PageMethods.ChangeVote("sent item", OnChangeVoteComplete,OnChangeVoteFail);

function OnChangeVoteComplete(arg){
    //arg is the returned data
}

function OnChangeVoteFail(arg){
    //do something if it failed
}

---

success函数接收WebMethod返回的数据。您可以使用它来更新页面上的显示。

这一切都很有意义，非常感谢。不过，我在理解javascript部分时遇到了一些困难。在哪里放置OnChangeVoteComplete和OnChangeVoteFail？这些只是要添加到我的类中的其他方法吗？另外，在测试中，我没有让函数触发onclick事件……OnChangeVoteComplete和OnChangeVoteFail是在服务器端处理完成后在客户端调用的javascript函数。OnChangeVoteComplete one将以单个参数的形式从WebMethod接收任何返回的数据。这正是我想要的。这可能是一个愚蠢的问题，但值得一问。我会在页面上有许多按钮，如下所示。如何让javascript函数知道是哪一个函数，而不必在页面加载时为每个函数编写一个实例<代码>投票这是一个非常好的问题。您可以将按钮的“id”（或应用程序使用的任何元素类型）设置为数据库表的列名。我已经修改了我的答案来说明这个技巧。嘿，罗恩，你以前真的更接近它了。列名每次都是相同的，您用编辑回答了我问题的第一部分

$（“[id^=VoteMeUp]”

——但第二部分是针对每个VoteMeUp，将有一个vid，我如何将其放入dta？本质上，每个投票按钮旁边都是投票数，因此我想在插入完成后更新该字段，如果出现错误（用户未登录等），只需弹出一个警报，即：

12个投票9个投票

etc…这很奇怪。此时，您将需要调试客户机/服务器。将“debugger”放在“var dta”之前并使用IE。在调试器打开后，将断点放在“success”和“error”函数中。也可以在VB函数中设置断点。然后使用即时窗口显示变量（y，z），如果成功，则显示数据。