Comments on: Using jQuery to directly call ASP.NET AJAX page methods

By: Dave Ward

Dave Ward — Mon, 01 Mar 2010 03:10:23 +0000

Yes, the content-type is necessary. If you call a page method without the correct content-type (or with a method other than POST), ASP.NET will treat the request as a normal GET request to the ASPX page itself.

By: Ron

Ron — Mon, 01 Mar 2010 00:54:42 +0000

First of all, many thanks to Dave Ward. It’s just fantastic work.
However, Dave, I have one question. Is it neccessary to include contentType: “application/json; charset=utf-8″ in our ajax call ? My call was returning error without this, if I enter any other dataType option like html,text,xml etc. Also, if I don’t write anything at all, it returns the entire page html, though I’m calling a page method.

By: BinzBlog » Unit Testing Javascript

BinzBlog » Unit Testing Javascript — Sat, 27 Feb 2010 16:27:03 +0000

[...] calls have to be static and must be decorated with the [Webmethod] attribute. Here is a great blog post going into great detail about exactly how to call an ASP.net pagemethod from jQuery. We [...]

By: billigflug

billigflug — Fri, 26 Feb 2010 15:04:49 +0000

This blog is my favorite, congratulates.

By: JK

JK — Thu, 25 Feb 2010 01:58:11 +0000

Thanks, it was pretty easy to get /GetDate working by following your example.

The next thing I did was to add /HelloWorld to the same .aspx page. The result: “Unknown web method” Say what?

I’ve googled this high and low and found some stuff about VS caching the autogenerated code. But I cleared everything I can find and still had this error.

Then I found the reason – I forgot to make it static.

I just want to say thanks a lot .NET for allowing a webmethod to compile when it wasnt static. Thanks a lot .NET for the *really* helpful error message that I spent hours trying to resolve.

By: Umzug München

Umzug München — Tue, 23 Feb 2010 21:15:29 +0000

Hello, Very good article. I will continue to pursue this article, as it is written is very interesting. Since we are interpreted very much on good information. Best regards :-)

By: bogdan

bogdan — Wed, 10 Feb 2010 07:24:48 +0000

Thanks for the reply; i only asked because i currently am searching for ways to get rid of ScriptManager and all the axd files it produces(i had a update panel implementation). It’s just to much and i find it to be quite a waist of resources.
So, my priority is to have ajax without all those files.

We tried to find a way to keep PageMethods without ScriptManager, or somehow to call a server side function from Javascript in front end, but that did not work till now.
What we could do, is to use a aspx file as a source for XmlHTTPRequest. It is ok, meaning that it does the job. However, i would like to implement your idea, so i will try it as you suggested.

Thank you,

By: Dave Ward

Dave Ward — Tue, 09 Feb 2010 18:21:58 +0000

If I understand, what’s getting you is that changes to a “global” variable in that Page instance isn’t necessarily visible to the webmethod call in a separate HttpContext. Consider using a Session variable instead, which is shared as you would expect.

By: Dave Ward

Dave Ward — Tue, 09 Feb 2010 18:17:50 +0000

Yes. You need the ASP.NET AJAX Extensions v1.0 installed and your project's web.config updated accordingly to expose the "page method" functionality. You'll also need to be aware that the ".d" isn't present in the response from 2.0 JSON services.

By: bogdan

bogdan — Tue, 09 Feb 2010 08:41:31 +0000

Hello,

Can this be done in .net 2.0 Framework?

thank you,

By: Tom

Tom — Tue, 02 Feb 2010 07:49:53 +0000

And that is what I was doing – I would use a webmethod call to a function that would return to me the value of a global variable in the code-behind. I did this for 2 variables, one function each. That global variable would get updated as the server code ran – as it was polling records in a database in a “foreach” loop and updating this global counter variable as it went. Another global variable was assigned dt.Rows.Count – the total rows in the DataTable, and had a webmethod function call for it. Problem was, even though I had a JavaScript function to ask for the value in a loop until it equaled the total rows, it never showed progress, it was just instantaneous – the postback didn’t happen until the database loop had run. By then, you get a bar that is all the way done, instead of one that got generated on the fly as the database was being looped. If you have a way to do this with jQuery, please share, but I couldn’t get it to run until the server-side code completed, by which time it was too late to show its progress in a progress bar. Appreciate the help.

Thanks, Tom

By: Dave Ward

Dave Ward — Tue, 02 Feb 2010 02:12:58 +0000

The idea is that you’d poll your server-side process for its progress and adjust the jQuery progress bar after each callback. That’s what you described in your previous comment, isn’t it?

By: Tom

Tom — Tue, 02 Feb 2010 02:03:02 +0000

The only problem with the jQuery issue, at least in my case, it was that the server-side code with all finish before the jQuery (client-side) code with go through and build a bar. This had to happen while a server-side event was going on, not after it was already done.

By: Dave Ward

Dave Ward — Sat, 30 Jan 2010 01:06:44 +0000

You could use the jQuery UI Progressbar widget to handle that more cleanly than with a table. Assuming the service always returns an integer, something like:

function QueryService() {
  $.ajax({
    type: "POST",
    url: "PageName.aspx/MethodName",
    data: "{}",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function(msg) {
      // Update the progress bar completion amount.
      $('#progressbar').progressbar({ value: msg });
 
      // If not finished, do it all again.
      if (msg < 100) {
        QueryService();
      }
    }
  });
}

By: Tom

Tom — Mon, 25 Jan 2010 22:48:34 +0000

Was finally able to get it working to retrieve my value from the server-side. Was using the wrong version of jQuery before and forgot to update the webmethod name in the Default.js.

Is there a way to query the same webmethod over and over again until it reaches a certain value (i.e. 100), but report that value in the form of a table cell width, instead of as Div text? Basically trying to create a progress bar… table has 2 cells – first would grow as the other shrinks.