Question

我正在尝试实现与Stack Overflow非常类似的投票。有多个项目旁边都有一个投票按钮。目前，我有它工作，但它已完成服务器端，回发，并需要一段时间来重新加载数据。这是流程：

点击投票按钮，
它会触发一个javascript函数，点击一个隐藏的ASP.NET按钮（这样做是因为每页有多个投票按钮），
按钮触发，
它更新数据库，然后
页面回发并刷新，显示更新。

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

更新

我实现了这个，但是当我在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>

代码背后（您可以使用C＃，我对两者都很熟悉）：

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

Answer 1

当为给定按钮投票时，使用ajax（对于aspx）调用server方法，如下所示：

  $(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： ...

<body>

    <button id="VoteMeUp1" value="817">1 - Vote for this</button>
    <button id="VoteMeUp2" value="818">2 - Vote for that</button>

</body>

...

Answer 2

最简单的方法是使用WebMethods。

在EnablePageMethods设置为true的情况下将ScriptManager添加到您的页面

aspx页面：

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

为方法分配一个web方法属性，该方法将（c＃here）代码中的投票增加：

c＃代码背后：

[System.Web.Services.WebMethod] 
[System.Web.Script.Services.ScriptMethod] 
public string ChangeVote(string Arg){
    ...logic to change votes
}

在您的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返回的数据。您可以使用它来更新页面上的显示。

Answer 3

当使用点击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>

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

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

3 个答案: