Weblog Home
Markdown Monster
Html Help Builder
West Wind WebSurge
Anti-Trust MusicJavascript and jQuery Intellisense in Web Control Pages
October 12, 2008 •
Visual Studio provides some fairly decent Intellisense support in Visual Studio and if you’re using Web Connection’s Web Control Framework you can take advantage of Intellisense quite easily.
Anytime you have <script> reference in a page VS.NET will provide Intellisense for the referenced script so:
<head>
<title>Web Connection Ajax Chat</title>
<link href="../wconnect/westwind.css" rel="stylesheet" type="text/css" />
<script src="../scripts/jquery.js " type="text/javascript"></script>
</head>
<body>
Provides Intellisense for the referenced library in source code. This works for any HTML style pages including Web Control Framework pages.
Sometimes you may prefer using script inclusion in actual Javascript only files rather than HTML pages. So if I have a library like my ww.jquery.js file and I want to get Intellisense for jQuery I can do:
/// <reference path="jquery.js" />
this.HttpClient = function(opt) {…}
at the very top of the .js file to force Intellisense to be available. The path specified is relative from the current file or you can use ~/scripts/jquery.intellisense.js for a more explicit path.
jQuery Intellisense
By default jQuery doesn’t work very well with Visual Studio Intellisense, so you may be surprised to hear that you can get pretty good jQuery Intellisense support, although it requires a few tweaks to your source file. Apparently Microsoft will be updating Intellisense support for jQuery drastically now that jQuery will be officially included with .NET and Visual Studio.
Until that happens though there are two approaches you can take to get jQuery Intellisense.
Markup jQuery.js with Intellisense specific comments
I’ve used this route before and if you’re using a recent version of Web Connection you already have a copy of the basic comment markup in the jQuery.js file distributed in the /scripts folder of a new application. The idea is that by adding Intellisense comment syntax to jQuery and only marking up the jQuery function you get first level Intellisense on any jQuery selector operations:
var jQuery = window.jQuery = window.$ = function( selector, context ) {
/// <summary>The jQuery object is actually just the init constructor 'enhanced'</summary>
/// <param name="selector" type="var">Document selector.
/// (examples: "Element","#Id",".cssClass","#divMessage,#divError",DomElement,jQueryObject)
/// </param>
/// <param name="context" type="object">Object scope of any code executed with jQuery functions</param>
/// <returns type="jQuery" />
return new jQuery.fn.init( selector, context );
};
This alone will let you type $(). and get a list of all jQuery functions available, which provides a good baseline. However, unless you mark up all the wrapped set functions Intellisense is only 1 level deep: The above only works for $(). but not for $().append(). – the second level doesn’t provide anything because append() is not marked up.
The version of jQuery.js that ships with Web Conection is marked up with this by default so as long as jQuery.js is referenced you should get basic Intellisense 'out of the box'.
Using an Intellisense.js specific Temporary Include
The above works well enough but it’s intrusive as it changes the original file and requires changing it with each update of jQuery. An alternative is to use a separate file that includes only the Intellisense and is a design time only file and hidden at runtime.
The first thing that’s needed for this is the script file which you can find here:
http://www.infobasis.com/sandpit/jQuery-Intellisense/
Copy this content into a file and name it jQuery.intellisense.js and store it in the same folder as jQuery – in ~/scripts for Web Connection.
Then you can do the following to include it in your page:
<html>
<head>
<title>Repeaters and Editing</title>
<link href="../westwind.css" rel="stylesheet" type="text/css" />
<script src="../scripts/jquery.min.js" type="text/javascript"></script>
<script src="../scripts/ww.jquery.min.js" type="text/javascript"></script>
<ww:wwWebLiteral ID="WwWebLiteral1" runat="server" Visible="false">
<script src="../scripts/jquery.intellisense.js" type="text/javascript"></script>
<script src="../scripts/ww.jquery.js" type="text/javascript"></script>
</ww:wwWebLiteral>
</head>
<body>
Notice that there are two sets of script references in the page: The actual scripts that will be used on the page and the scripts used for Intellisense which are stored inside of the Literal controls which is set to be invisible. The idea is that VS sees the scripts but at runtime the code is not rendered.
What this means is that you get Intellisense at design time, and only the embedded scripts at runtime.
The above trick with the Literal control also works if you have Web Connection automatically embed scripts into the page. For example, if you use wwAjaxMethodCallback control by default Web Connection will automatically embed scripts into the page so there are effectively no script embeds in the page. But you can add the literal control along with any scripts that you want Intellisense for which is great.
In fact, Web Connection now adds this literal to the default page template, but note that the scripts are NOT automatically added to the page – only when controls are used that rely on them and then only if you don’t override or remote the script auto loading.
Getting Intellisense with jQuery is very useful. Although jQuery’s feature set is small enough to be easy rememberable, there are still a host of functions I often forget about and Intellisense makes them easier to use. Both of these approaches can be a big productivity enhancement.
The downside of the jQuery.Intellisense.js file is that it won’t let you see other plug-ins. So if you’re using Web Connection I still recommend the former approach for now of referencing the marked up jquery.js file so you can see all the jQuery plug-ins that the Web Connection client library provides (in ww.jquery.js).