Home/ Questions/Q 7599751
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T22:44:20+00:00

I’m trying to implement voting very similar to Stack Overflow’s. There are multiple items

  • 0

I’m trying to implement voting very similar to Stack Overflow’s. There are multiple items that all have a vote button next to it. Currently, I have it working, but it’s done server side, posts back, and takes a while to reload the data. Here is the flow:

  1. You click the vote button,
  2. it fires a javascript function which clicks a hidden ASP.NET button (did it this way because there are multiple vote buttons per page),
  3. the button fires,
  4. it updates the database, and then
  5. the page posts back and refreshes, showing the update.

How do I leverage javascript and AJAX to eliminate this bad user experience? I want it to work like Stack Overflow’s, but I’m not using MVC. Any help, examples, suggestions would be great. Thanks.

Update:

I have this implemented, but when I place breakpoints on the Web Method it doesn’t even fire and I always get the error alert. Any ideas?

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 (you can use C#, I’m familiar with both):

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    When a vote is cast for a given button, call the server method using ajax (for aspx) as follows:

      $(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;
    }

    Sample HTML:
    …

    <body>

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

</body>

    …

    • 0