Using jQuery in VS 2008
I’ve been reading a lot about jQuery lately (actually since last month) but more so lately because I’d like to know what the buzz is all about. When I first heard about it last year, I simply just ignored it because I know that jQuery is only one of many UI libraries out there. When Microsoft announced that Visual Studio 2008 officially supported the framework via its intellisense, I started paying attention. Now jQuery is becoming more and more popular these days and I’ve noticed that a lot of web sites tends to learn more towards web 2.0 interface now. The UI side of things has finally come back and emerge back in the scene in terms of web development.
What is jQuery?
Now what exactly is jQuery? In simple terms, it’s basically a Javascript library or framework that enables developers to interact with the DOM (document object model) with less effort and/or less code. The small framework performs majority of the interaction in the back-end. For more information and to learn about it, visit the official website. The documentation provides you with the tutorials and functions that you can call to start working with it immediately. Aside from functions, there are also hundreds of available plug-ins that available to be used right away. They can be considered as a set of libraries that can be called within your code. These plug-ins (or separate js files) are designed to interact with your existing jQuery library, and therefore in most cases can be initialized with a very simple call or statement. The greatest thing that I’ve learned about jQuery is its cross-browser compatability which is a significant advantage. If you’ve been developing web applications for years, it’s frustrating having to deal with making codes work consistently with different browsers.
jQuery in Visual Studio 2008
Since most of my development efforts are done using VS 2008 (VW Express 2008 @ home), I’ll share some of the things that can make life easier when getting started with jQuery. Most of the things that I have learned is through this post by Scott Guthrie, which pretty much highlights what is required for jQuery to work with Visual Studio 2008.
Steps to make intellisense work:
1. Install the Visual Studio 2008 Service Pack 1.
2. Install the hotfix or patch for –vsdoc.js to enable JScript editor support.
3. Download jQuery and Visual Studio documention into your project. As of current post, the version is 1.3.1. You will need to download both files as both are required (the actual library and the VS-doc for intellisense support).
The main thing to keep in mind is to make sure that the naming of the files are identical (less the ‘-vsdoc’) since this is how the file is recognized in the VS environment.
Since I will be using the jQuery library quite often, the best approach that I’ve found is to include it within your Masterpage file to simplify your development efforts. That’s why we’re using jQuery to begin with –to keep things programmatically simple.
Within your Masterpage file’s <header> attribute, you can add a reference by writing the code as such and include a <asp:ContentPlaceHolder> for individual pages scripts:
<head runat="server">
<script src="scripts/jquery-1.3.1.js" type="text/javascript"></script>
<asp:ContentPlaceHolder ID="contentHeader" runat="server">
</asp:ContentPlaceHolder>
</head>
In your .aspx file that uses the Masterpage file, you can use the <asp:ContentPlaceHolder> within the <head> attribute to interact with the embedded Javascript library.
<asp:Content ContentPlaceHolderID="contentHeader" runat="server">
<script language="javascript" type="text/javascript">
// Check if document has been fully loaded
$(document).ready(function() {
// Your code here
$("a").click(function(event) {
event.preventDefault();
$(this).hide("slow");
});
});
</script>
</asp:Content>
<asp:Content ContentPlaceHolderID="contentBody" runat="server">
<a href="#">Click here</a>
</asp:Content>
Outsourcing the jQuery library:
Since there are always new releases for the jQuery library, it can be difficult to keep up to date with every single new releases. Using a Masterpage instantly resolves that issue and having it in its separate /scripts folder helps keep things organized. With every new release comes a new file, which means that over the years that will come, your /scripts folder will build up with archives of releases. One option that I’ve learned is to instead use Google’s API repository which is always up to date with each new releases. The documentation provides the direct link that can be referenced from your application instantly, but one pitfall that I’ve encountered when applying this approach is it can’t be used in secured websites (https). Internet Explorer will give you an alert that the page includes/contains an unsecured object (referring to the outsourced library). I don’t fully recommend this approach but it’s a logical alternative as to keeping your scripts minimal and the application scalable. In the end, what truly works for you is all that matters. There is also a great post by Jeff King that also talks about the jQuery/Javascript intellisense feature in VS.
I hope that this post provides some help and/or insights as to utilizing jQuery in your ASP.NET development.
- Dennis
www.menacestudio.com