Getting Started with jQuery in Visual Studio 2008

Guy Burstein — Fri, 05 Jun 2009 19:16:47 GMT

Getting Started with jQuery in Visual Studio 2008

In this post I’ll talk about adding jQuery IntellSense in Visual Studio 2008, and how to add jQuery to a simple Web Application inside Visual Studio 2008.

jQuery IntelliSense in Visual Studio 2008 - KB946581

In order to use jQuery in Visual Studio 2008 with IntelliSence a hotfix for Visual Studio 2008 must be installed:

Download the hotfix from Connect
Run the executable and extract its contents to a folder in your hard drive.
Make sure all instances of Visual Studio 2008 are closed, and run VS90-KB946581.exe from the above folder.

Download the Latest jQuery Library + Documentation

To use jQuery in Visual Studio 2008, and enjoy its IntelliSense, you should download 2 javascript files. One contains the actual jQuery library, and the second contains the library with documentation for Visual Studio 2008 to display its IntelliSense.

Go to jQuery Official Download Page
Scroll down and find the Current Release section.
Download the Uncompressed version (jquery-1.2.6.js) and the documentation for Visual Studio (jquery-1.2.6-vsdoc.js).

Using jQuery in a Visual Studio 2008 Web Application

In a new Web Application or inside an existing one, add the jQuery scripts into a certain folder.

In a web page (or a master page), add a reference to the jQuery library:

<head runat="server">
  <title>jQuery Sample</title>
 
  <script src="scripts/jquery-1.2.6.js"         
          type="text/javascript" ></script>
 
</head>

Then, in any javascript function you can start using jQuery functions and enjoy the IntelliSense in Visual Studio 2008.

A Simple Example of Using jQuery Functions

For example, Assuming that you have a page with the following content in it:

<form id="form1" runat="server">
<div>
  <input type="text" class="inputs" id="txtName"       
         value="Enter Text Here" />
  <input type="button" class="inputs" id="btnSubmit"       
         value="Click Me" onclick="handleButtonClick();" />
</div>
</form>

This form contains a single textbox followed by a button.

The handleButtonClick() function handles the button onclick event.

<script type="text/javascript">
  function handleButtonClick() {
  }
</script>

The way jQuery works is by selecting DOM elements and then doing something with them, such as executing a function or applying some properties. For example:

<script type="text/javascript">
  function handleButtonClick() {
    $("#txtName").css("border", "solid 2px red");
  }
</script>

The above method uses the selector function $ to select DOM elements (in this case – a single element with id = txtName) and to apply a style property of a red border. Running this page and clicking the button results in this output:

Summary

In this post I talked about the steps you should follow in order to use jQuery in Visual Studio 2008 with InstelliSense support. Then, we used jQuery in a simple web application.

Guy Burstein : jQuery

Getting Started with jQuery in Visual Studio 2008

Getting Started with jQuery in Visual Studio 2008

jQuery IntelliSense in Visual Studio 2008 - KB946581

Download the Latest jQuery Library + Documentation

Using jQuery in a Visual Studio 2008 Web Application

A Simple Example of Using jQuery Functions

Summary