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

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

解决方法:

对给定的按钮进行表决时,请使用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-如何使用WebForms更新投票客户端

相关推荐