Visual Studio and jQuery
Microsoft has partnered with jQuery and because of
that, Visual Studio will now include jQuery; if you have downloaded the latest
version of ASP.NET MVC, you should find that jQuery was included although it is
version 1.2.6 (the current version is 1.3.2).
jQuery is a JavaScript framework that is comprehensive
in its current form and constantly improving; the jQuery community has developed
a number of terrific plug-ins that continually make the kit more attractive,
valuable, and useful; it you have not tried it out, it is definitely worth
looking into. As far as the plug-ins go, the tablesorter and tablesorter pager
really make the whole thing worthwhile if you are working with MVC at all; I
think it is a far better solution than using the paged list option demonstrated
in the latest "Nerd Dinner" application made available by Guthrie, Hanselman,
Haack, et al., if for no other reason than it handles both paging and sorting
rather than just sorting. Other plug-ins also support filtering lists such that
if you wanted to display a filtered, sorted, paged list, you can do that with
jQuery in a few lines of code, or you can spend quite a bit more time trying to
accomplish the same thing in the controller and model code in an MVC
application.
There is a lot to love about jQuery; the selectors
alone will save a lot time in selecting single or categorized elements without
fumbling around with the DOM. To quote the blurb about the project found on
their website, jQuery, "...is a new kind of JavaScript Library. jQuery is a fast
and concise JavaScript Library that simplifies HTML document traversing, event
handling, animating, and Ajax interactions for rapid web development. jQuery is
designed to change the way that you write JavaScript".
If you have not looked it over, you owe it to yourself
to take it for a test ride: http://jquery.com/
Figure 1: ASP.NET Application Running with jQuery
Tablesorter and Pager Plug-ins
Intellisense and jQuery
Scott Guthrie's wrote an entry on jQuery Intellisense;
if you missed Scott Guthrie's original comments on it, you can see them here:
http://weblogs.asp.net/scottgu/archive/2008/11/21/jquery-intellisense-in-vs-2008.aspx
Per Scott Guthrie original entry, these steps are
necessary to get intellisense going on with jQuery. You can check out the
original article or just follow the steps he outlined; they are as follows.
- Install VS2008 SP1:
http://www.microsoft.com/downloads/details.aspx?FamilyId=FBEE1648-7106-44A7-9649-6D9F6D58056E&displaylang=en
- Install the Support Patch that cues
Visual Studio to look for JavaScript documentation files:
http://code.msdn.microsoft.com/KB958502/Release/ProjectReleases.aspx?ReleaseId=1736
- Download the latest version of jQuery and
the associated documentation file:
http://docs.jquery.com/Downloading_jQuery#Download_jQuery
- When downloading the jQuery files, there
are at least two to get, they are:
- Jquery-1.2.6.js (that is what MS distributes now, current version is
1.3.2; there is a minified version and an uncompressed version
available)
- Jquery-1.2.6-vsdoc.js (follow the
documentation link to get that)
Still Using 2005?
Forget it, intellisense won't work for you, it is
dependent upon a patch applicable to VS2008 only.
Using jQuery with Intellisense
- Add jQuery files to web project (jQuery and the VS
Doc file).
- As far as adding the script source tags to the
pages, I've some recommendations that state you should add an entry for the
VS Doc file while other indicated that it is not necessary. I have been
doing it without adding the script source reference for the VS doc file and
have found that it works fine without it.
Fun with Master Pages
You can/should include the script source references in
the master page; but if you do, you may not get intellisense on the content
page. There is something of a hack floating around that I will attribute to Rob
King at Microsoft; it is mentioned here:
http://blogs.msdn.com/webdevtools/archive/2008/10/28/rich-intellisense-for-jquery.aspx.
By adding this work around to the content page, you can
get jQuery intellisense on the content page.
The work around is to add this bit of code to the
content page; it works and better yet, it does not seem to harm anything:
<%if (false)
{
%>
<script
src="../../Scripts/jquery-1.2.6.js"
type="text/javascript"></script>
<%} %>
If you just add the script source, it of course blows
up when you run it.
So, if I add this work around to the content page, do I
get intellisense? Yes, it works:
Now, if I comment out the work around, do I still intellisense? Well, I did not,
not in an MVC application anyway.
Now, if it is not MVC and I include the script source
references in the master page of a standard trash ASP.NET site and not on the
content page, and if I don't use the work around, do I get intellisense? Well,
yes, I do. So, in a nutshell, I needed the work around to get intellisense on an
MVC view, but not on a normal ASP.NET site content page.
So, if you have problems getting the jQuery intellisense to show up on a content
page, use the work around, otherwise, press on.
Well, that is pretty much all there is to it. I think
jQuery is a useful tool for Visual Studio web development; I also think it is
generally worth the effort to get the intellisense up and running to facilitate
development with jQuery. Oh, it should also be known that intellisense does not
necessarily work with the jQuery plug-ins; that will likely get better but this
form of intellisense is still all pretty new at the moment.