There seems to be some confusion among a lot of developers about Asp.net Ajax. This article will hopefully clear some doubts regarding what it is, what it isn’t and where jQuery comes in.

Ajax

Ajax stands for Asynchronous JavaScript And Xml. Ajax is used to asynchronously make a server side request from a web page. It does not need a full page refresh (a full postback in Asp.net terms) and can result in a few benefits:

1. The user does not have to see the whole page flash blank for every little thing that requires server side processing.

2. Only the required data is sent from the server to the client in response to an Ajax request. This reduces network traffic.

3. Only the required data is processed. So processing of other parts of the page is not needed. This reduces the server workload.

Microsoft created the XMLHTTP ActiveX control way back in 1999. Other browsers have added similar functionality in a native object called XmlHttpRequest (XHR). These objects are used to create and carry out Ajax requests. The technology was being used before the term Ajax officially came into being, and it became widely known when Google used it with GMail and Google Maps. Jesse James Garrett coined the name Ajax feeling the need for an appropriate shorthand. Presumably, he thought of the name while taking a shower in 2005.

Although the name suggests JavaScript and XML – and initially XML was used to transfer the data – nowadays data can be passed in other formats as well as XML. For instance, it’s very common to pass data between the server and client using JSON (JavaScript Object Notation). And although the XHR object is usually used to make Ajax calls, other methods like using an IFrame or dynamically created <script> tags can also be seen.

What Ajax Can’t Do

There are a few limitations to Ajax calls. The major ones are:

1. It can’t make a cross domain call. The request must be made to a url within the same domain. So, if your domain is www.yoursite.com, the request must go to a url within www.yoursite.com. It can’t go to www.darth-vader.com or anywhere else. [There are workarounds, like using JSONP – although whether JSONP is Ajax is subject to speculation.]

2. It can never ever upload a file to the server.

3. It can’t access files on the client machine.

4. Any other limitations that JavaScript has.

Asp.net Ajax

Asp.net Ajax is Microsoft’s framework for Ajax and JavaScript development. Although it’s name is Asp.net Ajax, it can do much much more than just Ajax. It has always consisted of client side JavaScript and integration into Asp.net WebForms. This has been a main point of confusion and caused many people to think that Asp.net Ajax can only be used from Asp.net. Along with that, there’s also the Asp.net Ajax Control Toolkit (ACT), which adds a bunch of functionality and features on top of Asp.net Ajax. If this all seems confusing, it’s probably because it is. And Microsoft has addressed this. The Asp.net Ajax framework has recently been reorganized and the new version is currently in Beta. To make things simpler, these are now the key aspects of Asp.net Ajax:

• Asp.net Ajax Library: This is a reorganization or the existing client side features (along with quite a few new ones) of Asp.net Ajax. This is a stand alone JavaScript library just like jQuery, scriptaculous, mootools etc. Although called Asp.net Ajax, it is in fact an entire JavaScript library that supports Object Oriented JavaScript, client templates, web service calls, animation, JSONP and a whole host of other things. It can be used with server side Asp.net, Asp.net MVC – even plain Html. Want to use it on a php page? Go right on ahead. It will work perfectly without .Net even installed on the server. This is completely client side, with no server dependencies. To add to that, the Asp.net Ajax Control Toolkit (ACT) has been incorporated into this library. So, you can use stuff like the CalenderExtender, ModalPopupExtender, HoverMenuExtender etc. without needing to use Asp.net. The Asp.net Ajax Library project is open source and maintained by the Codeplex Foundation (Microsoft recently donated the project to the Codeplex Foundation). You can find more information about the library (including detailed tutorials) at http://www.asp.net/ajaxlibrary/.

• Server Side Asp.net: Asp.net Ajax has rich server side integration into Asp.net. To utilize these features, you will need to be using Asp.net. The ScriptManager, UpdatePanel, UpdateProgress and other controls allow developers to use features like partial page updates, managing browser history, script combining, web service script registration etc. without having to write any JavaScript. Asp.net Ajax enables Ajax features while retaining drag and drop RAD functionality in WebForms. It also provides an infrastructure on which to build extender controls, script controls and components – custom server controls that use the Asp.net Ajax Library (the client side library mentioned above) – and takes care of registering the required scripts and resources at runtime. All the developer using the control needs to do is drag and drop the control onto a WebForms page with a ScriptManager and set the properties. The framework will do the rest.

