How do I make an onclientclick post back using jQuery with asp.net

Question

I want to recreate the the update panel postback without using an update panel to do the postback. What is the generic method for doing this?

For example, on Stackoverflow, when you vote up or down on a question it does a postback to update the database and I would bet they didn't use an update panel.

What do I have?

I have a table with table data. When I click on the td item as a whole column, I want to do an update to the database and also update a gridview on the page itself. The gridview shows all the currently clicked items in the table because it was updated via "our method".

Looking for a good generic method I could use for a lot of async postbacks without update panel.

Answer 1

The way that Stack Overflow works differs in two important ways from that CodeProject article.

• Stack Overflow is making its AJAX request against an ASP.NET MVC controller action, not a standalone ASPX page. You might consider this as the MVC analogue of an ASP.NET AJAX page method. In both cases, the ASPX method will lag behind in terms of performance.

• Stack Overflow's AJAX request returns a JSON serialized result, not arbitrary plaintext or HTML. This makes handling it on the client side more standardized and generally cleaner.

For example: when I voted this question up an XmlHttpRequest request was made to /questions/171000/vote, with a "voteTypeId" of 2 in the POST data.

The controller that handled the request added my vote to a table somewhere and then responded with this JSON:

{"Success":true,"NewScore":1,"Message":"","LastVoteTypeId":2}

Using that information, this JavaScript takes care of updating the client-side display:

var voteResult = function(jClicked, postId, data) {
  if (data.Success) {
    jClicked.parent().find("span.vote-count-post").text(data.NewScore);
    if (data.Message)
      showFadingNotification(jClicked, data.Message);
  }
  else {
    showNotification(jClicked, data.Message);
    reset(jClicked, jClicked);

    if (data.LastVoteTypeId) {
      selectPreviousVote(jClicked, data.LastVoteTypeId);
    }
  }
};

If you're using WebForms, the example of calling page methods that you found on my blog is definitely in the right ballpark.

However, I would suggest that you consider a web service for any centralized functionality (like this voting example), instead of page methods. Page methods seem to be slightly easier to write, but they also have some reuse drawbacks and tend to provide an illusion of added security that isn't really there.

This is an example of doing the same thing you found, but with web services (the comments on this post actually led to the post you found):

http://encosia.com/2008/03/27/using-jquery-to-consume-aspnet-json-web-services/