Tuesday, May 25, 2010

JQuery For VS 2008

What is Jquery?

jQuery is a library written using JavaScript and created by
Jquery team.

How to use JQuery in VS 2008 ?

1. Download JQuery from the JQuery site 2. Download both the .js and -vdsoc.js file. Ex. if you are using Jquery Version 1.4.1. Then download both jquery-1.4.1.js (JQuery Library) and jquery-1.4.1-vsdoc.js (jQuery VS 2008 Intellisense documentation) file. The -vsdoc.js file is for the intellisense support. 3. Make sure the we have installed the hotfix for the VS2008. If not please download from hotfix-url and install it 4.
Open Visual Studio 2008 > File > New > Website > Choose ‘ASP.NET 3.5 website’ from the templates > Choose your language (C# or VB) > Enter the location > Ok. In the Solution Explorer, right click your project > New Folder > rename the folder as ‘Scripts’.
Right click the Scripts folder > Add Existing Item > Browse to the path where you downloaded the jQuery library (jquery-1.2.6.js) and the intellisense documentation (jquery-1.2.6-vsdoc.js) > Select the files and click Add.

Now drag and drop the jquery-1.2.6.js file from the Solution Explorer on to your page to create a reference.

Note: Since you have applied the hotfix, you do not have to manually add a reference to the jquery-1.2.6-vsdoc.js file in your page. Once the reference to the runtime library has been added, Visual Studio automatically searches for the ‘vsdoc’ file and loads it. You just need to keep both the runtime library and the documentation file next to each other.
Else use following line of code as shown in the figure below to get the intellisense in VS 2008

To test intellisense, add a script
block and key in ‘$(‘. You will get an intellisense.

Example 1 – Display an alert on asp:Button click using jQuery
Add a Button element to the page as shown below:
<asp:Button ID="Button1" runat="server" Text="Button" />
Now in order to tell the browser to perform some action using jQuery as soon as the document is ready or loaded, use this block:
<script type="text/javascript">
$(document).ready(function() {
// add code here
});
script>
Add your code in the function block
<script type="text/javascript">
$(document).ready(function() {
$("#Button1").click(function() {
alert("Hello world!");
});
});
script>

Reference URL : Using jQuery with ASP.NET - A Beginner's Guide