• Ajax Control Toolkit: The Ajax Control Toolkit (ACT) adds a bunch of features and controls to Asp.net Ajax. Previously, this was a stand alone project hosted at codeplex. It was primarily used in WebForms scenarios. With the new-and-currently-in-beta version, the ACT has been incorporated into the Asp.net Ajax Library. All the controls of the toolkit are all present and can be used entirely from script. The ACT also has some server side components which can be used to make custom Asp.net Ajax server side control development easier. In addition, the server side components provide drag and drop functionality to all the controls and extenders in the client side ACT library. This makes using the controls easier in a WebForms environment, taking advantage of the ScriptManager control. While very easy to use with WebForms, it’s also very simple to use entirely from script (like in Asp.net MVC or plain Html). This has been a major improvement in the latest beta as it was quite cumbersome to use the toolkit before.

• jQuery: jQuery is another JavaScript library, just like the Asp.net Ajax library. It’s free, open source and the brainchild of John Resig, who initially released it in 2006. So why are we talking about it here? Well, jQuery has quite a few benefits and is a great JavaScript library. It’s very lightweight, has some awesome selector syntax as well as chaining support for expressions. Again, why am I mentioning this here? The Asp.net Ajax team was looking to incorporate similar features in the client side library of Asp.net Ajax. jQuery was gaining real popularity at that time. It could do complex JavaScript tasks with very little code. The motto of jQuery is “write less, do more”. Microsoft was also pushing the early versions of Asp.net MVC. Asp.net MVC really needed a JavaScript library that could handle Ajax, JSON and client side manipulation in a simple manner. More and more developers started using jQuery for this. It was decided that jQuery would be officially considered a part of Asp.net development. It was initially included into the Asp.net MVC project template, and since then has been included in Asp.net Ajax as well. All the controls in the ACT now work seamlessly with jQuery (in the latest beta of the Ajax Library). Microsoft also pledged bug reports, patches, tests etc. to the jQuery project. One thing to note is that although jQuery support is included in the Asp.net Ajax Library, you do not need to be using jQuery to use Asp.net Ajax (or even the client side Asp.net Ajax Library). Microsoft recommends using them both together as it will make development easier with less need to reinvent the wheel. jQuery is already a rocket powered missile in a tiny package. As such, jQuery complements Asp.net Ajax and using one does not force you to restrain from the other.

• Microsoft Ajax Content Delivery Network (CDN): Microsoft has CDN servers around the globe. And it hosts all of the JavaScript files in the Microsoft Ajax Library (including those for the ACT), jQuery, jQuery validation plug-in and the Asp.net Ajax scripts for Asp.net MVC on these servers. The files are cached and delivered to users of your website from their nearest location. This has a a few benefits:
  • The files reach the website user faster.
  • The files, once delivered, are cached on the browser too. Any other domain that uses the same file causes the browser to use the local cached version (since the file’s url is the CDN url, the domain remains constant). Hence, other websites using the CDN will load faster too.
  • The files are delivered from Microsoft’s servers. This reduces your server network bandwidth usage and reduces costs for you.
  • The CDN supports Http and Https. This means website users won’t get a pesky message asking them whether or not they want to show non-secure items.

You can learn more about the CDN here: http://www.asp.net/ajaxlibrary/CDN.ashx

So that’s it for an overview of what Asp.net Ajax actually is. If you wish to learn more, you can find a whole host of resources here: http://www.asp.net/ajax/

If we have a ModalPopupExtender with the id ‘modPopup_ModalPopupExtender’, and need to display or hide it in javascript, we can easily do this using the $find() function.

Let’s see this in action:

ASPX:

Javascript:

The code is pretty self explanatory. Hope that helps.

The CollapsiblePanelExtender is a cool way to convert simple panels to collapsible ones. It usually has a target panel, a control which can make it collapse, another (or the same) control to make it expand etc. Clicking the said controls will trigger the collapse/open behaviour.

