What is jQuery?

• A light weight, fast and open source JavaScript library
• Simplifies DOM traversal, event handling, animation and AJAX
• 5 lines of jQuery code > 25 lines of traditional JavaScript code.
• Cross browser compatible, CSS3 compliant, easy to extend API
• Chainability - The magic of jQuery

        $(document).ready(function(){           //check if document has loaded
            $('.navigationLinks')                       //select DOM elements
                .addClass('highlight')                //apply behavior
                .click(function(){ /*..... */ });        //attach events
        });
        

Few basic snippets...

• $('#SaveButton');    $('.navigationButtons');   $('p'); 

• $('tr:even').css('background','blue'); 

• $("button:gt(1)").attr("disabled","disabled");

• $("li").each(function(){
      $(this).addClass("red");
  });

• $("div:contains('John')").css("text-decoration", "underline");

• $('#Container").fadeOut('1000',function(){ 
      $(this).remove();
  })

• $("[id$='_txtFirstName']"); 

Microsoft and jQuery

• Microsoft has announced its support to jQuery in Sept 2008
• jQuery intellisense support in VS 2008 SP1 onwards
• ASP.NET MVC2 comes along with jQuery 1.4.1
• jQuery is added to ASP.NET Web Forms projects created in VS2010
• Microsoft is contributing to jQuery community. All contributions will be platform neutral.
• jQuery Templates plugin to easily generate and render HTML UI on the client
• jQuery Globalization plugin to easily parse and format values for different cultures in JavaScript
• jQuery Data linking plugin to easily keep your UI and data objects synchronized within a page.

FAQ: When to use AJAX Control Toolkit? ASP.NET AJAX Library? jQuery?

• ACT is for server side AJAX. Use it if u want client side interactivity without writing JS code (RAD). Just drag/drop AJAX controls from VS toolbox.
• ASP.NET AJAX Library is now moved to ACT. Client templates, client databinding, script loader etc can still be used by downloading ACT.
• For client side AJAX, Microsoft is shifting focus to jQuery. Shift to jQuery if you are using ASP.NET AJAX Library client templates.
• Official note by Stephen Walther.

Start enhancing with jQuery plugins

• jQuery offers a mechanism for adding in methods and functionality, bundled as plugins. (Client side equivalents of AJAX toolkit controls)
• Easily extensible API. Extend jQuery result object with $.fn.yourMethod
• //Plugin to highlight selected DOM elements with yellow background

  jQuery.fn.highlight= function() {
    return this.each(function(){
      $(this).css('background','yellow');
    });
  };

• Use the above plugin like: $('p').highlight();
• Few popular plugins: Accordion, Tabs, Date picker, Auto complete etc
• plugins.jQuery.com is the repository of jQuery community's plugins.

DEMO

Let's enhance interactivity of an existing ASP.NET app using jQuery plugins

jQuery AJAX with ASP.NET - client side

• jQuery has a host of functions for AJAX operations. $.ajax(options) is the core function
• Other variants: $.get(url, callback); $.post(url, data, callback); $(sel).load(); $.getJSON() etc
• To consume JSON serialized ASP.NET services, client script must meet two conditions:
  (a) The request must be HTTP Post
  (b) Content type must be: "application/json; charset=utf-8"

• $.ajax({			/*jQuery AJAX setup*/
    type: "POST",
    contentType: "application/json; charset=utf-8",
    url: "WebService.asmx/WebMethodName",
    data: "{}",
    dataType: "json",
    success: function(msg) { },
    error: function(xhr, textstatus, errorThrown){  }
  });

jQuery AJAX with ASP.NET - server side

• For AJAX communication, all we need is JSON serialized ASP.NET services.
• No in-built JSON serializaiton until .NET 3.5. Have to use 3rd party libraries like JayRock.
• JSON serialzed data can be returned by invoking one of these from client script from .NET 3.5:
  Web services/ Page methods/ WCF services/ Generic handlers(.ashx).
• The only change on the client would be URL option of $.ajax().
• For light weight communication, page methods are preferred to full ASMX services
• Page methods should be declared as "Static" and should have [Webmethod] attribute.
• Script Manager and EnablePageMethods property are not required to facilitate AJAX communication using jQuery. $.ajax can be used directly.

AJAX - Demo

Building a zero post back AJAX page (Used Microsoft's template plugin which was proposed to jQuery team).

Precautions

• "Error during serialization or deserialization using the JSON JavaScriptSerializer. The length of the string exceeds the value set on the maxJsonLength property."
  This error comes when you are fetching tons of data. A typical ASP.NET application might respond slowly for huge data, but AJAX apps will crash with the above error. Make sure your data is within the threshold
• "Stop running this script"
  This error comes when there is too much of JavaScript running on the browser. It is very common in heavy jQuery apps since developers misuse selectors and land in performance bottlenecks.
• Avoid large DOM modifications
• Cache your jQuery selectors in JavaScript variables.
• If you are dealing with large scale implementations, follow JS design patterns.

References

• Scott Gu's blog
• Stephen Walther's blog
• Encosia.com and ofcourse, my personal experiences :)

Finally,

var krishna={
    name: 'Krishna Chaitanya T',
    blog: 'www.NovoGeek.com',
    role: 'Senior Systems Engineer', 
    workingAt: 'Web 2.0 Research group, SETLabs, Infosys Hyd',
    email: 'KrishnaChaitanya.T@Live.com'
};
$(krishna).says('Thank You!');