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

【问题标题】：How to update votes client side using WebForms如何使用 WebForms 更新投票客户端
【发布时间】：2012-03-25 13:07:04
【问题描述】：

我正在尝试实现与 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" />

【问题讨论】：

标签： javascript jquery asp.net ajax webforms

【解决方案1】：

当对给定按钮进行投票时，使用 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： ...

<body>

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

</body>

...

【讨论】：

这正是我想要的。这可能是一个愚蠢的问题，但是，值得一问。我将在页面上有许多按钮，如下所示。如何让 javascript 函数知道哪个函数，而不必在页面加载时写出每个函数的实例？ <body> <button id="VoteMeUp1">Vote</button> <input id="vid1" type="hidden" value="817"></input> <button id="VoteMeUp2">Vote</button> <input id="vid2" type="hidden" value="818"></input> <button id="VoteMeUp3">Vote</button> <input id="vid3" type="hidden" value="819"></input> </body>
这是一个很好的问题。您可以将按钮（或您的应用程序使用的任何元素类型）的“id”设置为数据库表的列名。我已经修改了我的答案来说明这种技术。
嘿，罗恩，你以前真的很接近。列名每次都是相同的，您用编辑$("[id^=VoteMeUp]") 回答了我的问题的第一部分 - 但第二部分是针对每个 VoteMeUp，会有一个 vid，我如何将它放入 dta？基本上每个投票按钮旁边是投票数，所以我想在插入完成后更新该字段，并在发生错误时弹出警报（用户未登录等）
即：<button id="VoteMeUp1"><span id="vid1">12 Votes</span><button id="VoteMeUp2"><span id="vid2">9 votes</span> 等...
这很奇怪。此时，您将需要调试客户端/服务器。将“调试器”放在“var dta”之前并使用 IE。调试器打开后，在“成功”和“错误”函数中放置断点。您也可以在 VB 函数中设置断点。然后使用即时窗口显示变量 (y,z)，如果成功则显示数据。

【解决方案2】：

最简单的方法是 WebMethods。

将 ScriptManager 添加到您的页面，并将 EnablePageMethods 设置为 true

aspx 页面：

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

在后面的（c# 这里）代码中为增加投票的方法分配一个 web 方法属性：

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

【讨论】：

这一切都说得通，非常感谢。不过，我在理解 javascript 部分时遇到了一些麻烦。我在哪里放置 OnChangeVoteComplete 和 OnChangeVoteFail？这些只是添加到我的班级的其他方法吗？此外，在测试中，我没有得到触发我的 onclick 事件的功能......
OnChangeVoteComplete 和 OnChangeVoteFail 是在服务器端处理完成后在客户端调用的 JavaScript 函数。 OnChangeVoteComplete 将接收来自 WebMethod 的任何返回数据作为单个参数。

【解决方案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) 中，读取值并执行查询以增加 Vote 列值。 qid 的值是您可以从页面中读取的问题 ID，因为它将是动态的。

【讨论】：