Как обновить голоса на стороне клиента с помощью WebForms - PullRequest
Новая
       4

Как обновить голоса на стороне клиента с помощью WebForms

3 голосов
/ 08 марта 2012

Я пытаюсь реализовать голосование, очень похожее на переполнение стека. Есть несколько пунктов, которые все имеют кнопку голосования рядом с ним. В настоящее время у меня это работает, но это делается на стороне сервера, отправляет сообщения назад и требует некоторое время для перезагрузки данных. Вот поток:

  1. Вы нажимаете кнопку голосования,
  2. запускает функцию javascript, которая щелкает скрытую кнопку ASP.NET (сделал это так, потому что на странице несколько кнопок голосования),
  3. кнопка срабатывает,
  4. обновляет базу данных, а затем
  5. страница отправляется назад и обновляется, показывая обновление.

Как использовать javascript и AJAX для устранения этого плохого пользовательского опыта? Я хочу, чтобы он работал как Stack Overflow, но я не использую MVC. Любая помощь, примеры, предложения будут великолепны. Спасибо.

Обновление:

Я реализовал это, но когда я ставлю точки останова на веб-метод, он даже не срабатывает, и я всегда получаю предупреждение об ошибке. Есть идеи?

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

Ответы [ 3 ]

2 голосов
/ 08 марта 2012

Когда голосование отдано за данную кнопку, вызовите метод сервера с помощью 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.");
            }
          }
        );
    });
  });

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

...

2 голосов
/ 08 марта 2012

Самый простой способ сделать это - WebMethods.

Добавьте ScriptManager на свою страницу с EnablePageMethods, установленным в true

Страница aspx: 

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

Назначьте атрибут веб-метода методу, который увеличивает голоса в вашем (c # здесь) коде:

c # код позади: 

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

в вашем событии javascript вы можете получить доступ к коду позади через методы страницы и определить функции для вызова в случае успеха и неудачи:

JavaScript: 

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

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

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

функция успеха получает данные, возвращаемые WebMethod. Вы можете использовать это для обновления отображения на странице.

0 голосов
/ 08 марта 2012

Когда вы нажимаете на кнопку UpVote, сделайте ajax-вызов на сервер, где вы выполняете запрос, повторно зарегистрируйте базу данных, чтобы увеличить голос.прочитайте значения и выполните ваш запрос, чтобы увеличить значение столбца голосования.Значение qid - это идентификатор вопроса, который вы можете прочитать со страницы, потому что он будет динамическим.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...