Microsoft is going the jQuery way

With jQuery gaining popularity day by day and Microsoft extending support towards it through its Visual Studio IDE, it looks like the future in ASP.NET is going to rely heavily on jQuery. Before I move forward with the integration part which is the actual topic of this blog, let me give you an idea on what jQuery is. If you don't know about jQuery yet or have not followed it recently, you must now. Use of jQuery is getting serious not only with .NET environment but any other environment. To me, it looks like jQuery is going to mean much more in the near future; this I can guess from the increasing number of code examples on the web using jQuery just the way you might have noticed the increasing usage of LINQ.

jQuery is a light weight JavaScript library that is about to change the way you write JavaScript. I have seen people getting addicted to jQuery once they come across it, and why not?...so are its virtues! The latest version of jQuery library is just 24 KB and using just this library in your application, you can do miracles. If you visit the jQuery site, the tag-line says "write less, do more".  And that's true. To use jQuery, all you have to do is visit the jQuery site I gave earlier and download the latest version of the library. If you want it only for use on your website, you can pick the production (minified) version, or if you want to explore it further, you may go for the development version. Once the .js file is downloaded, copy the file to your project folder and start using it by including the file in your source just the way you would include any .js file.

Here is a snapshot where I have used jQuery to display an alert on click of an anchor text. Thios i to give you an idea on how you can use jQuery in Visual Studio. I believe you can carry it forward from here.

How about writing some JavaScript that will fade or slide a <div> when user clicks on it? Just a style change of "display:none" is going to disappear the div...but we want to make it a smooth slide out. You are already thinking of a plethora of code with usage of opacity and setTimeouts, right? But then you also have to put some additional checks to make sure the code is compatible with different browsers!...I know I am scaring you, but now that you have the jQuery library with you, look at what you need to write to get all the above done:

$("div").click(function ()
{
      $(this).hide("slide", { direction: "down" }, 1000);
});

Not only this, what about implementing the complete AJAX based callback in just this much of code:

$(document).ready(function()
{
     $.ajax({
          type: "POST",
          url: "pagemethod.aspx/sayHello",
          contentType: "application/json; charset=utf-8",
          data: "{}",
          dataType: "json",
          success: AjaxSucceeded,
          error: AjaxFailed
    });
});

function AjaxSucceeded(result)
{
    alert(result.d);
}

function AjaxFailed(result) 
{
    alert(result.status + ' ' + result.statusText);
}

That's impressive, isn't it? I am not going to focus on jQuery tutorial here. There are plenty of tutorials available on the web you can access. Best place to start with is the jQuery site's tutorial itself. When I post more articles on jQuery adventure in .NET, I will put some code examples. You can already find some jQuery snippets for Visual Studio in Codeplex that you might want to experiment with once you have done with your basics on jQuery.

What is important to observe how Microsoft is incorporating jQuery into .NET developers' world by extending support to jQuery and even making code contributions to it. In 2008, Scott Gutherie already committed a lot for jQuery from Microsoft in his blog. He mentioned that Microsoft will be shipping jQuery with next version so Visual Studio. In fact, when you create a new web site in Visual Studio 2010, you will find the jQuery files in a scripts folder added by default. I still have to experiment more with it in the 2010 version; will let you know.

Besides, jQuery team has developed a version of jQuery library that is documented as per Microsoft XML comment standards because of which jQuery objects and their properties and methods are now also available in Visual Studio intellisense. You can visit the downloads page on jQuery site and download the Visual Studio version. When you include this documented .js file in your code, the intellisense will guide you through jQuery syntax as you can see below in one of my experiment's screenshot:

This should be possible with Visual Studio 2008 since this IDE has good support for JavaScript. However if you don't have the Service Pack 1 of the IDE, you may face some issues. In that case, get the Service Pack and then refer this knowledge base.

It is pretty sure now that the forthcoming ASP.NET AJAX will be built on jQuery or at least will be largely based on it, make it more important for .NET developers to make jQuery a part of their lives.

A little while ago, Microsoft added jQuery templates and data linking which you can read about here. I will get back to this in some other post with a bit of study. But continuing the effort towards jQuery. Microsoft came up with jQuery Globalization plugin just yesterday. The System.Globalization namespace and CultureInfo class in .NET framework gives you enough liberty to globalize or localize your code. You know how easy it is to convert some date or numeric value into a specific format. For example, I can easily convert my date to English or Dutch format in my server side code as:

using System;
using System.Globalization;
using System.Threading;
public class FormatDate
{
   public static void Main()
   {
      DateTime dt = DateTime.Now;        // Sets the CurrentCulture property to U.S. English.
      Thread.CurrentThread.CurrentCulture = new CultureInfo("en-US");
      Console.WriteLine(dt.ToString("d")); // Creates a CultureInfo for German in Germany.
      CultureInfo ci = new CultureInfo("de-DE");
      Console.WriteLine(dt.ToString("d"));
   }
}

This is just a simple example. In fact, the power of globalization in .NET extends to every datatype and conversion, making it so handy to format our data. Unfortunately, it isn't that easy in JavaScript or the client side code to do the same. This Globalization jQuery plugin is here to solve the same problem, at least making it very very simple. By using language tags, it is not only possible to imitate the CultureInfo scenario but extend the same power into your JavaScript Code. You can read about the plugin here. I will post more as I discover more, but the moral of the story remains: jQuery is here to stay and get more and more involved. If you want to stay afloat, gulp it!