We may need to sometimes control this behaviour from code - both client side javascript and server side code behind. Suppose we have a CollapsiblePanelExtender with the Id 'cpe1'. We wish to manipulate the state via code.

Client Side

Client side manipulation is pretty simple and can be found in the tutorials section in www.asp.net/learn - we just need to call these methods:

To open: $find('cpe1')._doOpen();
To close: $find('cpe1')._doClose();

The $find tracks down the behaviour object and calls the _doOpen or _doClose methods.

Server Side

This is surprisingly slightly trickier. You'd think that just calling

ScriptManager.RegisterClientScriptBlock(this, typeof(Page), DateTime.Now.ToString(), "$find('cpe1')._doOpen();", true);

would work. It doesn't. Any attempt to call $find('cpe1') results in a null. This is likely because of the fact that behaviours are added at the end and our script gets registered before the behaviour is available. The actual way to do it is actually quite simple (once you know how):

To open: cpe1.Collapsed = false; cpe1.ClientState = "false";
To close: cpe1.Collapsed = true; cpe1.ClientState = "true";

Setting just the Collapsed property is not enough, you need to set both. It's actually a lot less messy than registering javascript, but it is very annoying until you know it.

Hope that helps.

I was recently working on a project that used WCF web services extensively. Everything was ready for deployment, I deployed to the remote host, and voila – nothing works (nothing WCF related). After a LOT of frustration, I managed to make it work. I found two areas which were causing the problem:

1. The .svc extension was NOT setup right at our host. You can set this in the web.config webhandlers section for IIS 7, but not for IIS 6.0. I had IIS 7, but decided to bug my host to set up the extension on the server ;)

2. I had multiple host headers; i.e. my site worked for both http://mysite.com and http://www.mysite.com. To resolve this issue, you can either disable all but one if your host permits. Otherwise, you need to use a factory. Here’s an example of such a factory:

Granted, it can be way more efficient and you can do nifty tricks with the url to support both http:// and http://www, but I can happy to have just one for my webservice.

Next, you need to set the factory in the markup of the ,svc file. You can do it like this:

<%@ ServiceHost Language="C#" Debug="false" Factory="Shipping.WebService.MultipleIISBindingSupportServiceHostFactory" Service="Shipping.WebService.ClientService" CodeBehind="ClientService.svc.cs" %>

Hope that helps.

Wow...AMAZING…Hurray…I mean, like, WOW man…

In a very welcome turn of events, JQuery is now “officially” going to be part of Asp.net development. MS will provide support, annotated VS versions that’ll give us intellisense, provide us with demonstrations and tutorials on how jquery can work with features like the AJAX Control Toolkit, Asp.Net AJAX, client side templates – and all the time without modifying, forking or otherwise changing jquery. This is surprising, and in a very pleasant way.

When I looked at the Asp.net AJAX Roadmap a while back, I thought that a lot of it was what jquery does (css selectors, anyone?). I actually liked the idea as I use JQuery a lot, and it appeared a lot of the neat features were headed our way. I was grateful cause I do believe community interest in jquery is what put those features in the roadmap. I thought that was the best we could expect…and I thought the only “better” move would be for MS to buy jquery.

Well, MS seems to have done even better with this move. Instead of killing it off, they’ve joined it and are going to make it an even better experience using jquery alongside asp.net. This works so well for the “Dark Empire” persona of MS and integrates so nicely into the ecosystem. Well done, bravo, outstanding…can’t say it enough time really.

Scott Hanselman has put up a tutorial already on how this’ll work with Astoria (ok…ADO.Net data services, but Astoria is such a cool name!) and client templates. I’ve been using asp.net AJAX and jquery together for some time now. And I can say it works exactly like I expected it to work. No need to re-learn MS-specific jquery, no hassle – it just works.

And lastly, MS will provide bug reports, patches, tests etc. to the jquery project and “These will all go through the standard jQuery patch review process.”

• “If you can’t beat ‘em…buy ‘em”.
• “If you can’t beat ‘em…join ‘em.”
• “If you can’t beat ‘em…support ‘em and make ‘em even better for your own benefit.”

I never imagined option 3 was even possible for MS. All I can say is I’m jumping for joy!!