How do I make an onclientclick post back using jquery? asp.net

Question

Hey guys,

I need help. I want to recreate the the update panel postback without using a 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 a update to the database and also update a gridview on the page it self. The gridview shows all the currently clicked items in the table because it was updated via "our method"...

Please help, looking for a good generic method I could use for a lot of async postbacks without update panel.

Looking for a good tutorial of some sorts?

Thanks guys. Scott.

Answer 1

You can just use a standard AJAX call to accomplish this. Create a .aspx page which updates the database in its Page_Load method, and displays any desired information (like the current DB value after the update) as XML. Then make an AJAX call to that page using jQuery.

You can also return an HTML fragment (i.e. an updated GridView), and use jQuery to insert the updated HTML into the current page.

Edit: Sample 2 on this page should be very close to what you want:
http://www.codeproject.com/KB/ajax/AjaxJQuerySample.aspx

Answer 2

This link is what I found to be the best thing to do and allow me to use javascript and web methods.

Answer 3

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/