jQuery 1.3 was released earlier this year with many new features, most notably improved CSS selectors and event handling. Microsoft and the jQuery team are working together on the development and support of the jQuery framework and integrating it into the ASP.NET and Visual Studio development environments. This post describes how you can set things up to make jQuery 1.3 an integral part of your ASP.NET 3.5 and Visual Studio 2008 development stack.
Since jQuery is a 100% script-based framework, there’s no installation work required per-se except to download the required script files and configure your ASP.NET application to make use of them.
Head on over to the jQuery download page and scroll down to the section where the release downloads are listed. You will notice for each release that there are 3 downloads listed below the link to view the release notes:
Each of these downloads is just a JavaScript file that has a specific purpose as explained in the following diagram:
Click to download each script (Minified, Uncompressed, and Visual Studio) and save them to your applications scripts folder (or whatever folder name you prefer to use for JavaScript files).
Note: After I downloaded the script files I had issues getting the files to load from the web server. It turns out the file permissions were being set by the browser download to be very strict. I had to right-click each file and to into it’s file properties and then select “Inherit from parent” to get things working. I don’t know if this is something specific to my machine configuration, so this is just a troubleshooting tip in case you have issues getting the JavaScript files to load later on.
When loading a JavaScript file, Visual Studio will automatically look for a file with the same name and –vsdoc appended at the end of the filename prior to the extension. For example if Visual Studio sees the file jquery-1.3.2.js it will automatically try to load jquery-1.3.2-vsdoc.js to provide Intellisense for the original JavaScript file. You only need to have the –vsdoc file available for Visual Studio, it’s not something to load to a production server although there would be no harm done if you did load it to production – it would not be referenced or loaded by the browser as this is a file loading convention that only Visual Studio implements.
Before we get into the code, we want to copy the Visual Studio Intellisense file and rename the new copy so that it will be loaded to provide Intellisense for the minified jQuery file. That way we only have to setup our code to use the minified version and we won’t have to change any file references when moving from development to test and production environments. Find the Visual Studio 2008 Intellisense File or Visual Studio file you downloaded earlier (refer back to download page diagram above is this is not clear). Copy-paste this file to a new file, and name the new file to have the same name as the minified version with –vsdoc appended to the end just prior to the file extension. For example if the minified file name was jquery-1.3.2.min.js, then the name of the copied version of the Intellisense file will be jquery-1.3.2.min-vsdoc.js. When you are done, your scripts folder should look something like this:
Now it’s time to create or open a site in Visual Studio 2008 and setup a Master Page to include the jQuery file and verify Intellisense is working. Here’s the Master Page code to get you started:
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <title></title> <script src="scripts/jquery-1.3.2.min.js" type="text/javascript"></script> <script type="text/javascript" language="javascript"> $(document).ready(function() { }) </script> <asp:ContentPlaceHolder id="head" runat="server" /> </head> <body> <form id="form1" runat="server"> <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server" /> </form> </body> </html>
To test that Intellisense is working correctly, turn on line numbers in Visual Studio and position the cursor on line 13 and start typing $( and you should see Intellisense as shown below:
Continue typing $(“div”). and you should see a list of methods pop-up as shown below. Continue typing cli and the click method should be selected:
As shown above, we can setup jQuery script commands in the head of the Master Page which will then load on all content pages. Notice also that the Master Page code above contains a ContentPlaceholder named ”head” – this ContentPlaceholder is created by default when a new Master Page is created in Visual Studio 2008 (see related post on this topic as it relates to meta tags).
By adding any jQuery script that belongs in the HTML head to the content page implementation of the “head” ContentPlaceholder, we can group all Master and Content page jQuery sequentially in the page output without having to resort to code-behind or other workarounds to add JavaScript to the Master Page head section. This effectively gives us a CSS-cascade like sequencing of jQuery code and events which can be especially useful when working with the jQuery document.ready function.
To tie everything together and show some examples of jQuery in action, here’s an example of a Master Page and Content Page that implement a few jQuery events when the page is loaded and elements are clicked. This example, which is not going to win any awards, is running on my site if you want to try it out. You can also download the example zip (including the jQuery 1.3.2 script files) in case it might be of some help to you in getting things working the first time.
MasterPage.master:
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <link rel="stylesheet" type="text/css" href="style.css" runat="server" /> <script src="scripts/jquery-1.3.2.min.js" type="text/javascript"></script> <script type="text/javascript" language="javascript"> $(document).ready(function() { $("div").css("background-color", "green"); $("div").click(function() { $(this).css("background-color", "red"); }); $("a").click(function(event) { alert("Thanks for visiting!"); }); }) </script> <asp:ContentPlaceHolder id="head" runat="server" /> </head> <body> <form id="form1" runat="server"> <p> <a href="http://jquery.com/" target="_blank">jQuery</a> </p> <div style="background-color:blue"> <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server" /> </div> </form> </body> </html>
Default.aspx:
<%@ Page Title="jqTest Page" Language="C#" MasterPageFile="MasterPage.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server"> <script type="text/javascript" language="javascript"> $(document).ready(function() { $("div.test").click(function() { $(this).css("background-color", "white"); }); }) </script> </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"> test test test <div class="test">some test content</div> <span class="test">some span text</span> </asp:Content>