Posts
202
Comments
1112
Trackbacks
51
September 2008 Entries
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:

   1:  private void ToggleControls(bool enabled)
   2:  {
   3:      TextBox1.Enabled = enabled;
   4:      TextBox2.Enabled = enabled;
   5:      TextBox3.Enabled = enabled;
   6:      TextBox4.Enabled = enabled;
   7:  }

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:

   1:   var controlsEnabled = true;
   2:   
   3:   function pageLoad() {
   4:       $addHandler($get("btnToggle"), "click", toggleControls);
   5:   }
   6:   
   7:   function toggleControls(eventElement) {
   8:       controlsEnabled = !controlsEnabled;
   9:       $get("TextBox1").disabled = controlsEnabled;
  10:       $get("TextBox2").disabled = controlsEnabled;
  11:       $get("TextBox3").disabled = controlsEnabled;
  12:       $get("TextBox4").disabled = controlsEnabled;
  13:   }

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:

   1:  var $j = jQuery.noConflict();
   2:  var disabled = true;
   3:   
   4:  $j(function() {
   5:      $j('#btnToggle').click(function() {
   6:          var disabledValue = (disabled ? "disabled" : "");
   7:          $j(":text").attr("disabled", disabledValue);
   8:          disabled = !disabled;
   9:       });
  10:   });

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.

Posted On Wednesday, September 24, 2008 9:55 PM | Comments (1)
Use PowerShell to Clean your Visual Studio solution

There are lots of times when I want to do a "Clean" of my VS.NET solution.  Obviously, the most common way to do this is to right-click your solution in the solution explorer and select "Clean Solution".  However, there are 2 drawbacks of this.  One is that if you have files sitting in your bin or obj directories that are not in some way linked to your solution, they won't be removed.  Additionally, sometimes you just want to do a quick clean of a directory structure without having to fire up VS.NET.

You *could* use MSBuild to do this to avoid having to fire up VS.NET by doing a command like this:

MSBuild MyApp.sln /t:Clean

However, that still leaves you with the problem of leaving the orphaned files. 

I often just want to completely delete the bin and obj directories.  This might be because I want to ensure I'm truly starting fresh.  Or it may be because of have a little sample solution that I just want to throw into a ZIP file to upload or send to someone.  In that case, I want the bin and obj directories to not even exist.

I've found the easiest way to do this is to just use a little PowerShell function.  The function is called "cleanBin" and you simply pass a single command line argument which is the location of your solution root. It can be invoked by simply using this command:

PS C:\scripts> cleanBin C:\temp\SomeSolution

It will recursively look at every folder under your solution root and remove and bin or obj directories.  The complete function definition is as follows:

function cleanBin {
    param ([string]$path)
    
    write-host "Cleaning bin from: $path"
    get-childitem $path -include bin -recurse | remove-item
    
    write-host "Cleaning obj from: $path"
    get-childitem $path -include obj -recurse | remove-item
}

For re-usable functions like this, the easiest way to ensure that they are always globally accessible to you is to put them in your PowerShell profile file.  This file gets automatically run any time you start PowerShell.  You should have a folder inside your "My Documents" called "WindowsPowerShell".  Simply put a text file in that folder called "Microsoft.PowerShell_profile.ps1" and paste the above function in there.

Technorati Tags:
Posted On Wednesday, September 24, 2008 9:10 PM | Comments (2)

View Steve Michelotti's profile on LinkedIn

profile for Steve Michelotti at Stack Overflow, Q&A for professional and enthusiast programmers




Google My Blog

Tag Cloud