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

Question

我正在嘗試實現與Stack Overflow非常類似的投票。 有多個項目旁邊都有一個投票按鈕。 目前，我有它工作，但它已完成服務器端，回發，並需要一段時間來重新加載數據。 這是流程：

你點擊投票按鈕，
它會觸發一個單擊隱藏的ASP.NET按鈕的javascript函數（這樣做是因為每頁有多個投票按鈕），
按鈕觸發，
它更新數據庫，然后
頁面回發並刷新，顯示更新。

如何利用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>

Code Behind（你可以使用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。

將EnableScriptMethods設置為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 個解決方案

解決方案1
2 已采納 2012-03-08 00:16:45

解決方案2
2 2012-03-08 00:29:29

解決方案3
0 2012-03-08 00:06:34

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

問題描述

3 個解決方案

解決方案1 2 已采納 2012-03-08 00:16:45

解決方案2 2 2012-03-08 00:29:29

解決方案3 0 2012-03-08 00:06:34

解決方案1
2 已采納 2012-03-08 00:16:45

解決方案2
2 2012-03-08 00:29:29

解決方案3
0 2012-03-08 00:06:34