Using PageMethods with jQuery

Question

Simply put I want to call public static methods decorated with WebMethod attribute inside my code-behind C# file from jquery.ajax to get some json and other simple stuff (in different functions). But instead I'm getting whole page :'(

I'm not using asp.net AJAX though I'm developing for .NET 3.5 framework and using VS 2008. (There are some restrictions from client)

Please let me know if I can use page-methods with using asp.net ajax or If not what is other simple solution?

Answer 1

I am not sure but i think WebMethods are accessible only through asp.net ajax. i may be wrong though, because we dont use it that way at all. We do it in a slightly different way.

We have built a aspx page which accepts all our AJAX requests and passes them to the subsequent methods.

Server side code

If Not (Request("method") Is Nothing) Then
            method = Request("method")
            username = HttpContext.Current.User.Identity.Name.ToString
            Select Case UCase(method)
                Case "GETPROJECTS"
                    Response.ContentType = "text/json"
                    Response.Write(GetProjects(Request("cid"), Request("status")))
                    Exit Select
        end select
end if

Client Side code [using jquery]

$.ajaxSetup({
        error: function(xhr, msg) { alert(xhr, msg) },
        type: "POST",
        url: "Ajax.aspx",
    beforeSend: function() { showLoader(el); },
        data: { method: 'GetProjects', cid: "2", status:"open"},
        success: function(msg) {
            var data = JSON.parse(msg);
            alert(data.Message);
        },
        complete: function() { hideLoader(el);  }
    });

Hope this helps.

Answer 2

Russ Cam posted this link in response to another question (so if this helps, go up vote his answer ;)):

Using jQuery to directly call ASP.NET AJAX Page Methods

Answer 3

Dave Ward has a series of posts that use jQuery directly with ASP.Net PageMethods, no MS Ajax UpdatePanel required. In particular this post will get you started.

Answer 4

After much deliberations I found the problem. I was using jquery's editable plugin. This was source of the problem. When jeditable calls jquery's ajax it sets ajax options like this:

    var ajaxoptions = {
        type: 'POST',
        data: submitdata,
        url: settings.target,
        success: function(result, status) {
            if (ajaxoptions.dataType == 'html') {
                $(self).html(result);
            }
            self.editing = false;
            callback.apply(self, [result, settings]);
            if (!$.trim($(self).html())) {
                $(self).html(settings.placeholder);
            }
        },
        error: function(xhr, status, error) {
            onerror.apply(form, [settings, self, xhr]);
        }
    };

so it was sending the things as simple html and to use this with page methods we need to setup the things so that it sends as json. So we need to add something to the settings like this:

    var ajaxoptions = {
        type: 'POST',
        data: submitdata,
        url: settings.target,
        dataType: 'json', //Data Type
        contentType: 'application/json; charset=utf-8', //Content Type
       //....other settings
    };

So I put two new properties in settings dataType and contentType and changed above to this:

    var ajaxoptions = {
        type: 'POST',
        data: submitdata,
        url: settings.target,
        dataType: settings.dataType,
        contentType: settings.contentType,
       //....other settings
    };

Now another problem arised :( it was sending data (from submitdata property) as normal query-string which asp.net does not accept with json requests. So I had to use jquery's json plugin and change the way data is sent in ajax using following test on dataType:

    if (settings.dataType == "json") {
        if ($.toJSON) {
            submitdata = $.toJSON(submitdata); 
        }
    }

and it works like breeze!!!