VS 2008 JavaScript Intellisense

2007-6-23 16:56:16

One of the features that web developers will really like with VS 2008 is its built-in support for JavaScript intellisense.  This is enabled in both the free Visual Web Developer 2008 Express edition as well as in Visual Studio, and makes using JavaScript and building AJAX applications significantly easier. 

Below is a quick tour of some of the new JavaScript intellisense features to take advantage of:

JavaScript Type Inference

One of the things you'll notice immediately when you start typing within a script block is the richer support that Visual Studio 2008 now has for JavaScript keywords and language features:

JavaScript is a dynamic language, and doesn't support explicit type declarations, which has made implementing good intellisense difficult in the past.

Visual Studio 2008 adds support for type inference, which means that it evaluates and computes how a JavaScript block is being used and dynamically infers the variable usage and type information of the code to provide accurate intellisense support.

For example, Visual Studio below will infer that an html element is being retrieved by the document.getElementById() method, and provide appropriate html element intellisense for the variable result:

If I later assign a numeric value to the "myElement" variable (which in JavaScript converts it to a number), notice how VS will detect this and now provide integer intellisense for the variable later in the method:

Intellisense for External JavaScript Libraries

VS 2008 supports intellisense not just for in-line script, but also for externally referenced JavaScript files.  For example, assume we have a "getMessage" function like below defined within a "Util.js" javascript file:

I can then simply add a standard JavaScript script refrence element to my page, and I will then automatically receive intellisense support for it as I code:

Notice how VS automatically provides basic parameter intellisense information on the method without us having to do anything special to the JavaScript for it to appear:

Adding Intellisense Hints to JavaScript

As you saw above, Visual Studio will automatically provide basic intellisense help information for the method name and parameters of standard JavaScript.

You can optionally make this intellisense richer by adding comments to your JavaScript code that the intellisense engine can then pick up and use when you consume a method or library.  For example, I could add the below comments to the getMessage function in my util.js file:

And when I then code against it within my "Default.aspx" file Visual Studio will automatically display this summary information for the method:

As well as the parameter details:

We'll provide a tool that then allows you to automatically strip out your comments (and compress the whitespace and size) of your JavaScript once you've finished building your application.  For more details about the comment format that both VS and ASP.NET AJAX support, please read Bertrand Le Roy's post here.

Intellisense within External JavaScript files

Obviously you get full intellisense support within external JavaScript files, just like you do within script blocks inside .htm and .aspx files.

One of the interesting characteristics about external JavaScript files is that they can call and use the JavaScript functions and variables declared within other JavaScript files that a page loads. 

For example, if we declare two external Javascript files referenced on a page like so:

The JavaScript code within the "MyLibrary.js" javascript file will be able to call the methods declared within the Util.js file.

You can tell Visual Studio to provide intellisense for the "Util.js" library within the "MyLibrary.js" file by adding a /// <reference> comment at the top of the external library.  Once you do this, you'll get full intellisense support for those methods and variables:

This ends up being super useful when partitioning your JavaScript routines across multiple files.

To reference the ASP.NET AJAX client side JavaScript libraries, you can either add a <refrence> that points to your own copy of the .JS file (if you are manually including it in your project), or add a <reference> element with a name value if the library is being dynamically output by the <asp:scriptmanager> control on the host page:

Once you do this you'll get full intellisense for all of the JavaScript libraries and type-library patterns inside ASP.NET AJAX.

Calling Web Services using ASP.NET AJAX

ASP.NET AJAX makes it easy to expose methods on the server that can be called and accessed via client-side JavaScript.  For example, assume we define a simple webmethod in a .asmx web-service like below:

I could then have ASP.NET AJAX automatically create a client-side JavaScript proxy object that uses the JSON protocol to call and use it from the client by adding a reference to it with a <asp:scriptmanager> control in my page like below:

What is cool about VS 2008 is that when you declare a reference to a web-service using the <asp:scriptmanager> control like above, it will add client JavaScript intellisense support for it within the page automatically:

Obviously this

  2007-6-23 16:56:17

Earlier this month at TechEd we announced the official name of Visual Studio "Orcas" - which will be called Visual Studio 2008.  We also said that the official name for the .NET Framework "Orcas" release will be called .NET Framework 3.5 (it includes the new LINQ support, integrated ASP.NET AJAX support, new ASP.NET data controls, and more).

VS 2008 and .NET 3.5 Beta 2 will ship later this summer, and the Beta 2 release will support a go-live license for those who want to put applications into production using the new features immediately.

