If you might ask, what would I want to use jQuery instead of ASP.NET AJAX (which is heavily integrated into WCSF, especially with its new bundle release), the answer would be “bandwidth” a.k.a performance.

While ASP.NET AJAX handles most asynchronous callback and partial-update rendering, it comes with a trade-off; you couldn’t control the data format exchanged between the server and the client. If you monitors the HTTP request made by ASP.NET AJAX UpdatePanel (using Fiddler or FireBug), you would see that even tiny update would require UpdatePanel retrieve the whole HTML code of that particular panel.

Compare it to jQuery, that enables developer to specify what data gets exchanged, it is possible to exchange only the neccesary data (preferably in JSON format, since it can be used directly by client-script to update the view). For more detailed explanation, refer to Dave’s post.

Alternative Solution

If you refer to Dave’s post, he posted a solution on how to use ASP.NET AJAX and still be able to use JSON data format. However, I still feel that ASP.NET AJAX generates a lots of overhead. I decided to try to use jQuery instead. The problem is, there is no straight-forward way to integrate both, especially how to call page-methods from jQuery (without using ASP.NET AJAX). One solution is to create HttpHandler to handle all AJAX-call, or one HttpHandler for each AJAX-call. But somehow, I think that solution would lead to scaterred logic in both pages and HttpHandler code.

I came up with a solution that allows all the logic reside in the related page.

Client-Side

For example, the client-side wants to update a view using data obtained from AJAX-call.

$.getJSON("Default.aspx?type=ajax&operation=get_data", function(result) {
$("#result_panel).text(result);
}
);

If you notice, the jQuery’s getJSON parameters, first parameter is the URL, and the second one is the callback function. In the URL, I included some parameters regarding the AJAX-call. The type is set to ajax, which is to notify that this request is AJAX-call. The operation parameter is used to enable several AJAX-call within one page.

Server-Side


protected void Page_Load(object sender, EventArgs e)
{
  if(!this.IsPostBack)
  {
  if(Request.QueryString["type"] != null && Request.QueryString["type"] == "ajax")
  {
  HandleAjaxCall();
  }
  }
}

private void HandleAjaxCall()
{
  if(Request.QueryString["operation"] != null && Request.QueryString["operation"] == "get_data")
  {
  Response.Write("This is result from server");
  }
  Response.Flush();
  Response.Close();
}

In the page’s code, you need to intercept the request processing before it reaches standard life-cycle processing code (Page_Load, Page_Render, etc). The code in Page_Load event is pretty straight forward. The important point here lies in the HandleAjaxCall method, where the method ends with Response.Flush() and Response.Close(). If these two method aren’t present, the data returned to the client-script, will include the whole page’s HTML code, therefore we need to force the Response stream to close. Having finished those part, returning data to client-script is pretty straight forward. Just use Response.Write() with any data that you want. In the example above, I used simple string as the return value, but it is also possible to return a whole strongly-typed object value using JSON-format. I know it might not be an ‘elegant’ solution, but at least, it worked for me If anyone have better ways to do this, please comment mine

kick it on DotNetKicks.com