Getting Started with jQuery in Visual Studio 2008
Very helpful..Thanks Guy. ;-)
...
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.
http://blogs.msdn.com/bursteg/archive/2009/06/05/getting-started-with-jquery-in-visual-studio-2008.aspx