What is Multi-Targeting?

With the past few releases of Visual Studio, each Visual Studio release only supported a specific version of the .NET Framework.  For example, VS 2002 only worked with .NET 1.0, VS 2003 only worked with .NET 1.1, and VS 2005 only worked with .NET 2.0.

One of the big changes we are making starting with the VS 2008 release is to support what we call "Multi-Targeting" - which means that Visual Studio will now support targeting multiple versions of the .NET Framework, and developers will be able to start taking advantage of the new features Visual Studio provides without having to always upgrade their existing projects and deployed applications to use a new version of the .NET Framework library.

Now when you open an existing project or create a new one with VS 2008, you can pick which version of the .NET Framework to work with - and the IDE will update its compilers and feature-set to match this.  Among other things, this means that features, controls, projects, item-templates, and assembly references that don't work with that version of the framework will be hidden, and when you build your application you'll be able to take the compiled output and copy it onto a machine that only has an older version of the .NET Framework installed, and you'll know that the application will work.

Creating a New Project in VS 2008 that targets .NET 2.0

To see an example of multi-targeting in action on a recent build of VS 2008 Beta 2, we can select File->New Project to create a new application. 

Notice below how in the top-right of the new project dialog there is now a dropdown that allows us to indicate which versions of the .NET Framework we want to target when we create the new project.  If I keep it selected on .NET Framework 3.5, I'll see a bunch of new project templates listed that weren't in previous versions of VS (including support for WPF client applications and WCF web service projects):

If I change the dropdown to target .NET 2.0 instead, it will automatically filter the project list to only show those project templates supported on machines with the .NET 2.0 framework installed:

If I create a new ASP.NET Web Application with the .NET 2.0 dropdown setting selected, it will create a new ASP.NET project whose compilation settings, assembly references, and web.config settings are configured to work with existing ASP.NET 2.0 servers:

When you go to the control Toolbox, you'll see that only those controls that work on ASP.NET 2.0 are listed:

And if you choose Add->Reference and bring up the assembly reference picker dialog, you'll see that those .NET class assemblies that aren't supported on .NET 2.0 are grayed out and can't be added to the project (notice how the "ok" button is not active below when I have a .NET 3.0 or .NET 3.5 assembly selected):

So why use VS 2008 if you aren't using the new .NET 3.5 features?

You might be wondering: "so what value do I get when using VS 2008 to work on a ASP.NET 2.0 project versus just using my VS 2005 today?"  Well, the good news is that you get a ton of tool-specific value with VS 2008 that you'll be able to take advantage of immediately with your existing projects without having to upgrade your framework/ASP.NET version.  A few big tool features in the web development space I think you'll really like include:

1. JavaScript intellisense
2. Much richer JavaScript debugging
3. Nested ASP.NET master page support at design-time
4. Rich CSS editing and layout support within the WYSIWYG designer
5. Split-view designer support for having both source and design views open on a page at the same time
6. A much faster ASP.NET page designer - with dramatic perf improvements in view-switches between source/design mode
7. Automated .SQL script generation and hosting deployment support for databases on remote servers

You'll be able to use all of the above features with any version of the .NET Framework - without having to upgrade your project to necessarily target newer framework versions.  I'll be blogging about these features (as well as the great new framework features) over the next few weeks.

So how can I upgrade an existing project to .NET 3.5 later?

If at a later point you want to upgrade your project/site to target the NET 3.0 or NET 3.5 version of the framework libraries, you can right-click on the project in the solution explorer and pull up its properties page:

You can change the "Target Framework" dropdown to select the version of the framework you want the project to target.  Doing this will cause VS to automatically update compiler settings and references for the project to use the correct framework version.  For example, it will by default add some of the new LINQ assemblies to your project, as well as add the new System.Web.Extensions assembly that ships in .NET 3.5 which delivers new ASP.NET controls/runtime features and provides built-in ASP.NET AJAX support (this means that you no longer need to download the separate ASP.NET AJAX 1.0 install - it is now just built-in with the .NET 3.5 setup):

Once you change your project's target version you'll also see new .NET 3.5 project item templates show up in your add->new items dialog, you'll be able to reference assemblies built against .NET 3.5, as well as see .NET 3.5 specific controls show up in your toolbox. 

For example, below you can now see the new <asp:listview> control (which is an awesome new control that provides the ability to do data reporting, editing, insert, delete and paging