In this post I demonstrated using the Package Manager (NuGet) to install jQuery into your Website.

It’s a different experience in Visual Studio 2010 / Visual Web Developer Express so I thought I’d provide another post that walks you through it.

Plus, there is a tiny gotcha that might case new developers pause.

First, fire up Visual Studio.

In this case, I’ll be using Microsoft Visual Web Developer Express 2010 (The FREE Version) with Service Pack 1 (SP!) Installed.

If you are JUST getting started, install VWD Express 2010 via the Microsoft Web Platform Installer. You can read full instructions HERE.

After starting the IDE create a new Web Site.

NOTE: if you are using Visual Studio Pro or above you won’t see “New Web Site” as an option on the start-up screen.

It’s OK – just select File->New Web Site

Then select the Default “ASP.NET Web Site” template.

Once VWD has created your new web site, use the Visual Studio Menu to select :

Tools –> Library Package Manager –> Add Library Package Reference

By default you will see “pre installed” packages..

Click the accordion bar that says “Online”.

In keeping with the previous post we will add jQuery to our site.

BUT WAIT you say ! jQuery is part of the default ASP.NET Web Site template already.

True – but it’s not the most recent version. I always try to develop with the most recent version of jQuery.

Then when I go to deployment I modify my code to use pull jQuery and jQuery UI from the Microsoft CDN.

Note that in the “Online” section of the package navigator there are two sections.

  • All
  • NuGet Official package source

We need to select “All” so we can find the jQuery packages.

Then we enter jQuery in the search box (and hit enter)

jQuery is found and the details confirm for us that it’s the latest version.

Now just click on “Install”.

When install is complete you can close the package manager and go look at the effects in the Visual Studio Solution Explorer.

Note that the 1.5.1 version of jQuery is now installed.

Go ahead and delete the old 1.4.1 files.

But wait ! Where is the jquery-1.5.1-vsdoc.js file ?

the vsdoc file is specific to Visual Studio, so it makes sense that it’s separate from the main jQuery package.

if we do a search in the package manager for .vsdoc you will see that there is a separate package for the jQuery 1.5.1 .vsdoc file.

However, if you try to install it (by clicking install) you get an “Operation Failed” error message.

The message is pretty complete. It tells us that the package requires the execution of a PowerShell and therefore we must install this package from the NuGet command shell.

Ok, lets do that now.

Use the Visual Studio Menu and select:

Tools –> Library Package Manager –> Package Manager Console

The Console will open at the bottom of the IDE

Next, we need to find the VSDOIC package that we want to install.

In the Package Manager Console enter the following command:

get-package –remote –filter vsdoc

This will return a list of uninstalled packages that contain the keyword “vsdoc”

Notice that several different versions were installed.

We want to install the latest available version (1.5.1)

We can install the latest with the command :

install-package jquery.vsdoc

We did not specify a version so the package manager will grab the latest.

After we execute the command the commend window informs us of the results of our action.

When successful, you will also see the jquery-1.5.1-vsdoc.js file in the Scripts folder of the solution explorer (you my need to refresh to see it)

Note, as you can see above, we can also install jQueryUI using the package manager.

The possible advantage of installing jQueryUI manually is that the jQueryUI download manage lets to configure the features and the theme that your download will contain.

Now that you are up and running with the Package Manager – Don’t forget to explore all the other cool stuff you can find.