jQuery-AJAX calling ASP.NET page method. How to return value back to jQuery?

Question

If I use jQuery AJAX to call a specific ASP.NET page method how to have that method return a value back to the AJAX method that called it?

Update

Answer 1

There are two ways to skin this cat (that I am familiar with).

1. The ".Net Way" which involves a Web Method and a Script Manager (see here: http://geekswithblogs.net/frankw/archive/2008/03/13/asp.net-ajax-callbacks-to-web-methods-in-aspx-pages.aspx).

2. The "Old Skool Way" which involves simply writing a response out by determining what was called. Typically you'd use a framework like MVC so going to http://www.MyWebsite.com/Object/Method/Id can map back to Object.Method(id).

You can do this without a framework like MVC but it makes things a little more difficult and, if you go that route, you should really use an ASP.Net handler rather than an actual page (since you don't need the Aspx overhead). This is an Ashx file.

Answer 2

With pure ASP.NET (not talking WCF here) I'd go with a handler (ASHX) file, and use JSON as the interchange format. I won't get into the details of JSON (here is a decent start), but the idea is a lightweight handler on the server that generates json text and returns it to the client, which can then use the structure easily in javascript.

This is obviously a simplified example but the gist is the JSON can be data driven from the server and easily consumed by the javascript on the client.

server:

<%@ WebHandler Language="C#" Class="Handler" %>

using System;
using System.Web;

public class Handler : IHttpHandler {

    public void ProcessRequest (HttpContext context) {
        context.Response.ContentType = "text/json";
        context.Response.WriteFile("~/myData.json");
    }

    public bool IsReusable {
        get {
            return false;
        }
    }
}

client:

myData = 
      (function () 
       {
          var json = null;
          $.ajax({
              'async': false,
              'global': false,
              'url': "handler.ashx",
              'dataType': "json",
              'success': function (data) {    
                  // this code is called when the 
                  // data is returned from the server              
                  json = data;
              }
          });
          return json;    
      }
          )(); 

alert(myData.MyArray[0].MyProperty);

Answer 3

You can use JQuery with page methods this way: http://encosia.com/2008/05/29/using-jquery-to-directly-call-aspnet-ajax-page-methods/

The success callback contains a parameter with the returning data.

HTH.