Developing with jQuery in Microsoft Visual Studio 2008

 
 
By Jeff Cogswell  |  Posted 2008-12-12
 
 
 

Developing with jQuery in Microsoft Visual Studio 2008


jQuery is an open-source JavaScript library that simplifies the coding and manipulation of HTML elements on a Web page. Without jQuery, developers can still access all the elements in the Document Object Model, but jQuery makes it much quicker and easier.

jQuery initially was created in early 2006, and has become popular with Web developers. On the other hand, for many years, Visual Studio has been extremely popular with ASP.NET developers, but was limited in its handling of JavaScript in general, with little or no support for third-party JavaScript libraries. This is probably because early versions of ASP.NET primarily focused on server-side development.

In fact, although Microsoft never explicitly discouraged client-side development with JavaScript in conjunction with ASP.NET, the company tried to control JavaScript coding by forcing developers to go through a cumbersome set of APIs to generate JavaScript code. (Interestingly, this set of APIs was a precursor to ASP.NET's support for AJAX.)

Click here for an eWEEK Labs walk-through of using jQuery in Microsoft Visual Studio 2008. 

That has changed with Visual Studio 2008, released Nov. 19, 2007, as Microsoft has added significant support for JavaScript to its Visual Studio platform. Still, until recently, Visual Studio had no knowledge or understanding of third-party libraries, even though most client-side Web development is now done with the help of such third-party libraries.

However, that has changed as well. In September, Scott Guthrie, corporate vice president for Microsoft's .NET Developer Division, announced on his official blog that from now on Visual Studio will have full support for jQuery.

In this article, I'm going to take the jQuery aspects of Visual Studio for a spin and see what I find. I ran my tests on a Satellite U305 system powered by an Intel Core 2 Duo 1.8GHz, with 2GB RAM, running Windows Vista with Visual Studio 2008 and Internet Explorer 7.

How Visual Studio Handles JavaScript} 

JavaScript support before jQuery

First, lets see how Visual Studio handles JavaScript in general, without jQuery. There are two general areas we should explore: coding (with the


;

IntelliSense will spread the code out evenly and from then on will know that a and b are parameters of x, and show them in x's parameter list. It also will notify you of syntax errors in JavaScript code. Finally, JavaScript is radically different from C# in that there are no classes for the objects; you can dynamically add new members to objects, and the only way to know the members is to not just compile the code but to actually run it. That could make for a messy coding experience. In general, Microsoft had no choice but to handle JavaScript differently with IntelliSense.

Now let's briefly try out the debugging.

Debugging with Visual Studio


 

Think about how debugging Web pages works: When you're doing Web development, you're likely coding for both server-side (using, for example, ASP.NET and C#) and client-side (using JavaScript). The C# code runs on the server, and the JavaScript code runs inside the user's browser. When you're debugging, you're probably running both the server and client browser on a single machine.

For debugging server-side code, Visual Studio hooks into the IIS server, letting programmers set breakpoints and step through the server-side code. Such breakpoints typically occur as a result of the user interacting with the Web page; during this time, the browser will be waiting for the server, unaware that the server is being debugged. (In that case, Visual Studio must either be on the same machine as IIS, or set up to remotely debug.)

But to debug client-side, developers need to set breakpoints that cause the browser itself to pause and wait for the debugger. Given that, the browser must be aware of the debugger and be on the same computer as the debugger.

That means if a developer has a single instance of Visual Studio running, then it needs to be aware that it's potentially debugging two separate processes: the server-side (through IIS) and the client-side (through the browser).

There are different ways to debug JavaScript-for one, simply putting the debugger; statement right in the code. But for that to work, the browser needs to know to let Visual Studio kick in. Internet Explorer does, but other browsers don't automatically know about Visual Studio. Even then, IE will ask which instance of a debugger to fire up.

Instead, a good way is to set a breakpoint in the code (by right-clicking and clicking Insert Breakpoint in the context menu). Then set the HTML page you want to test out as the startup page (by right-clicking the page name in Solution Explorer and clicking Set As Start Page). Make sure the project is set up to use IE as the default browser (by right-clicking on the HTML file in Solution Explorer, and clicking Browse With. In the window that opens, click Internet Explorer, and then Set As Default. Close the window by clicking the upper-right button; don't click Browse, as you don't want to open the page from here, because it won't be set for debugging.) Finally, press F5 to start up the debugger in Visual Studio.

At this point, things worked really well. I set a breakpoint on the first line inside my function. When I typed something into the Web page and clicked the button, the page waited as Visual Studio activated with the code waiting at my breakpoint's line.

From there I could do all the usual debugging goodies, like float the mouse over one of the identifiers (such as document), which resulted in a popup showing me all the members. This time, the debugger is hooked into the JavaScript engine and can read the values; I can even change them as I should be able to do with any good debugger.

All is cool so far. Now let's try out the jQuery support.

jQuery Support in Visual Studio} 

First, I needed to get jQuery. Since my version of Visual Studio doesnt yet understand jQuery, I also needed to get the jQuery support files. Fortunately, theyre both available from one place, Scott Guthrie's ubiquitous blog. (Guthrie also explains how IntelliSense handles JavaScript differently from other languages, going into more detail than I did earlier.)

And if you're ambitious, you can take any other JavaScript library, open source or otherwise, and go though and annotate it. In fact, some people already have. If you have a favorite library, search Google and you might find the annotated files out there.

Jeff Cogswell is a senior editor at Ziff Davis Enterprise and writes the MSDev blog for DevSource, found at http://blogs.devsource.com/msdev. He can be reached at jeffrey.cogswell@ziffdavisenterprise.com.

Rocket Fuel