Making .NET Ajax request using jQuery

Question

Hi,

I am just wondering that, is there anyway to make an Ajax request using jquery ("$.ajax") and making partial rendering without using the .NET Ajax framework (without script manager).

I have tried this before, but it's executing the page_load every time and not reaching to the pagemethod.

function doAsync() 
{ 
   jQuery.ajax({ 
   type: "POST", 
   url: "/WebForm1.aspx/testMethod", 
   error: function (xhr, status, error) { alert(status); }, 
   success: function (response) { alert('suc'); }
   )};
}

 [WebMethod] 
 public static void testMethod() 
 {
     //server side code 
 } 

Is there anything wrong here?

Thanks!

Answer 1

Well how webforms is setup you can't actually get to the code behind file since that would require you to go through the entire page life cycle. You can't just have some method in your code behind file and try to just target it.

So you need to either make a web service or what I like to do is use a generic handler.

So you would go to add - add new item - generic handler(.ashx)

It would generate a file like this(the follow code has some more stuff in it that is not generated by default).

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

using System;
using System.Web;

public class FileNameOfGenricHandler: IHttpHandler {

    public void ProcessRequest (HttpContext context) {

        // use context.Request to get your parameter fields that you send through ajax.
        int ID =Convert.ToInt32(context.Request["sendID"]);

        // do something with the variable you sent.

       // return it as a string - respone is just a string of anything could be "hi"
       context.Response.ContentType = "text/plain";
       context.Response.Write(response);

    }

    public bool IsReusable {
        get {
            return false;
        }
    }

}

On jquery side

  // Post to the path like this ../FolderName/FolderName/FileName.ashx(or whatever you stuck your generic handler file).
    $.post('../FolderName/FileNameOfGenricHandler.ashx', { sendID: id }, function(response)
                {
                     alert(response)
});

One downside with the generic handler though is for every different ajax request you want to make you will need its own generic handler. So if you want to create a user, delete a user and update a user through ajax you will have to have 3 generic handlers.

Here is a similar tutorial I used.

http://sites.google.com/site/spyderhoodcommunity/tech-stuff/usingjqueryinaspnetappswithhttphandlersashx

Answer 2

Consuming Web Services through jQuery Ajax methods :

http://tinyurl.com/34jty7

Consuming Methods residing on an Aspx Page through jQuery Ajax Methods

http://tinyurl.com/6z98l6

Actually the articles above are the ones that taught me jQuery Ajax truly. If it is your first time, don't worry ! They are really easy to comprehend.

jQuery Ajax Methods :

• ajax() : The low-level ajax method for every ajax call
• post() : Specialized for post methods
• get() : Specialized for get methods
• getJSON(): Specialized for get json type result set
• load() : To Inject html portion into html element on the page.

Answer 3

You can do this using page methods. Basically, you create a static method and add the WebMethod attribute and use it as if it were a web service method.

Answer 4

What you're missing is the content-type. To make a request to a page method, you must make the call exactly like this:

$.ajax({
  type: "POST",
  url: "/WebForm1.aspx/testMethod",
  data: "{}",
  contentType: "application/json; charset=utf-8",
  dataType: "json",
  success: function(msg) {
    // Do something interesting here.
  }
});

See this for more detailed information: http://encosia.com/2008/05/29/using-jquery-to-directly-call-aspnet-ajax-page-methods/