Sunday, 31 August 2008

ASP.NET and JQuery = powerful combination

Over last few years number of interesting JavaScript frameworks emerged. My reaction to JavaScript used to be quite allergic, for me there was no such thing like a maintainable JavaScript code. But apparently things have changed drastically. At the moment we can choose from many different frameworks:

All of them are pretty mature, well documented and definitely worthwhile.

Recently I was forced to play with JQuery a bit ... believe me, we were trying everything to avoid it but in the end we gave up. Why? Partly because we couldn't replace JQuery with ASP.NET Ajax in a efficient way and partly because after a profound investigation I changed my mind about Javascript. In fact I was having one of those 'Ah-ha!' moments ... I was really amazed how many cool things you can do with just a few lines of code.

I don't pretend to be a JQuery expert but let me show you just a simple example, simple use case which I used as a opportunity to learn more about JQuery.

Okey, let's start ... we want to create a personal contact list. Applications will list all people with a telephone number and some additional details. Important part of this use case is user experience, our aim is to use ajax calls as much as we can in order to avoid reloading the whole page. Let's say that this is how the application will look like:



I have used one of WUFOO's css thames and this is the only reason why this application looks not so bad ... UI and CSS design is not my strong side ;)

Anyway, interesting part now ... after clicking on details, table should expand and we should get some additional information regarding selected person. Expandable table should be implemented using ajax calls. Final view should look like this:



Assumptions

  • Normally, to create application like this, you need to have some way to persist data, it can be anything ... database, xml file, text file or anything else. In this case our data will be hardcoded (check source code) as this post is focused on user interface.
  • Number of controls can be used to generate table like this ... personally I would use repeaters to do the job but other options are also good and again ... that's not the point.

JQuery magic

JavaScript in this example is responsible for:
  • making sure that when 'Details' link is clicked our function will be invoked.
  • getting all required details for selected person with ajax call and showing them to the user.

All of that can be done with this piece of JavaScript:



$(document).ready(function () {
// find our 'Details' links and bind click event with our function
$(".aDetails").click(function (e) {

// we will use this link to get contactID
var link = $(this);

// find parent row
var row = link.parent('td').parent('tr');

// remove focus from the link
link.blur();
e.preventDefault();

// remove selection from other rows
$(".on").removeClass("on").next('tr.detailsPanel').remove();

// select this row
row.addClass("on");

// get details - ajax call
$.ajax({
url: applicationPath + "/utils/ContactDetails.aspx?contactID=" + link.attr("contactID"),
success: function(html){
row.after(html);
}
});
});
});

In-code comments should give you the idea about what is going on ... if something is still not clear then
  • check how the HTML is structured, it should help you understand what exactly functions like next('tr.detailsPanel') are doing,
  • and of course check JQuery documentation

Why ASP.NET Ajax is not a good alternative?

It's not a big challenge to get the same results in terms of user experience with ASP.NET Ajax, the simplest way is to put control responsible for rendering the table to a UpdatePanel like this:



<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Repeater ID="Repeater1" runat="server">
....
</asp:Repeater>
</ContentTemplate>
</asp:UpdatePanel>


It works but in fact each ajax call refreshes whole table ... and in this case it means that almost whole site is refreshed instead of one row. As long as number of records is small it's fine ... but if you have huge number of records it might turn out to be a problem. I haven't found any sensible way to update just one row ... maybe you can suggest something?

I hope that this little application shows that JavaScript is back in the first league. Developers should be familiar with at least one JavaScript framework ... pick the one which you like. Frameworks like JQuery provide many very flexible and powerful features which can help enhance your sites.

My plan is to continue enhancing this application, keep learning and experimenting ... stay tuned as next parts of my adventures with JQuery will show up. Source code for this part can be downloaded from here.

4 comments:

Anonymous said...

Here's what I believe a better, long term approach now that you are using Asp.Net: switch to SilverLight. Having to use two languages to build an application is a pain in the neck in terms of coding, maintaining, integrating and just about most of software engineering aspects if not all regardless how well each individual framework is constructed. Using the same .Net language on both client and server side is an offer hard to refuse.

dami said...

There is one more option.
You can use HttpExecutor from Sys namespace in javascript (derived by Microsoft in Script Manager) and send ajax request by hand. This request may be handled by some implementation of GenericHandler. It's more fast then drag and drop AJAX and gives you much flexibility. I can show you some example if you want.

Mikael O said...

The upside with ASP.NET Ajax is the simplicity of things like UpdatePanel, which provides AJAX through abstraction. However, that is about the only positive I have to say about ASP.NET Ajax. Other than that, it is horrifyingly featureless.

For example, there is no JQuery-type DOM queries ('$(".foo")'). ASP.NET Ajax is really only offering Ajax, and almost none of the nifty client-side features of Prototype, Jquery and Dojo, such as visual effects, event handling and JSON operations.

Johan said...

mikael o, while i agree with you that JQuery is superior to ASP.NET ajax, one should remember that there are a number of different visual things you can do with the ASP.NET AJAX Control Toolkit. For many developers the drag and drop ease of these functions are enough for most situations.

Of course, it's not even close to what you can do with JQuery and all it's plugins, but sometimes less is more.