Use jQuery with ASP.NET with jQuery.noConflict()

The jQuery Javascript library has gotten a significant amount of attention from Microsoft developers this year in large part to its nice fit with the new ASP.NET MVC framework.  I myself was totally new to jQuery and I started using it with MVC because I wanted to see what the big deal was.  Sure enough, I became a true believer like many others.  And I found myself suddenly having "JavaScript envy" because I couldn't do all the cool jQuery stuff in traditional ASP.NET (i.e., non-MVC) web applications.

The good news is that it turns out, it really is a simple thing to do to incorporate jQuery into a traditional ASP.NET web app!  Let's take an example.  I recently had a client with a requirement that when the user first come to a screen they wanted all the text boxes to be disabled (basically a read-only view).  They then wanted to user to click an "Edit" button and all the text boxes suddenly become enabled.

So often the default mind-set of a traditional ASP.NET developer is to write some server-side C# code to do something like this:

private void ToggleControls(bool enabled)
{
    TextBox1.Enabled = enabled;
    TextBox2.Enabled = enabled;
    TextBox3.Enabled = enabled;
    TextBox4.Enabled = enabled;
}

But there are a couple of problems with this approach.  First off, if I have 30 text boxes on this screen, that is some pretty ugly code to write. Sure, I could loop through the page's Control collection and programmatically set all the TextBoxes appropriately but what if I have drop downs or checkboxes?  Other than writing some IF statements, there no true elegant way to do this.  Secondly, you have to question why you're going to make a round trip to the server to do this sort of thing.

So let's say we approach this by using the Microsoft AJAX JavaScript library. We can make our implementation better by eliminating the round-trip to the web server by keeping everything in JavaScript like this:

 var controlsEnabled = true;

 function pageLoad() {
     $addHandler($get("btnToggle"), "click", toggleControls);
 }

 function toggleControls(eventElement) {
     controlsEnabled = !controlsEnabled;
     $get("TextBox1").disabled = controlsEnabled;
     $get("TextBox2").disabled = controlsEnabled;
     $get("TextBox3").disabled = controlsEnabled;
     $get("TextBox4").disabled = controlsEnabled;
 }

Although this is better because we've eliminated the extra trip to the server, we're still stuck with the same problem that if we have 30 text boxes (and dropdowns, etc.) we have potential to have to write some ugly (or at least repetitive and boring JavaScript).

Now with jQuery this all becomes much more elegant.  One of the most powerful features of jQuery is that it allows you to easily select elements based on all kinds of different complex criteria by using jQuery Selectors. If you follow the link for the jQuery Selectors, you'll see that the possibilities are endless in terms of selecting elements by a combination of id, attribute matches, etc., etc.

The primary problem is that BOTH jQuery and the Microsoft Javascript library using the $ symbol as the global variable alias to the library. Fortunately, jQuery provides a simple mechanism to easily rectify this with the jQuery.noConflict() function. Now that we can use the full power the jQuery Selectors, we can essentially implement what was 30 lines of Javascript code with the Microsoft library to simple 3-lines of jQuery code:

var $j = jQuery.noConflict();
var disabled = true;
 
$j(function() {
    $j('#btnToggle').click(function() {
        var disabledValue = (disabled ? "disabled" : "");
        $j(":text").attr("disabled", disabledValue);
        disabled = !disabled;
     });
 });

We alias the $ to be $j for jQuery instead. Now we can leverage jQuery any way we please and it can peacefully co-exist with the Microsoft JavaScript library.